@extends('layouts.appv2')

@section('content')

<h1 class="mb-4 gradient-text">Overtime Report</h1>

<!-- @if(session('error'))
    <div class="alert alert-danger">
        {{ session('export_error') }}
    </div>
@endif -->

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

<div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
    <div class="card-header">
        <form method="GET" action="{{ route('admins.overtimereport') }}">

            <div class="row">
                <div class="col-sm-6">
                    <button type="button" id="filterdrop"
                        class="btn btn-sm btn-outline-primary w-100">
                        <i class="fas fa-chevron-circle-down"></i> FILTER
                    </button>
                </div>

                <!-- <div class="col-sm-6">
                    <a href="{{ route('admins.overtimereport.excel', request()->query()) }}"
                        class="btn btn-sm btn-outline-info w-100">
                            <i class="fas fa-file-download"></i> EXPORT
                    </a>
                </div> -->

                <div class="col-sm-6">
                    <button type="button" id="exportBtn" 
                        class="btn btn-sm btn-outline-info w-100">
                            <i class="fas fa-file-download"></i> EXPORT
                    </button>
                </div>

            </div>

            <div id="filterFields" style="display:none;">
                <div class="row mt-3">
                    <div class="col-sm-6">
                        Start Date
                        <input type="date" class="form-control"
                               name="start_date"
                               value="{{ request('start_date') }}">
                    </div>

                    <div class="col-sm-6">
                        End Date
                        <input type="date" class="form-control"
                               name="end_date"
                               value="{{ request('end_date') }}">
                    </div>
                </div>

                <div class="input-group mt-3">
                    <input type="text"
                           class="form-control"
                           name="filter_name"
                           placeholder="Type name"
                           value="{{ request('filter_name') }}">

                    <div class="input-group-append">
                        <button class="btn btn-info">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <button class="btn btn-warning"
                                type="button"
                                onclick="clearFilters()">
                            <i class="fas fa-times"></i> Clear
                        </button>
                    </div>
                </div>
            </div>

        </form>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-dark">
                    <!-- <tr>
                        <th class="text-center">NO.</th>
                        <th>NAME</th>
                        <th>DEPARTMENT</th>
                        <th>DATE</th>
                        <th>OT START</th>
                        <th>OT END</th>
                        <th>TOTAL HOURS</th>
                    </tr> -->

                    <tr>
                        <th class="text-center">NO.</th>
                        <th>NAME</th>
                        <th>OT TYPE</th>
                        <th>DATE</th>
                        <th>OT START</th>
                        <th>OT END</th>
                        <th>TOTAL HOURS</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody>
                    @php $no = 0; @endphp

                    @forelse($overtimeData as $ot)
                        <tr>
                            <td class="text-center">{{ ++$no }}</td>
                            <td>{{ $ot['name'] }}</td>
                            <td>{{ $ot['overtime_for'] }}</td>
                            <td>{{ $ot['date'] }}</td>
                            <td>{{ $ot['start'] }}</td>
                            <td>{{ $ot['end'] }}</td>
                            <td>{{ $ot['hours_formatted'] }}</td>
                            <td>{{ $ot['status'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-danger">
                                No overtime record found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function clearFilters() {
    document.querySelector('input[name="filter_name"]').value = '';
    document.querySelector('input[name="start_date"]').value = '';
    document.querySelector('input[name="end_date"]').value = '';
    document.querySelector('form').submit();
}
document.getElementById('exportBtn').addEventListener('click', function () {
    const startDate = document.querySelector('input[name="start_date"]').value;
    const endDate = document.querySelector('input[name="end_date"]').value;
    if (!startDate || !endDate) {
        alert('Please select both Start Date and End Date before exporting.');
        document.getElementById('filterFields').style.display = 'block';
        return;
    }
    // validate date range
    if (new Date(startDate) > new Date(endDate)) {
        alert('Start Date cannot be later than End Date.');
        return;
    }
    const form = document.querySelector('form');
    const formData = new FormData(form);
    let params = new URLSearchParams();
    // add all form parameters to the URL
    for (let [key, value] of formData.entries()) {
        if (value) {
            params.append(key, value);
        }
    }
    // redirect to the export URL
    window.location.href = "{{ route('admins.overtimereport.excel') }}?" + params.toString();
});
document.getElementById('filterdrop').addEventListener('click', function () {
    const filterFields = document.getElementById('filterFields');
    filterFields.style.display =
        filterFields.style.display === 'none' ? 'block' : 'none';
});
</script>

@endsection