@extends('backend.manager.layouts.manager-app')

@section('title', 'Ledger — ' . $store->name)

@push('style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .ledger-status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Ledger</h1>
        </div>
        <div class="gap-2 ms-auto pageheader-btn d-flex align-items-center">
            <ol class="mb-0 breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('store-manager.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Ledger</li>
            </ol>
        </div>
    </div>

    @if(session('t-success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('t-success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('t-error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('t-error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="bg-transparent border-0 card-header">
                    <h5 class="mb-0">{{ $store->name }} — Commission Ledger</h5>
                </div>
                <div class="card-body">

                    <div class="mb-3 row g-3 align-items-end">
                        <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" id="filterStatus">
                                <option value="">All</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 align-middle table-hover text-nowrap w-100" id="ledger-table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Property</th>
                                    <th>Total Amount</th>
                                    <th>Store Fee</th>
                                    <th>Platform Fee</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

            const table = $('#ledger-table').DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                lengthMenu: [[10, 25, 50], [10, 25, 50]],
                language: {
                    processing: '<div class="text-center"><div class="spinner-border text-primary" style="width:2rem;height:2rem;" role="status"></div></div>'
                },
                ajax: {
                    url: '{{ route('store-manager.ledger.index') }}',
                    data: function (d) {
                        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: '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 },
                ],
                columnDefs: [
                    { targets: [5], className: 'text-center' }
                ]
            });

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

            $('#filterProperty').on('keyup', 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('');
                $('#filterStatus').val('');
                completedDateRangePicker.clear();
                dateRangePicker.clear();
                table.ajax.reload();
            });
        });
    </script>
@endpush