@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><i class="fa fa-credit-card"></i> PayStation Orders</h3>
        </div>
        <div class="card-body">

            @if (!$configured)
                <div class="alert alert-warning">
                    PayStation credentials are not configured, so status recheck will not work.
                </div>
            @endif

            <div class="alert alert-info py-2">
                PayStation does not send any IPN. Unsettled orders are re-checked automatically every
                10 minutes by <code>paystation:sync</code>. Use <b>Recheck</b> to verify one order right now.
            </div>

            <div class="row mb-3">
                @foreach ($summary as $row)
                    <div class="col-md-2 col-sm-4 mb-2">
                        <div class="small-box bg-light mb-0">
                            <div class="inner p-2">
                                <h5 class="mb-0">{{ $row->total }}</h5>
                                <p class="mb-0">{{ $row->status }}</p>
                                <small class="text-muted">৳{{ number_format($row->amount ?? 0, 2) }}</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mb-3">
                <div class="col-md-2">
                    <label class="small mb-1">From Date</label>
                    <input type="date" id="from_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="small mb-1">To Date</label>
                    <input type="date" id="to_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="small mb-1">Status</label>
                    <select id="status" class="form-control">
                        <option value="">All Status</option>
                        @foreach ($statuses as $status)
                            <option value="{{ $status }}">{{ $status }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" class="custom-control-input" id="unsettled_only">
                        <label class="custom-control-label" for="unsettled_only">Unsettled only</label>
                    </div>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button id="filter" class="btn btn-primary mr-2 mb-2">Search</button>
                    <button id="reset" class="btn btn-secondary mb-2">Reset</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="dataTable" class="table table-bordered table-striped" style="width: 100% !important;">
                    <thead class="bg-dark text-white">
                        <tr>
                            <th>#</th>
                            <th>Invoice</th>
                            <th>Customer</th>
                            <th>Phone</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Gateway Info</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {

            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().clear().destroy();
            }

            let table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                pageLength: 100,
                lengthMenu: [
                    [10, 25, 50, 100, 200, 500],
                    [10, 25, 50, 100, 200, 500]
                ],
                ajax: {
                    url: '{{ route('paystation-orders.datatable') }}',
                    data: function(d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.status = $('#status').val();
                        d.unsettled_only = $('#unsettled_only').is(':checked') ? 1 : 0;
                    }
                },
                columns: [
                    { data: 'id', name: 'o.id' },
                    { data: 'transaction_id', name: 'o.transaction_id' },
                    { data: 'customer', name: 'o.name' },
                    { data: 'phone', name: 'o.phone' },
                    { data: 'amount', name: 'o.amount' },
                    { data: 'status', name: 'o.status' },
                    { data: 'gateway', name: 'o.ipn_data', orderable: false },
                    { data: 'created_at', name: 'o.created_at' },
                    { data: 'updated_at', name: 'o.updated_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
                order: [
                    [0, 'desc']
                ]
            });

            $('#filter').on('click', function() {
                table.draw();
            });

            $('#reset').on('click', function() {
                $('#from_date').val('');
                $('#to_date').val('');
                $('#status').val('');
                $('#unsettled_only').prop('checked', false);
                table.draw();
            });

            $('#dataTable').on('click', '.recheck-btn', function() {
                let button = $(this);
                let invoice = button.data('invoice');

                button.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Checking');

                $.ajax({
                    url: '{{ route('paystation-orders.recheck') }}',
                    type: 'POST',
                    data: {
                        invoice: invoice
                    },
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        if (res.status === 'success') {
                            toastr.success(res.message);
                        } else {
                            toastr.warning(res.message + ' (' + res.result + ')');
                        }
                        table.draw(false);
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.message || 'Recheck failed.');
                        button.prop('disabled', false).html('<i class="fa fa-sync"></i> Recheck');
                    }
                });
            });

        });
    </script>
@endsection