@extends('Admin.layout')

@section('content')
    <style>
        .action-btns {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .action-btns .btn {
            margin: 0 !important;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Move CSS to a push stack if your layout supports it, otherwise keep it here --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Attendance</h5>
        </div>
        <div class="col-auto d-flex gap-2">
            <button class="btn btn-label-secondary" id="printBtn">
                <i class="bi bi-printer"></i> Print
            </button>
            <button class="btn btn-label-secondary" id="exportBtn">
                <i class="bi bi-download"></i> Export
            </button>
            <a href="{{ route('add_attendance') }}"><button class="btn btn-primary">Add Attendance</button></a>
        </div>
    </div>
    <div class="card p-0 m-2">
        {{-- Filters --}}
        <div class="row m-2 mt-1 g-3">
            <div class="col-lg-3">
                <label class="form-label">From Date</label>
                <input type="text" id="fromDate" class="form-control" placeholder="DD/MM/YYYY">
            </div>
            <div class="col-lg-3">
                <label class="form-label">To Date</label>
                <input type="text" id="toDate" class="form-control" placeholder="DD/MM/YYYY">
            </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">
                <label class="form-label">Attendance Type</label>
                <select id="attendanceType" class="form-select">
                    <option value="">All</option>
                    <option value="present">Present</option>
                    <option value="absent">Absent</option>
                </select>
            </div>
            <div class="col-lg-3">
                <label class="form-label">Duty Type</label>
                <select id="dutyType" class="form-select">
                    <option value="">All</option>
                    <option value="full_day">Full Day</option>
                    <option value="half_day">Half Day</option>
                    <option value="one_half_day">One & Half Day</option>
                    <option value="double_duty">Double Duty</option>
                </select>
            </div>
            <div class="col-md-3 ms-auto">
                <input type="text" id="staffSearch" class="form-control" placeholder="Search Staff">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button class="btn btn-secondary" id="resetBtn">Reset</button>
            </div>
        </div>

        {{-- Table Controls --}}
        <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 p-3">
            <table class="table" id="usersTable">
                <thead>

                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>ID</th>
                        <th>name</th>
                        <th>branch</th>
                        <th>Checkin</th>
                        <th>Checkout</th>
                        <th>working Hours</th>
                        <th>Attendance Type</th>
                        <th>Assign</th>
                        <th>Salary</th>
                        <th>Duty Type</th>
                        <th>Action</th>


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

    {{-- <div class="modal fade" id="salaryModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <form id="salaryForm">

                    @csrf

                    <input type="hidden" id="attendance_id">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            Assign Duty Type
                        </h5>
                    </div>

                    <div class="modal-body">

                        <label>Duty Type</label>

                        <select class="form-select" id="duty_type">

                            <option value="">Select</option>

                            <option value="full_day">
                                Full Day
                            </option>

                            <option value="half_day">
                                Half Day
                            </option>
                            <option value="one_half_day">
                                One & Half Day
                            </option>

                            <option value="double_duty">
                                Double Duty
                            </option>

                        </select>

                        <div class="mt-3">

                            <label>Salary</label>

                            <input type="text" class="form-control" id="calculated_salary" readonly>

                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="submit" class="btn btn-primary">
                            Save
                        </button>

                    </div>

                </form>

            </div>
        </div>
    </div> --}}

    <div class="modal fade" id="salaryModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <form id="salaryForm">

                    @csrf

                    <input type="hidden" id="attendance_id">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            Assign Duty Type
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <label>Duty Type</label>

                        <select class="form-select" id="duty_type">

                            <option value="">Select</option>
                            <option value="full_day">Full Day</option>
                            <option value="half_day">Half Day</option>
                            <option value="one_half_day">One & Half Day</option>
                            <option value="double_duty">Double Duty</option>
                            <option value="hour_based">Hour Based</option>

                        </select>

                        <div class="mt-3 d-none" id="workingHoursRow">
                            <label>Working Hours</label>
                            <input type="text" class="form-control" id="working_hours_display" readonly>
                        </div>

                        <div class="mt-3">
                            <label>Salary</label>
                            <input type="text" class="form-control" id="calculated_salary" readonly>
                            <small class="text-danger d-none" id="hourBasedError">
                                Checkin & Checkout time required for hour-based duty.
                            </small>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            Save
                        </button>
                    </div>

                </form>

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

    <div class="modal fade" id="checkoutModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('store_checkout') }}" method="POST" id="addcheckoutForm">
                    @csrf
                    <input type="hidden" name="id" id="checkout_attendance_id">

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

                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Staff ID</label>
                            <input type="text" class="form-control" id="checkout_staff_id" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Staff Name</label>
                            <input type="text" class="form-control" id="checkout_staff_name" readonly>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Checkout Time <span class="text-danger">*</span></label>
                            <input type="time" name="attendance_checkout" id="checkout_time" class="form-control">
                        </div>

                        @if (session('error'))
                            <div class="text-danger small">{{ session('error') }}</div>
                        @endif
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="checkoutModalSubmit">Save Checkout</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Attendance Modal -->
    <div class="modal fade" id="deleteAttendanceModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-4">

                <h5 class="fw-bold mb-2">Are you sure?</h5>

                <p class="text-muted">
                    Do you want to delete this attendance record?
                </p>

                <input type="hidden" id="delete_attendance_id">

                <div class="d-flex justify-content-center gap-2 mt-3">

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

                    <button type="button" class="btn btn-danger" id="confirmDeleteAttendance">
                        Delete
                    </button>

                </div>

            </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>
        let table;

        $(document).ready(function () {

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                defaultDate: "today",
                allowInput: true
            });
            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true
            });
            table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('attendanceSummaryData') }}",
                    type: "GET",
                    data: function (d) {
                        d.fromDate = $('#fromDate').val();
                        d.toDate = $('#toDate').val();
                        d.branch = $('#branch').val();
                        d.staff = $('#staffSearch').val();
                        d.attendance_type = $('#attendanceType').val();
                        d.duty_type = $('#dutyType').val();
                    }
                },
                searching: true,
                paging: true,
                info: true,
                ordering: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                pageLength: 10,
                dom: 'lrtip',
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],
                columns: [{
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'attendance_date',
                    render: function (data) {
                        return data ?? '-';
                    }
                },
                {
                    data: 'staff_id'
                },
                {
                    data: 'name'
                },
                {
                    data: 'branch'
                },
                {
                    data: 'attendance_checkin',
                    render: function (data) {
                        return data ?? '-';
                    }
                },
                {
                    data: 'attendance_checkout',
                    render: function (data) {
                        return data ?? '-';
                    }
                },
                {
                    data: 'working_hours',
                    render: function (data) {
                        return data ?? '-';
                    }
                },
                {
                    data: 'attendance_type',
                    render: function (data) {

                        if (data === 'present') {
                            return '<span class="badge bg-success">Present</span>';
                        }

                        if (data === 'absent') {
                            return '<span class="badge bg-danger">Absent</span>';
                        }

                        return '-';
                    }
                },
                {
                    data: 'assign',
                    orderable: false,
                    searchable: false
                },


                {
                    data: 'calculated_salary',
                    render: function (data) {
                        return data ? '₹ ' + data : '-';
                    }
                },
                {
                    data: 'duty_type',
                    render: function (data) {
                        if (data === 'full_day') {
                            return `<span class="  badge bg-label-success change-status">Full Day</span>`;
                        }
                        if (data === 'half_day') {
                            return `<span class="  badge bg-label-warning change-status">Half Day</span>`;
                        }
                        if (data === 'one_half_day') {
                            return `<span class="badge bg-label-info">One & Half Day</span>`;
                        }
                        if (data === 'double_duty') {
                            return `<span class="badge bg-label-primary change-status">Double Duty</span>`;
                        }
                        if (data === 'hour_based') {
                            return `<span class="badge bg-label-dark"> Hour Based</span>`;
                        }
                        return `<span class="badge bg-label-secondary">Not Assigned</span>`;
                    }
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                },
                ]
            });

            // Search
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            // Page length
            $('#pageLength').on('change', function () {
                table.page.len(this.value).draw();
            });

            $('#fromDate, #toDate, #branch, #attendanceType, #dutyType').on('change', function () {
                table.ajax.reload(null, true);
            });

            let staffTimer;
            $('#staffSearch').on('keyup', function () {
                clearTimeout(staffTimer);
                staffTimer = setTimeout(() => table.ajax.reload(null, true), 400);
            });
            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                // $('#toDate')[0]._flatpickr.clear();
                $('#branch').val('');
                $('#staffSearch').val('');
                $('#attendanceType').val('');
                $('#dutyType').val('');
                $('#customSearch').val('');
                table.search('').ajax.reload(null, true);
            });

            function getFilterParams() {
                return new URLSearchParams({
                    fromDate: $('#fromDate').val(),
                    toDate: $('#toDate').val(),
                    branch: $('#branch').val(),
                    staff: $('#staffSearch').val(),
                    attendance_type: $('#attendanceType').val(),
                    duty_type: $('#dutyType').val()
                });
            }

            $('#exportBtn').click(function () {
                window.location.href = "{{ route('attendance_export') }}?" + getFilterParams().toString();
            });

            $('#printBtn').click(function () {
                window.open("{{ route('attendance_print') }}?" + getFilterParams().toString(), '_blank');
            });

        });
    </script>
    <script>
        // Open Delete Modal
        $(document).on('click', '.deleteAttendanceBtn', function () {

            let id = $(this).data('id');

            $('#delete_attendance_id').val(id);
        });
        $('#confirmDeleteAttendance').on('click', function () {

            let btn = $(this);

            btn.prop('disabled', true)
                .html('Processing...');

            $.ajax({
                url: "{{ route('attendanceDelete') }}",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: $('#delete_attendance_id').val()
                },
                success: function (response) {

                    $('#deleteAttendanceModal').modal('hide');

                    table.ajax.reload(null, false);

                    showToast(response.message, 'bg-success');

                    btn.prop('disabled', false)
                        .html('Delete');
                },
                error: function () {

                    showToast('Delete failed', 'bg-danger');

                    btn.prop('disabled', false)
                        .html('Delete');
                }
            });

        });
    </script>



    <script>
        let baseSalary = 0;
        let checkinTime = '';
        let checkoutTime = '';

        // const HOURS_IN_DAY = 24; // fixed — a day always has 24 hours, matches backend
        const STANDARD_WORKING_HOURS = 10;

        $(document).on('click', '.salaryBtn', function () {

            $('#attendance_id').val($(this).data('id'));

            baseSalary = parseFloat($(this).data('salary')) || 0;
            checkinTime = $(this).data('checkin') || '';
            checkoutTime = $(this).data('checkout') || '';

            let dutyType = $(this).data('duty') || '';
            $('#duty_type').val(dutyType);

            calculateSalary(dutyType);
        });

        function getWorkedHoursDecimal() {
            if (!checkinTime || !checkoutTime) return null;

            function toMinutes(t) {
                const parts = t.split(':').map(Number);
                return parts[0] * 60 + parts[1];
            }

            let start = toMinutes(checkinTime);
            let end = toMinutes(checkoutTime);

            if (end < start) end += 24 * 60; // overnight shift

            const totalMinutes = end - start;
            return totalMinutes / 60; // decimal hours
        }

        function formatHoursMinutes(decimalHours) {
            const totalMinutes = Math.round(decimalHours * 60);
            const h = Math.floor(totalMinutes / 60);
            const m = totalMinutes % 60;
            return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
        }

        function calculateSalary(dutyType) {

            $('#hourBasedError').addClass('d-none');
            $('#workingHoursRow').addClass('d-none');

            if (dutyType === 'full_day') {
                $('#calculated_salary').val(baseSalary.toFixed(2));

            } else if (dutyType === 'half_day') {
                $('#calculated_salary').val((baseSalary / 2).toFixed(2));

            } else if (dutyType === 'one_half_day') {
                $('#calculated_salary').val((baseSalary * 1.5).toFixed(2));

            } else if (dutyType === 'double_duty') {
                $('#calculated_salary').val((baseSalary * 2).toFixed(2));

            } else if (dutyType === 'hour_based') {

                const hours = getWorkedHoursDecimal();

                if (hours === null) {
                    $('#calculated_salary').val('');
                    $('#hourBasedError').removeClass('d-none');
                    $('#workingHoursRow').addClass('d-none');
                    return;
                }

                // Show working hours in the modal
                $('#working_hours_display').val(formatHoursMinutes(hours) + ' hrs');
                $('#workingHoursRow').removeClass('d-none');

                // const hourlyRate = baseSalary / HOURS_IN_DAY;
                const hourlyRate = baseSalary / STANDARD_WORKING_HOURS;
                const salary = hourlyRate * hours;

                // $('#calculated_salary').val(salary.toFixed(2));
                $('#calculated_salary').val(Math.round(salary));

            } else {
                $('#calculated_salary').val('');
            }
        }

        $('#duty_type').on('change', function () {
            calculateSalary($(this).val());
        });

        // SAVE DUTY TYPE
        $('#salaryForm').on('submit', function (e) {
            e.preventDefault();

            if ($('#duty_type').val() === 'hour_based' && getWorkedHoursDecimal() === null) {
                $('#hourBasedError').removeClass('d-none');
                return;
            }

            let btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true).text('Saving...');

            $.ajax({
                url: "{{ route('update_duty') }}",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: $('#attendance_id').val(),
                    duty_type: $('#duty_type').val()
                },
                success: function (response) {
                    btn.prop('disabled', false).text('Save');
                    $('#salaryModal').modal('hide');
                    table.ajax.reload(null, false);
                    showToast(
                        response.message || 'Duty updated successfully',
                        'bg-success'
                    );
                },
                error: function (xhr) {
                    btn.prop('disabled', false).text('Save');
                    showToast(
                        xhr.responseJSON?.message || 'Something went wrong',
                        'bg-danger'
                    );
                }
            });
        });
    </script>


    {{--
    <script>
        let baseSalary = 0;

        $(document).on('click', '.salaryBtn', function () {

            $('#attendance_id').val($(this).data('id'));

            baseSalary = parseFloat($(this).data('salary')) || 0;

            let dutyType = $(this).data('duty') || '';

            $('#duty_type').val(dutyType);

            calculateSalary(dutyType);
        });


        // ✅ reusable function
        function calculateSalary(dutyType) {

            if (dutyType === 'full_day') {
                $('#calculated_salary').val(baseSalary.toFixed(2));
            } else if (dutyType === 'half_day') {
                $('#calculated_salary').val((baseSalary / 2).toFixed(2));
            } else if (dutyType === 'one_half_day') {
                $('#calculated_salary').val((baseSalary * 1.5).toFixed(2));
            } else if (dutyType === 'double_duty') {
                $('#calculated_salary').val((baseSalary * 2).toFixed(2));
            } else {
                $('#calculated_salary').val('');
            }
        }


        // ✅ when user changes dropdown manually
        $('#duty_type').on('change', function () {
            calculateSalary($(this).val());
        });
    </script>
    <script>
        $('#duty_type').on('change', function () {

            let type = $(this).val();
            let salary = 0;

            if (type === 'full_day') {
                salary = baseSalary;
            } else if (type === 'half_day') {
                salary = baseSalary / 2;
            } else if (type === 'one_half_day') {
                salary = baseSalary * 1.5;
            } else if (type === 'double_duty') {
                salary = baseSalary * 2;
            }

            $('#calculated_salary').val(salary.toFixed(2));
        });
    </script>

    <script>
        // SAVE DUTY TYPE
        $('#salaryForm').on('submit', function (e) {
            e.preventDefault();
            let btn = $(this).find('button[type="submit"]');
            btn.prop('disabled', true).text('Saving...');
            $.ajax({
                url: "{{ route('update_duty') }}",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: $('#attendance_id').val(),
                    duty_type: $('#duty_type').val()
                },
                success: function (response) {
                    btn.prop('disabled', false).text('Save');
                    $('#salaryModal').modal('hide');
                    table.ajax.reload(null, false);
                    showToast(
                        response.message || 'Duty updated successfully',
                        'bg-success'
                    );
                },
                error: function (xhr) {
                    btn.prop('disabled', false).text('Save');
                    showToast(
                        xhr.responseJSON?.message || 'Something went wrong',
                        'bg-danger'
                    );
                }
            });
        });
    </script> --}}
    {{--
    <script>
        document.getElementById('checkoutModalSubmit').addEventListener('click', function (e) {
            e.preventDefault();

            let btn = this;
            let form = document.getElementById('addcheckoutForm'); //form

            btn.disabled = true;
            btn.innerText = 'Processing...';

            setTimeout(() => {
                form.submit();
            }, 300);
        });
    </script> --}}
    <script>
        $(document).on('click', '.checkoutBtn', function () {



            $('#checkout_attendance_id').val($(this).data('id'));
            $('#checkout_staff_id').val($(this).data('staffid'));
            $('#checkout_staff_name').val($(this).data('name'));

            let existingCheckout = $(this).data('checkout');
            $('#checkout_time').val(existingCheckout ? existingCheckout : '');

            // Default to current time, still editable
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, '0');
            const mm = String(now.getMinutes()).padStart(2, '0');
            $('#checkout_time').val(`${hh}:${mm}`);

            $('#checkoutModal').modal('show');
        });
    </script>

    <script>
        $('#addcheckoutForm').submit(function (e) {

            e.preventDefault();

            let btn = $('#checkoutModalSubmit');

            btn.prop('disabled', true).text('Processing...');

            $.ajax({

                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),

                success: function (response) {

                    btn.prop('disabled', false).text('Save Checkout');

                    $('#checkoutModal').modal('hide');

                    table.ajax.reload(null, false);

                    showToast(response.message, 'bg-success');

                },

                error: function (xhr) {

                    btn.prop('disabled', false).text('Save Checkout');

                    let message = 'Something went wrong';

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }

                    showToast(message, 'bg-danger');

                }

            });

        });
    </script>
@endsection