@extends('layouts.dashboard')

<style>
    .cursor-pointer {
        cursor: pointer;
    }

    .sunday-row {
        background-color: #e9b7bc !important;
        color: #721c24 !important;
    }

    .legend-box {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        background-color: #f4f6f9;
        margin-right: 8px;
    }
</style>

@section('content')

<!-- Header -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Attendance Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="container-fluid mb-3">
    <div class="card">
        <div class="card-body p-2">
            <form method="GET" id="filter-form">
                <div class="row justify-content-end align-items-start">
                    <!-- From Date -->
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label for="fromDate"><strong>From:</strong></label>
                            <div class="input-group">
                                <input type="text" id="fromDate" name="from_date" class="form-control" placeholder="From Date" autocomplete="off">
                                <div class="input-group-append">
                                    <span class="input-group-text cursor-pointer" id="fromDateIcon">
                                        <i class="fa fa-calendar-alt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- To Date -->
                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label for="toDate"><strong>To:</strong></label>
                            <div class="input-group">
                                <input type="text" id="toDate" name="to_date" class="form-control" placeholder="To Date" autocomplete="off">
                                <div class="input-group-append">
                                    <span class="input-group-text cursor-pointer" id="toDateIcon">
                                        <i class="fa fa-calendar-alt"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="col-md-3 d-flex justify-content-end align-items-end mt-4">
                        <div class="" role="group" style="height: 38px;">
                            <button type="submit" class="btn btn-primary">Filter</button>
                            <a href="{{ url()->current() }}" class="btn btn-secondary ml-2">Reset</a>
                            <a id="exportBtn" class="btn btn-warning text-white ml-2">
                                <i class="fa fa-download"></i> Export
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- Attendance Table -->
<div class="container-fluid">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="d-flex align-items-center">
                        <div class="p-2 sunday-row" style="width: 20px; height: 20px; border: 1px solid #ddd; margin-right: 10px;"></div>
                        <span class="font-weight-bold">Non-Working Day</span>
                    </div>
                </div>
            </div>
            <hr>
            <div class="table-responsive">
                <table id="attendance-table" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>In-Time Status</th>
                            <th>In-Time</th>
                            <th>In-Time Reason</th>
                            <th>In-Time Location</th>
                            <th>Out-Time Status</th>
                            <th>Out-Time</th>
                            <th>Out-Time Reason</th>
                            <th>Out-Time Location</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')


<script>
    function formatDate(date) {
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        return `${day}-${month}-${year}`;
    }

    $(document).ready(function() {
        // Datepicker init
        $("#fromDate, #toDate").datepicker({
            dateFormat: "dd-mm-yy"
        });

        $('#fromDateIcon').on('click', function() {
            $('#fromDate').datepicker('show');
        });
        $('#toDateIcon').on('click', function() {
            $('#toDate').datepicker('show');
        });

        //  Default dates (current month)
        const today = new Date();
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        $("#fromDate").val(formatDate(firstDay));
        $("#toDate").val(formatDate(lastDay));

        // Restrict date range
        $("#fromDate").on("change", function() {
            let from = $(this).datepicker("getDate");
            if (!from) return;
            let minDate = new Date(from);
            let maxDate = new Date(minDate);
            maxDate.setMonth(maxDate.getMonth() + 1);
            $("#toDate").datepicker("option", {
                minDate: minDate,
                maxDate: maxDate
            });
            $("#fromDate").val(formatDate(minDate));
            $("#toDate").val(formatDate(maxDate));
        });

        // DataTable init
        var table = $('#attendance-table').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 20,
            lengthChange: false,
            ajax: {
                url: "{{ route('employee.attendance') }}",
                data: function(d) {
                    d.from_date = $('#fromDate').val();
                    d.to_date = $('#toDate').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'timeliness',
                    name: 'timeliness',
                    render: function(data) {
                        if (data === 'On Time') {
                            return '<span class="badge badge-success">On Time</span>';
                        } else if (data === 'Late') {
                            return '<span class="badge badge-secondary">Late</span>';
                        } else {
                            return data || '';
                        }
                    }
                },
                {
                    data: 'verified_at',
                    name: 'verified_at'
                },
                {
                    data: 'late_reason',
                    name: 'late_reason'
                },
                {
                    data: 'location',
                    name: 'location'
                },
                {
                    data: 'out_timeliness',
                    name: 'out_timeliness',
                    render: function(data) {
                        if (data === 'On Time') {
                            return '<span class="badge badge-success">On Time</span>';
                        } else if (data === 'Late') {
                            return '<span class="badge badge-secondary">Late</span>';
                        } else {
                            return data || '';
                        }
                    }
                },
                {
                    data: 'out_time',
                    name: 'out_time'
                },
                {
                    data: 'out_reason',
                    name: 'out_reason'
                },
                {
                    data: 'out_location',
                    name: 'out_location'
                }
            ],
            order: [
                [1, 'asc']
            ],
            drawCallback: function(settings) {
                // ✅ Sunday highlight
                $('#attendance-table tbody tr').each(function() {
                    var dateText = $(this).find('td:eq(1)').text().trim();
                    var parts = dateText.split('-');
                    if (parts.length === 3) {
                        var day = parseInt(parts[0], 10);
                        var month = parseInt(parts[1], 10) - 1;
                        var year = parseInt(parts[2], 10);
                        var dateObj = new Date(year, month, day);
                        if (dateObj.getDay() === 0) {
                            $(this).addClass('sunday-row');
                        }
                    }
                });
            }
        });

        // ✅ Filter reload
        $('#filter-form').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
        });

        // ✅ Export button (dynamic href set karega)
        $('#exportBtn').on('click', function(e) {
            e.preventDefault();
            let fromDate = $('#fromDate').val();
            let toDate = $('#toDate').val();

            let url = "{{ route('employee.attendance.export') }}" +
                "?from_date=" + fromDate + "&to_date=" + toDate;
            window.location.href = url;
        });
    });
</script>
@endpush