@extends('Admin.layout')

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="d-flex align-items-center mb-3">

        <h5 class="mb-0">Payout History</h5>

        <div class="d-flex gap-2 ms-auto">
            <button id="printBtn" class="btn btn-label-secondary">Print</button>
            <button id="exportBtn" class="btn btn-label-secondary">Export</button>
            <a href="{{ route('generate_payment') }}" class="btn btn-primary">
                Generate
            </a>
        </div>

    </div>

    {{-- FILTER CARD --}}
    <div class="card p-3 mb-3">

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

            {{-- Month Filter --}}
            <div class="col-md-3">
                <label class="form-label">Month</label>
                <select id="monthFilter" class="form-select">
                    <option value="">All</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </div>

            {{-- Year Filter --}}
            <div class="col-md-3">
                <label class="form-label">Year</label>
                <select id="yearFilter" class="form-select">
                    <option value="">All</option>
                    @for($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}">{{ $y }}</option>
                    @endfor
                </select>
            </div>

        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="card p-3">

        <div class="table-responsive">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Month</th>
                        <th>Count</th>
                        <th>Payout</th>
                        <th>View</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>

    {{-- DELETE MODAL --}}
    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('deletePaymentHistory') }}" method="POST">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Delete Payment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <p class="mb-3">
                            Are you sure you want to delete this payment?
                        </p>

                        <input type="hidden" name="id" id="delete_id">

                        <div class="mb-3">
                            <label for="delete_reason" class="form-label">
                                Reason <span class="text-danger">*</span>
                            </label>

                            <textarea class="form-control" id="delete_reason" name="dlt_reason" rows="3"
                                placeholder="Enter the reason for deleting this payment History..." required></textarea>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-danger" id="deleteSubmitBtn">
                            Delete
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>
        $(document).ready(function () {

            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('payment_history_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.month = $('#monthFilter').val();
                        d.year = $('#yearFilter').val();
                    }
                },
                searching: true,
                paging: true,
                info: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                pageLength: 10,
                ordering: false,
                columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'month',
                    name: 'month'
                },
                {
                    data: 'count',
                    name: 'count'
                },
                {
                    data: 'total_payout',
                    name: 'total_payout'
                },
                {
                    data: 'view',
                    name: 'view',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
                ]
            });

            $('#monthFilter, #yearFilter').change(function () {
                table.draw();
            });

            $(document).on('click', '.deleteBtn', function () {
                let id = $(this).data('id');
                $('#delete_id').val(id);
                $('#delete').modal('show');
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    month: $('#monthFilter').val(),
                    year: $('#yearFilter').val()
                });
                window.location.href = "{{ route('payment_history_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    month: $('#monthFilter').val(),
                    year: $('#yearFilter').val()
                });
                window.open("{{ route('payment_history_print') }}?" + params.toString(), '_blank');
            });
        });
    </script>
    <script>
        document.querySelector('#delete form').addEventListener('submit', function () {
            let btn = document.getElementById('deleteSubmitBtn');
            btn.disabled = true;
            btn.innerHTML = 'Deleting...';
        });
    </script>


@endsection