@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 justify-content-between align-items-center mb-1">
        <div class="d-flex align-items-center">
            <h5 class="mb-0">
                <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow:0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('view_card') }}">
                        <i class="fa fa-arrow-left text-dark"></i>
                    </a>
                </button>
                Add Card
            </h5>
        </div>
    </div>

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

        <h6>Add Card</h6>

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

            <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 @error('card_holder_name') is-invalid @enderror"
                        name="card_holder_name" value="{{ old('card_holder_name') }}" placeholder="Enter Card Holder Name">

                    @error('card_holder_name')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

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

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

                    <input type="text" maxlength="19" class="form-control @error('card_number') is-invalid @enderror"
                        name="card_number" value="{{ old('card_number') }}" placeholder="Enter Card Number">

                    @error('card_number')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

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

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

                    <input type="text" maxlength="4" class="form-control @error('cvc_number') is-invalid @enderror"
                        name="cvc_number" value="{{ old('cvc_number') }}" placeholder="Enter CVC">

                    @error('cvc_number')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

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

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

                    <select class="form-select @error('card_type') is-invalid @enderror" name="card_type">

                        <option value="">
                            Select Card Type
                        </option>

                        <option value="Visa">
                            Visa
                        </option>

                        <option value="Master Card">
                            Master Card
                        </option>

                        <option value="RuPay">
                            RuPay
                        </option>

                        <option value="Amex">
                            Amex
                        </option>

                    </select>

                    @error('card_type')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

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

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

                    <select class="form-select @error('expiry_month') is-invalid @enderror" name="expiry_month">

                        <option value="">Select Month</option>

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

                    </select>

                    @error('expiry_month')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

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

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

                    <select class="form-select @error('expiry_year') is-invalid @enderror" name="expiry_year">

                        <option value="">
                            Select Year
                        </option>

                        @for($year = date('Y'); $year <= date('Y') + 15; $year++)
                            <option value="{{ $year }}">
                                {{ $year }}
                            </option>
                        @endfor

                    </select>

                    @error('expiry_year')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror

                </div>

            </div>

            <div class="text-center mt-3">

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

                    Save Card

                </button>

            </div>

        </form>

    </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