@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-3">
    <div class="d-flex align-items-center">
        <h5 class="mb-0">

            <a href="{{ route('add_card') }}"
                class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow:0px 9px 12px -2px #66328E1F;">

                <i class="fa fa-arrow-left text-dark"></i>

            </a>

            Edit Card

        </h5>
    </div>
</div>

<div class="card p-4">

    <h5 class="mb-4">
        Update Card Details
    </h5>

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

        @csrf

        <input type="hidden"
            name="id"
            value="{{ $card->id }}">

        <div class="row">

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

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

                <input
                    type="text"
                    name="card_holder_name"
                    class="form-control @error('card_holder_name') is-invalid @enderror"
                    value="{{ old('card_holder_name',$card->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"
                    name="card_number"
                    class="form-control @error('card_number') is-invalid @enderror"
                    value="{{ old('card_number',$card->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"
                    name="cvc_number"
                    class="form-control @error('cvc_number') is-invalid @enderror"
                    value="{{ old('cvc_number',$card->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
                    name="card_type"
                    class="form-select @error('card_type') is-invalid @enderror">

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

                    <option value="Visa"
                        {{ old('card_type',$card->card_type)=='Visa' ? 'selected' : '' }}>
                        Visa
                    </option>

                    <option value="Master Card"
                        {{ old('card_type',$card->card_type)=='Master Card' ? 'selected' : '' }}>
                        Master Card
                    </option>

                    <option value="RuPay"
                        {{ old('card_type',$card->card_type)=='RuPay' ? 'selected' : '' }}>
                        RuPay
                    </option>

                    <option value="Amex"
                        {{ old('card_type',$card->card_type)=='Amex' ? 'selected' : '' }}>
                        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
                    name="expiry_month"
                    class="form-select @error('expiry_month') is-invalid @enderror">

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

                    @for($i=1;$i<=12;$i++)

                    <option
                        value="{{ sprintf('%02d',$i) }}"
                        {{ old('expiry_month',$card->expiry_month)==sprintf('%02d',$i) ? 'selected' : '' }}>

                        {{ 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
                    name="expiry_year"
                    class="form-select @error('expiry_year') is-invalid @enderror">

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

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

                    <option
                        value="{{ $year }}"
                        {{ old('expiry_year',$card->expiry_year)==$year ? 'selected' : '' }}>

                        {{ $year }}

                    </option>

                    @endfor

                </select>

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

            </div>

        </div>

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

            <a href="{{ route('add_card') }}"
                class="btn btn-secondary me-2">

                Cancel

            </a>

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

                Update Card

            </button>

        </div>

    </form>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>

$(function(){

    $('#cardForm').on('submit',function(){

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

    });

});

</script>

@endsection