@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .dt-search {
        display: none;
    }

    .is-invalid {
        border: 2px solid red !important;
    }
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Advance Salary</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button type="button" id="printBtn" class="btn btn-label-secondary">
                Print
            </button>
            <button type="button" id="exportBtn" class="btn btn-label-secondary">
                Export
            </button>
            <a href="{{ route('add_advance_salary') }}"><button class="btn btn-primary">Add Advance Salary</button></a>
        </div>
    </div>

    {{-- <div class="row d-flex justify-content-center">
        <div class="col-lg-6">
            <div class="card p-4 m-2 mt-0">
                <form id="addAdvanceSalaryForm" action="{{ route('storeAdvanceSalary') }}" method="POST">
                    @csrf
                    <h6>Advance Salary</h6>
                    <div class="col-lg-12 mt-2 mb-2">
                        <label class="form-label">Enter ID</label>
                        <input type="text" name="id" id="form_staff_id"
                            class="form-control @error('id') is-invalid @enderror" value="{{ old('id') }}">

                        <small id="error_id" class="text-danger error-msg"></small>

                        @error('id')
                        <small class="text-danger validation-id">
                            {{ $message }}
                        </small>
                        @enderror
                    </div>
                    <div class="col-lg-12 mt-2 mb-2">
                        <label class="form-label">Staff Name</label>
                        <input type="text" name="name" id="staff_name" class="form-control" readonly
                            value="{{ old('name') }}"> <small id="error_name" class="text-danger error-msg"></small>
                    </div>


                    <div class="col-lg-12 mt-2 mb-2">
                        <label class="form-label">Select Branch</label>

                        <input type="text" name="branch" id="staff_branch" class="form-control" readonly
                            value="{{ old('branch') }}">

                        <small id="error_staff_branch" class="text-danger error-msg"></small>
                    </div>

                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Enter Amount</label>
                        <input type="text" name="amount" id="amount"
                            class="form-control @error('amount') is-invalid @enderror" placeholder="₹0.00"
                            value="{{ old('amount') }}">

                        <small class="text-danger error-msg" id="error_amount"></small>

                        @error('amount')
                        <small class="text-danger validation-amount">
                            {{ $message }}
                        </small>
                        @enderror
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Remark</label>
                        <input type="text" name="remark" id="remark"
                            class="form-control @error('remark') is-invalid @enderror" placeholder="Message"
                            value="{{ old('remark') }}">

                        <small id="error_remark" class="text-danger error-msg"></small>

                        @error('remark')
                        <small class="text-danger validation-remark">
                            {{ $message }}
                        </small>
                        @enderror
                    </div>

                    <div class="form-actions mt-4 d-flex gap-3 justify-content-center">

                        <button type="reset" class="btn btn-label-secondary me-2">Discard</button>
                        <button type="submit" class="btn btn-primary" id="finalSubmit">
                            Submit
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div> --}}

    <div class="card p-0 m-2">
        <div class="row m-2 mt-1 g-3">
            <div class="col-lg-3">
                <label class="form-label">From Date</label>
                {{-- <input type="date" name="" id="fromDate" class="form-control"> --}}
                <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">To Date</label>
                {{-- <input type="date" name="" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-lg-3">
                <label class="form-label">Enter ID</label>
                <input type="text" name="id" id="filter_staff_id" class="form-control" placeholder="Enter ID">
            </div>
            <div class="col-lg-3">
                <label class="form-label">Staff Name</label>
                <input type="text" id="filter_staff_name" class="form-control" placeholder="Enter Name">
            </div>
            {{-- <div class="col-lg-3">
                <label class="form-label">Select Department</label>
                <select name="" id="department" class="form-select">
                    <option value="">Select Department</option>
                    <option value="Sales">Sales</option>
                    <option value="Support">Support</option>
                    <option value="Accounts">Accounts</option>
                </select>
            </div> --}}
            <div class="col-lg-3">
                <label class="form-label">Select Branch</label>
                <select id="branch" class="form-select">
                    <option value="">Select Branch</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch') == $branch->id ? 'selected' : '' }}>
                            {{ $branch->branch_name }} - {{ $branch->place }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-lg-3 d-flex align-items-end">
                <button type="button" id="resetBtn" class="btn btn-outline-secondary w-100">
                    Reset
                </button>
            </div>
        </div>
        <div class="row mb-3 align-items-center p-3 g-2">
            {{-- <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                </select>
            </div> --}}

            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Date</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Branch</th>
                                    <th>Amount</th>
                                    <!-- <th>Remark</th> -->
                                    {{-- <th>Department</th> --}}
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('delete_advance_salary') }}" method="POST">

                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Delete Advance Salary</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        Are you sure you want to delete this advance salary?

                        <input type="hidden" name="id" id="delete_id">
                    </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>

    <div class="modal fade" id="editadvanceSalaryView" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form method="POST" id="editAdvanceSalaryForm">
                    @csrf

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

                    <div class="mb-3 text-start">
                        <label class="form-label">Amount</label>
                        <input type="number" name="amount" id="edit_amount" class="form-control">
                        <small class="text-danger" id="error_amount"></small>
                    </div>

                    <!-- <div class="mb-3 text-start">
                                                <label class="form-label">Remark</label>
                                                <input type="text" name="remark" id="edit_remark" class="form-control">
                                                <small class="text-danger" id="error_remark"></small>
                                            </div> -->

                    <button class="btn btn-primary" type="submit">Update</button>
                </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 src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        $(function () {
            // DataTable

            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    table.ajax.reload();
                }
            });
            const table = $('#usersTable').DataTable({


                processing: true,
                serverSide: true,
                ordering: false,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], pageLength: 10,
                ajax: {
                    url: "{{ route('advanceSalaryData') }}",
                    type: "GET",
                    data: (d) => ({
                        ...d,
                        fromDate: $('#fromDate').val(),
                        toDate: $('#toDate').val(),
                        branch: $('#branch').val(),
                        staff_id: $('#filter_staff_id').val(),
                        staff_name: $('#filter_staff_name').val()
                    })
                },
                columns: [
                    { data: null, render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1 },
                    { data: 'date' },
                    { data: 'user_id' },
                    { data: 'name' },
                    { data: 'branch' },
                    { data: 'amount' },
                    // { data: 'remark' },
                    { data: 'action', searchable: false }
                ]
            });

            // Search & Filters
            $('#customSearch').on('keyup', () => table.search($('#customSearch').val()).draw());
            $('#branch, #filter_staff_id, #filter_staff_name')
                .on('change keyup', function () {
                    table.ajax.reload(null, true);
                });

            // Clear validation
            $(document).on('keyup change', '.form-control, .form-select', function () {
                $(this).removeClass('is-invalid').siblings('.text-danger').text('');
            });

            // Delete Modal
            $(document).on('click', '.deleteBtn', (e) => {
                e.preventDefault();
                $('#delete_id').val($(e.currentTarget).data('id'));
                $('#delete').modal('show');
            });

            // Edit Modal - Open
            $(document).on('click', '.editBtn', (e) => {
                e.preventDefault();
                const $btn = $(e.currentTarget);

                // Reset form
                $('#error_amount, #error_remark').text('');
                $('#edit_amount, #edit_remark').removeClass('is-invalid');

                // Set values
                $('#edit_id').val($btn.data('id'));
                $('#edit_amount').val($btn.data('amount'));
                $('#edit_remark').val($btn.data('remark'));

                // Set form action
                let url = "{{ route('update_advance_salary', ':id') }}";
                $('#editAdvanceSalaryForm').attr('action', url.replace(':id', $btn.data('id')));

                $('#editadvanceSalaryView').modal('show');
            });

            // Update Form Submit
            $('#editAdvanceSalaryForm').off('submit').on('submit', function (e) {
                e.preventDefault();

                const $btn = $(this).find('button[type="submit"]');
                $('#error_amount, #error_remark').text('');
                $('#edit_amount, #edit_remark').removeClass('is-invalid');

                $btn.prop('disabled', true).text('Updating...');

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        amount: $('#edit_amount').val(),
                        remark: $('#edit_remark').val()
                    },
                    success: (res) => {
                        $btn.prop('disabled', false).text('Update');
                        $('#editadvanceSalaryView').modal('hide');
                        table.ajax.reload(null, false);
                        showToast(res.message, 'bg-success');
                    },
                    error: (xhr) => {
                        $btn.prop('disabled', false).text('Update');

                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            if (errors.amount) {
                                $('#error_amount').text(errors.amount[0]);
                                $('#edit_amount').addClass('is-invalid');
                            }
                            if (errors.remark) {
                                $('#error_remark').text(errors.remark[0]);
                                $('#edit_remark').addClass('is-invalid');
                            }
                        }
                        showToast(xhr.responseJSON?.message || 'Something went wrong', 'bg-danger');
                    }
                });
            });

            // Reset modals on close
            $('#editadvanceSalaryView').on('hidden.bs.modal', () => {
                $('#edit_amount, #edit_remark').removeClass('is-invalid');
                $('#error_amount, #error_remark').text('');
            });

            $('#delete').on('hidden.bs.modal', () => {
                $('#deleteSubmitBtn').prop('disabled', false).text('Delete');
            });
            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val(),
                    branch: $('#branch').val(),
                    staff_id: $('#filter_staff_id').val(),
                    staff_name: $('#filter_staff_name').val(),
                    search: $('#customSearch').val()
                });
                window.location.href = "{{ route('advance_salary_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val(),
                    branch: $('#branch').val(),
                    staff_id: $('#filter_staff_id').val(),
                    staff_name: $('#filter_staff_name').val(),
                    search: $('#customSearch').val()
                });
                window.open("{{ route('advance_salary_print') }}?" + params.toString(), '_blank');
            });

            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                $('#toDate')[0]._flatpickr.clear();
                $('#branch').val('');
                $('#filter_staff_id, #filter_staff_name, #customSearch').val('');
                table.search('').ajax.reload();
            });

        });
    </script>

    <script>
        document.querySelector('#delete form').addEventListener('submit', function () {

            let btn = document.getElementById('deleteSubmitBtn');

            // prevent double click
            btn.disabled = true;

            btn.innerHTML = 'Deleting...';
        });
    </script>


@endsection