@extends('Admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        /* Custom styles to match the image UI */
        .card {
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        /* Table Header Styling */
        #usersTable thead th {
            background-color: #fcfcfd;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #717171;
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 15px;
        }

        #usersTable tbody td {
            padding: 15px;
            vertical-align: middle;
            color: #4b4b4b;
            font-size: 14px;
        }

        /* Status Badge Styling */
        .badge-completed {
            background-color: #E8FADF;
            color: #44C13C;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
        }

        .badge-pending {
            background-color: #FFE5E5;
            color: #FF5B5C;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
        }

        /* Action Icons */
        .btn-download {
            color: #5D87FF;
            transition: 0.2s;
            cursor: pointer;
        }

        .btn-download:hover {
            color: #3b66ff;
        }

        /* Layout Adjustments */
        .search-input {
            border-radius: 6px;
            border: 1px solid #dbdbdb;
        }

        .export-btn {
            background-color: #ebebed;
            color: #5d5d5d;
            border: none;
            font-weight: 500;
        }
    </style>

    <div class="container-fluid p-4">
        <div class="row align-items-center justify-content-between mb-4">
            <div class="col-auto">
                <h6 class="d-flex align-items-center">
                    <a href="{{ route('payment', $branchHistory->history_id) }}" class="btn btn-white btn-icon me-3"
                        style="box-shadow: 0px 4px 10px rgba(0,0,0,0.08);">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M15 18l-6-6 6-6" />
                        </svg>
                    </a>View Payout

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

        <div class="card bg-white">
            <div class="row p-3 align-items-center">
                <div class="col-md-4 d-flex align-items-center">
                    <span class="me-2 text-muted">Show</span>
                    <select id="pageLength" class="form-select form-select-sm w-auto">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="-1">All</option>

                    </select>
                </div>

                <div class="col-md-8 d-flex justify-content-end align-items-center gap-3">
                    <input type="text" id="staffSearch" class="form-control search-input w-25" placeholder="Search Staff">

                    <input type="text" id="customSearch" class="form-control search-input w-25" placeholder="Search">
                    <button class="btn btn-label-secondary" id="printBtn">
                        <i class="bi bi-printer"></i>
                        <span class="d-none d-sm-inline">&nbsp; Print</span>
                    </button>
                    <button class="btn btn-label-secondary" id="excelExport">
                        <i class="ti tabler-upload"></i>
                        <span class="d-none d-sm-inline">&nbsp; Excel</span>
                    </button>
                    {{-- <div class="d-flex align-items-center border rounded px-2 py-1">
                        <span class="me-2 small text-muted">Select All</span>
                        <input type="checkbox" class="form-check-input mt-0">
                    </div> --}}
                </div>
            </div>

            <div class="table-responsive">
                <table class="table mb-0 w-100" id="usersTable" style="min-width:1400px;">
                    <thead>
                        <tr>
                            <th>Sno</th>
                            <th class="text-nowrap">ID</th>
                            <th>Name</th>
                            <th class="text-nowrap">branch</th>
                            <!-- <th>WDN</th> -->
                            <th>PD</th>
                            <th>Paid Leave days</th>
                            <th>paid Leave Amt</th>
                            <th>Advance</th>
                            <th>Total amount</th>
                            <th>payable amount</th>
                            <th>Bank Name</th>
                            <th>Account Holder Name</th>
                            <th>Account Number</th>
                            <th>IFSC</th>
                            <th>Bank Branch Name</th>
                            <th>Preview</th>
                            <th>Pay Slip</th>



                        </tr>

                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </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({
                ajax: {
                    url: "{{ route('view_payment_data', $branchHistory->id) }}",
                    type: "GET",
                    data: function (d) {
                        d.staff = $('#staffSearch').val();
                    }
                }, processing: true,
                serverSide: true,
                pageLength: 10,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                ordering: false,
                dom: 'rt<"d-flex justify-content-between p-3"ip>',
                language: {
                    paginate: {
                        previous: '<i class="ti tabler-chevron-left"></i>',
                        next: '<i class="ti tabler-chevron-right"></i>'
                    }
                },

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Payment Details Report',

                    filename: function () {
                        var now = new Date();

                        var date =
                            String(now.getDate()).padStart(2, '0') + '-' +
                            String(now.getMonth() + 1).padStart(2, '0') + '-' +
                            String(now.getFullYear()).slice(-2);

                        return 'Payment Details Report - ' + date;
                    },

                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
                        format: {
                            body: function (data, row, column, node) {
                                if (column === 13) {
                                    return "\u200C" + data;
                                }
                                return data;
                            }
                        }
                    },

                    className: 'd-none'
                }],

                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],

                columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'staff_id',
                    name: 'staff_id'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'branch',
                    name: 'branch'
                },

                {
                    data: 'present_days',
                    name: 'present_days'
                },
                {
                    data: 'paid_leave_days',
                    name: 'paid_leave_days'
                },
                {
                    data: 'paid_leave_amount',
                    name: 'paid_leave_amount'
                },
                {
                    data: 'advance',
                    name: 'advance'
                },
                {
                    data: 'salary',
                    name: 'salary'
                },
                {
                    data: 'payout',
                    name: 'payout'
                },
                {
                    data: 'bank_name',
                    name: 'bank_name'
                },
                {
                    data: 'account_holder_name',
                    name: 'account_holder_name'
                },
                {
                    data: 'account_number',
                    name: 'account_number'
                },
                {
                    data: 'IFSC',
                    name: 'IFSC'
                },
                {
                    data: 'bank_branch_name',
                    name: 'bank_branch_name'
                },
                {
                    data: 'preview',
                    name: 'preview',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'payslip',
                    name: 'payslip',
                    orderable: false,
                    searchable: false
                }
                ]
            });

            // Search

            $('#customSearch').on('keyup', function () {

                table.search(this.value).draw();
            });

            let staffTimer;
            $('#staffSearch').on('keyup', function () {
                clearTimeout(staffTimer);
                staffTimer = setTimeout(() => table.draw(), 400);
            });

            // Page Length

            $('#pageLength').on('change', function () {

                table.page.len(this.value).draw();
            });

            // $('#excelExport').click(function () {

            //     table.button('.buttons-excel').trigger();
            // });

            $('#excelExport').click(function () {

                table.page.len(-1).draw();

                table.one('draw', function () {
                    table.button('.buttons-excel').trigger();
                });

            });
            $('#printBtn').click(function () {

                const staff = $('#staffSearch').val();

                const params = new URLSearchParams();

                if (staff) {
                    params.append('staff', staff);
                }

                window.open(
                    "{{ route('view_payment_data_print', $branchHistory->id) }}?" + params.toString(),
                    '_blank'
                );
            });
        });
    </script>



@endsection