@extends('backend.app')

@section('title', 'Store List')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container {
        width: 100% !important;
        display: block;
    }
    .select2-container .select2-selection--single {
        height: 38px !important; /* Matches standard Bootstrap 5 form control heights */
        padding: 5px;
    }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Store List</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Stores</li>
        </ol>
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <div class="mb-3 row g-3 align-items-end">

                    <div class="col-md-3">
                        <label class="form-label" for="filterStoreName">Name</label>
                        <select class="form-control js-filter-select" id="filterStoreName" data-placeholder="Select name">
                            <option value=""></option>
                            @foreach ($nameOptions as $name)
                                <option value="{{ $name }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="filterProperty">Property</label>
                        <input type="text" class="form-control" id="filterProperty" placeholder="Search property">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="filterStatus">Status</label>
                        <select class="form-control js-filter-select" id="filterStatus" data-placeholder="Select status">
                            <option value=""></option>
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                            <option value="trashed">Trashed</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="filterCreatedAtDateRange">Created At Date Range</label>
                        <input type="text" class="form-control" id="filterCreatedAtDateRange" placeholder="Select date range" readonly>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="filterCompletedAtDateRange">Completed At Date Range</label>
                        <input type="text" class="form-control" id="filterCompletedAtDateRange" placeholder="Select date range" readonly>
                    </div>

                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Store Name</th>
                                <th>Property</th>
                                <th>Total Amount</th>
                                <th>Store Fee</th>
                                <th>Platform Fee</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Completed At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            }
        });

        if (!$.fn.DataTable.isDataTable('#datatable')) {
            const table = $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                processing: true,
                responsive: true,
                serverSide: true,
                language: {
                    processing: `<div class="text-center">
                        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>`
                },
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
                ajax: {
                    url: "{{ route('admin.store.ledger.index') }}",
                    type: "GET",
                    data: function (d) {
                        d.store_name = $('#filterStoreName').val();
                        d.property = $('#filterProperty').val();
                        d.status = $('#filterStatus').val();
                        d.created_from = $('#filterCreatedAtDateRange').data('created-from');
                        d.created_to = $('#filterCreatedAtDateRange').data('created-to');
                        d.completed_from = $('#filterCompletedAtDateRange').data('completed-from');
                        d.completed_to = $('#filterCompletedAtDateRange').data('completed-to');
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'store_name', name: 'store_name', orderable: false, searchable: false },
                    { data: 'property',      name: 'property',    orderable: false, searchable: false },
                    { data: 'total_amount', name: 'total_amount' },
                    { data: 'store_fee', name: 'store_fee' },
                    { data: 'platform_fee', name: 'platform_fee' },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'created_at', name: 'created_at', orderable: false, searchable: false },
                    { data: 'completed_at', name: 'completed_at', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
                drawCallback: function () {
                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                        tooltipTriggerList.map(function (tooltipTriggerEl) {
                            // dispose old tooltips to prevent leaks/ghosts
                            var tooltipInstance = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
                            if (tooltipInstance) {
                                tooltipInstance.dispose();
                            }
                            return new bootstrap.Tooltip(tooltipTriggerEl);
                        });
                    } else if ($.fn.tooltip) {
                        $('[data-bs-toggle="tooltip"]').tooltip();
                    }
                }
            });

            const $filterSelects = $('.js-filter-select');
            $filterSelects.each(function () {
                const $el = $(this);
                $el.select2({
                    width: '100%',
                    allowClear: true,
                    placeholder: $el.data('placeholder') || 'Select'
                });
            });

            $('#filterProperty').on('keyup', function () {
                table.ajax.reload();
            });

            $filterSelects.on('change', function () {
                table.ajax.reload();
            });

            const dateRangePicker = flatpickr('#filterCreatedAtDateRange', {
                mode: 'range',
                dateFormat: 'Y-m-d',
                onChange: function (selectedDates, dateStr) {
                    let dateFrom = '';
                    let dateTo = '';
                    if (selectedDates.length >= 1) {
                        dateFrom = selectedDates[0].toISOString().slice(0, 10);
                    }
                    if (selectedDates.length >= 2) {
                        dateTo = selectedDates[1].toISOString().slice(0, 10);
                    }
                    $('#filterCreatedAtDateRange').data('created-from', dateFrom);
                    $('#filterCreatedAtDateRange').data('created-to', dateTo);
                    table.ajax.reload();
                }
            });

            const completedDateRangePicker = flatpickr('#filterCompletedAtDateRange', {
                mode: 'range',
                dateFormat: 'Y-m-d',
                onChange: function (selectedDates, dateStr) {
                    let dateFrom = '';
                    let dateTo = '';
                    if (selectedDates.length >= 1) {
                        dateFrom = selectedDates[0].toISOString().slice(0, 10);
                    }
                    if (selectedDates.length >= 2) {
                        dateTo = selectedDates[1].toISOString().slice(0, 10);
                    }
                    $('#filterCompletedAtDateRange').data('completed-from', dateFrom);
                    $('#filterCompletedAtDateRange').data('completed-to', dateTo);
                    table.ajax.reload();
                }
            });

            $('#filterReset').on('click', function () {
                $('#filterCreatedAtDateRange').data('created-from', '');
                $('#filterCreatedAtDateRange').data('created-to', '');
                $('#filterCompletedAtDateRange').data('completed-from', '');
                $('#filterCompletedAtDateRange').data('completed-to', '');
                $('#filterProperty').val('');
                $filterSelects.val('').trigger('change');
                completedDateRangePicker.clear();
                dateRangePicker.clear();
                table.ajax.reload();
            });
        }
    });



    $(document).on('click', '.btn-approve-ledger', function () {
        let id = $(this).data('id');
        let url = '{{ route('admin.store.ledger.approve', ':id') }}'.replace(':id', id);

        Swal.fire({
            title: 'Approve Ledger?',
            text: 'This will activate the tickets, send the ticket PDF to the buyer, and notify the store.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, approve',
            cancelButtonText: 'Cancel',
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'POST',
                    url: url,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function (resp) {
                        if (resp.success) {
                            toastr.success(resp.message);
                            $('#datatable').DataTable().ajax.reload(null, false);
                        } else {
                            toastr.error(resp.message);
                        }
                    },
                    error: function (xhr) {
                        let msg = 'Failed to approve ledger.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        toastr.error(msg);
                    }
                });
            }
        });
    });
</script>
@endpush