@php
    $status = $item->getPaymentStatus();
    $badgeColor = config('status.badge')[$status];
    $message = config('status.payment')[$status];
@endphp
<div class="tailwind-scope">

    <button type="button" class="btn px-3 py-1 rounded-full text-xs font-semibold {{ $badgeColor }}" data-toggle="modal"
        title="Payer" data-target="#paidModal-{{ $item->id }}" data-value="{{ $item->id }}"
        value="{{ $item->reservation_id }}" @if($status == 'paid') disabled @endif>

        <span>{{ $message }}</span>
        {{-- <i class="icon-coin-dollar"></i> --}}
    </button>

</div>

<div class="modal fade" id="paidModal-{{$item->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Payer </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body d-flex justify-content-center">
                <div aria-labelledby="swal2-title" aria-describedby="swal2-content"
                    class="swal2-popup swal2-modal swal2-show" tabindex="-1" role="dialog" aria-live="assertive"
                    aria-modal="true" style="display: flex;">
                    <div class="tailwind-scope">
                        <form action="{{ route('create-recovrey') }}" method="post" class="modal-form" novalidate>
                            {{ csrf_field() }}
                            <div class="alert alert-danger d-none alertDates" role="alert">
                                {{ session('error') }}
                            </div>
                            <x-form-group label="Montant à payer:">
                                <input type="text" name="total_price" readonly class="form-control custom-input w-1/2"
                                    value="{{ number_format($item->getTotalPrice() + $item->getTotalExtensions(), 2, '.', '') }}">
                            </x-form-group>

                            <x-form-group label="Reste à payer:">
                                <input type="text" readonly
                                    value="{{ number_format($item->getLeftToPaid(), 2, '.', ' ') }}" name="left_to_pay"
                                    class="form-control left-to-pay custom-input w-1/2">
                            </x-form-group>
                            <x-form-group label="Nouveau Montant:">
                                <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="advance"
                                    class="form-control new-amount custom-input w-1/2" placeholder="Nouveau Montant"
                                    title="Veuillez saisir un montant sous format décimal">
                            </x-form-group>

                            <x-form-group label="Date de paiement:">
                                <input type="date" class="form-control custom-input w-1/2" value="{{ date('Y-m-d') }}"
                                    name="paid_at">
                            </x-form-group>

                            <x-form-group label="Currency:">
                                <div class="w-1/2">

                                    <select class="form-control select-search form-control-sm select" name="currency">
                                        @foreach (config('payment.currency') as $val)
                                            <option value="{{ $val }}">{{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </x-form-group>

                            <x-form-group label="Mode de paiement:">
                                <div class="w-1/2">
                                    <select class="form-control select-search payment-mode" name="payment_mode"
                                        id="paymentMode">
                                        @foreach (config('payment.mode') as $val)
                                            <option value="{{ $val }}">{{ $val }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </x-form-group>

                            <div class="form-group d-none check-number">
                                <label>Numéro de chèque :</label>
                                <input class="form-control" name="check_number">
                            </div>

                            <div class="form-group d-none bank">
                                <label>Nom de la banque :</label>
                                <select class="form-control select-search" name="bank">
                                    @foreach (config('bank.list') as $val)
                                        <option value="{{ $val }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <x-form-group label="Remarque:">
                                <textarea class="form-control custom-input w-1/2" name="remark"></textarea>
                            </x-form-group>
                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}">
                            <input type="hidden" name="reservation_id" value="{{$item->id }}">
                            <input type="hidden" name="case_index" class="case-index">
                            <input type="hidden" name="status" value="{{ config('case.status')['seizure'] }}">
                            <div class="modal-footer mt-1">
                                <button type="button" class="btn btn-secondary bg-gray-500 text-white px-3 py-1.5"
                                    data-dismiss="modal">Fermer
                                </button>
                                <button type="submit" id="submitBox"
                                    class="button button-primary px-3 py-1.5 bg-[#31B08F] text-white">Payer
                                </button>
                            </div>
                            <script>
                                $(document).on('submit', '#pay-form', function () {
                                    const button = $('#submitBox');
                                    button.prop('disabled', true).addClass('opacity-50').html('<i class="fa fa-spinner fa-spin"></i> En cours...');
                                });
                            </script>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>