@extends('Admin.layout')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

@section('content')

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
        <div class="d-flex align-items-center gap-3">
            <div>
                <h5 class="fw-bold mb-0">Card Management</span>
                </h5>
            </div>
        </div>
        <div class="d-flex gap-2">

            <a href="{{ route('add_card') }}" class="btn btn-primary px-4">
                <i class="ti tabler-plus me-1"></i> Add Card
            </a>

        </div>
    </div>

    <div class="card p-4 mt-4">

        <div class="table-responsive">

            <table class="table" id="dept">

                <thead>

                    <tr>

                        <th>SNO</th>

                        <th>Card Holder</th>

                        <th>Card Number</th>

                        <th>Card Type</th>

                        <th>Expiry</th>

                        <th>Status</th>

                        <th>Action</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

    </div>

    {{-- Delete Modal --}}

    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4">

                <h5 class="fw-bold">
                    Are you sure?
                </h5>

                <p class="text-muted">
                    Do you want to delete this card?
                </p>

                <form action="{{ route('delete_card') }}" method="POST" id="deleteForm">

                    @csrf

                    <input type="hidden" name="id" id="deleteId">

                    <div class="d-flex justify-content-center gap-3 mt-3">

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-danger" id="finalSubmit">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
    {{-- ========================= --}}
    {{-- Edit Card Modal --}}
    {{-- ========================= --}}
    <div class="modal fade" id="editCardModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">

            <form action="{{ route('update_card') }}" method="POST" id="editCardForm">
                @csrf

                <input type="hidden" name="id" id="edit_id">

                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Edit Card</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>

                    <div class="modal-body">

                        <div class="row">

                            {{-- Card Holder --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    Card Holder Name
                                </label>

                                <input type="text" class="form-control" name="card_holder_name" id="edit_card_holder_name">

                            </div>

                            {{-- Card Number --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    Card Number
                                </label>

                                <input type="text" class="form-control" maxlength="19" name="card_number"
                                    id="edit_card_number">

                            </div>

                            {{-- CVC --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    CVC Number
                                </label>

                                <input type="text" class="form-control" maxlength="4" name="cvc_number"
                                    id="edit_cvc_number">

                            </div>

                            {{-- Card Type --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    Card Type
                                </label>

                                <select class="form-select" name="card_type" id="edit_card_type">

                                    <option value="Visa">Visa</option>
                                    <option value="Master Card">Master Card</option>
                                    <option value="RuPay">RuPay</option>
                                    <option value="Amex">Amex</option>

                                </select>

                            </div>

                            {{-- Month --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    Expiry Month
                                </label>

                                <select class="form-select" name="expiry_month" id="edit_expiry_month">

                                    @for($i = 1; $i <= 12; $i++)
                                        <option value="{{ sprintf('%02d', $i) }}">
                                            {{ sprintf('%02d', $i) }}
                                        </option>
                                    @endfor

                                </select>

                            </div>

                            {{-- Year --}}
                            <div class="col-lg-6 mb-3">

                                <label class="form-label">
                                    Expiry Year
                                </label>

                                <select class="form-select" name="expiry_year" id="edit_expiry_year">

                                    @for($year = date('Y'); $year <= date('Y') + 15; $year++)

                                        <option value="{{ $year }}">
                                            {{ $year }}
                                        </option>

                                    @endfor

                                </select>

                            </div>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-primary" id="updateBtn">

                            Update Card

                        </button>

                    </div>

                </div>

            </form>

        </div>
    </div>

    {{-- ========================= --}}
    {{-- Status Modal --}}
    {{-- ========================= --}}

    <div class="modal fade" id="statusModal" tabindex="-1">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <form action="{{ route('update_card_status') }}" method="POST" id="statusForm">

                @csrf

                <input type="hidden" name="id" id="status_id">

                <input type="hidden" name="status" id="status_value">

                <div class="modal-content">

                    <div class="modal-body text-center p-4">

                        <i class="fa-solid fa-circle-question text-warning fa-3x mb-3"></i>

                        <h5>
                            Change Status?
                        </h5>

                        <p class="text-muted">

                            Are you sure you want to change this card status?

                        </p>

                        <div class="mt-4">

                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">

                                Cancel

                            </button>

                            <button type="submit" class="btn btn-success" id="statusBtn">

                                Yes

                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>

    <script>

        var jq = jQuery.noConflict();

        jq(document).ready(function () {

            //=============================
            // DATATABLE
            //=============================
            var table = jq('#dept').DataTable({

                processing: true,
                serverSide: true,

                ajax: "{{ route('card_data') }}",

                columns: [

                    {
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'card_holder_name'
                    },

                    {
                        data: 'card_number'
                    },

                    {
                        data: 'card_type'
                    },

                    {
                        data: 'expiry'
                    },

                    {
                        data: 'status',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }

                ]

            });

            //=============================
            // DELETE
            //=============================
            jq(document).on('click', '.deleteBtn', function () {

                jq('#deleteId').val(
                    jq(this).data('id')
                );

            });

            jq('#deleteForm').submit(function () {

                jq('#finalSubmit')
                    .prop('disabled', true)
                    .html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            });

            //=============================
            // STATUS
            //=============================

            jq(document).on('click', '.changeStatus', function () {

                jq('#status_id').val(
                    jq(this).data('id')
                );

                jq('#status_value').val(
                    jq(this).data('status')
                );

            });

            jq('#statusForm').submit(function () {

                jq('#statusBtn')
                    .prop('disabled', true)
                    .html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            });

            //=============================
            // EDIT
            //=============================

            jq(document).on('click', '.editBtn', function () {

                let id = jq(this).data('id');

                jq.ajax({

                    url: "/edit-card/" + id,

                    type: "GET",

                    success: function (res) {

                        jq('#edit_id').val(res.id);

                        jq('#edit_card_holder_name').val(res.card_holder_name);

                        jq('#edit_card_number').val(res.card_number);

                        jq('#edit_cvc_number').val(res.cvc_number);

                        jq('#edit_card_type').val(res.card_type);

                        jq('#edit_expiry_month').val(res.expiry_month);

                        jq('#edit_expiry_year').val(res.expiry_year);

                        jq('#editCardModal').modal('show');

                    }

                });

            });

            jq('#editCardForm').submit(function () {

                jq('#updateBtn')
                    .prop('disabled', true)
                    .html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            });

            //=============================
            // ADD FORM
            //=============================

            jq('#cardForm').submit(function () {

                jq('#saveBtn')
                    .prop('disabled', true)
                    .html('<i class="fa fa-spinner fa-spin"></i> Processing...');

            });

        });

    </script>
@endsection