@extends('user.layouts.app')
<style>
    .page-header {
        min-height: fit-content !important;
    }
</style>
@section('content')
    <div class="page-header">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="title">
                    <h4>Orders</h4>
                </div>
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Orders</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="card-box pd-20 height-100-p mb-30">
        <div class="row">
            <div class="col-md-12">
                <div class="card-box pd-20 height-100-p mb-30">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Order #</th>
                            <th scope="col">Amount</th>
                            <th scope="col">Payout</th>
                            <th scope="col">Order Status</th>
                            <th scope="col">Action</th>
                        </tr>
                        </thead>
                        @foreach($orders as $item)
                            <tbody>
                            <tr>
                                <th scope="row">{{ $item->id }}</th>
                                <td>{{ $item->order_no }}</td>
                                <td>{{ $item->total_amount }}</td>
                                <td>
                                    @if($item->payout == 1 && $item->order_status != 'cancelled')
                                        <a href="#" class="btn btn-sm btn-dark .bg-success" data-bs-toggle="modal"
                                           data-bs-target="#paymentModal{{ $item->id }}">
                                            Pay
                                        </a>
                                    @elseif($item->order_status == 'cancelled')
                                        <a href="#" class="btn btn-sm btn-danger .bg-success">
                                            Cancelled
                                        </a>
                                    @else
                                        <a href="#" class="btn btn-sm btn-success .bg-success">
                                            Paid
                                        </a>
                                    @endif
                                </td>
                                <td>{{ $item->order_status }}</td>
                                <td>
                                    <div style="display: inline-block;">
                                        <a href="{{ route('user.order.detail', $item->id) }}"
                                           class="btn btn-sm btn-primary .bg-success">
                                            Detail
                                        </a>
                                    </div>

                                </td>


                            </tr>
                            </tbody>
                            <!-- Modal -->
                            <div class="modal fade" id="paymentModal{{ $item->id }}" tabindex="-1"
                                 aria-labelledby="paymentModalLabel{{ $item->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="paymentModalLabel">Payment Information</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                        </div>
                                        <form method="post" action="{{ route('user.order.payoutPayment') }}">
                                            @csrf
                                            <input type="hidden" name="order_id" value="{{  $item->id }}">
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="xCardNum" class="form-label">Card Number</label>
                                                    <input type="text" name="xCardNum" class="form-control"
                                                           id="xCardNum" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="xExp" class="form-label">Expiry
                                                        (MM/YY)</label>
                                                    <input type="text" name="xExp" class="form-control"
                                                           id="xExp"
                                                           placeholder="MM/YY" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="xCVV" class="form-label">CVV</label>
                                                    <input type="password" name="xCVV" class="form-control"
                                                           id="xCVV"
                                                           maxlength="3" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                    Close
                                                </button>
                                                <button type="submit" class="btn btn-primary">Process Payment</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                        @endforeach
                    </table>
                    <div class="row">
                        <div class="col-md-12">
                            {{$orders->links()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@push('js')
    <script>
        $(document).ready(function () {

            $('#xExp').on('keyup', function () {
                const expirationDateInput = document.getElementById('xExp');

                // Get the input value
                let inputValue = expirationDateInput.value;

                // Remove non-numeric characters
                inputValue = inputValue.replace(/\D/g, '');

                // Format the input as MM/YY
                if (inputValue.length > 1) {
                    let year = inputValue.substring(2, 4);
                    let month = inputValue.substring(0, 2);
                    if ((parseInt(year) < (new Date().getFullYear() % 100)) || (parseInt(year) == (new Date().getFullYear() % 100) && (parseInt(month) <= (new Date().getMonth() + 1)))) {
                        expirationDateInput.setCustomValidity('Your card has expired.');
                        return;
                    }
                    expirationDateInput.setCustomValidity('');
                    inputValue = month + '/' + year;
                }

                // Update the input value
                expirationDateInput.value = inputValue;
            });
        });

    </script>
@endpush