@extends('layouts.appv2')

@section('content')
<style>
/* Base styling for the switch */
.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    margin-left: 10px; /* Adds spacing from other elements */
}

/* Hide the checkbox */
.switch input {
    display: none;
}

/* Slider background */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.3s;
}

/* The toggle circle */
.slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* When the switch is checked */
input:checked + .slider {
    background-color: #17a2b8; /* Matches the 'btn-info' button */
}

input:checked + .slider:before {
    transform: translateX(20px);
}





/* For screens smaller than 576px */
@media (max-width: 576px) {
    /* Adjust toggle layout */
    .d-flex {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    h5 {
        font-size: 12px; /* Smaller text for mobile */
        margin: 0; /* Remove extra spacing */
    }


    .switch {
        margin: 0 5px; /* Reduce switch margin */
    }

    /* Input group adjustments */
    .input-group {
        flex-wrap: wrap;
    }
    .input-group-text{
        display: none;
    }

    .input-group-prepend,
    .input-group-append {
        flex: 1 1 100%;
        margin-top: 5px;
    }

    input.form-control {
        flex: 1 1 100%;
        margin-bottom: 5px;
    }

    .btn {
        width: 100%; /* Buttons stack and span full width */
    }
}


</style>
                        <!-- <div class="col-sm-12"> -->
                            
                            <h1 class = "mb-4 gradient-text">Attendance</h1>
                          

                            <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">

                                <div class="card-header" >
                                    <div class="align-items-center">
                                        <form action="{{ route('admins.attendance') }}" method="GET">

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

                                                <div class="col-sm-6">
                                                    <button type="submit" id="exportButton" class="btn btn-sm btn-outline-info w-100" name="custommonth" value="1" formaction="{{ route('export.checkins') }}">
                                                        <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">
                                                    <div class="form-group">
                                                        <div class="form-line">
                                                            Start Date:
                                                            <input type="date" class="form-control" name="start_date" id="start_date" value="{{ request('start_date') }}" placeholder="Start Date">
                                                        </div>
                                                    </div>
                                                </div>

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

                                            <div class="col-sm-12 input-group pb-3">
                                                <div class="mr-3" style="background-color:#1c1e26; display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 5px;">
                                                    <h5 class="mb-0 ml-3 text-white" style="font-size:smaller;">All</h5>
                                                    <label class="switch mb-0">
                                                        <input type="checkbox" id="toggleSwitch" name="ot_only" value="1" 
                                                            {{ request('ot_only') == '1' ? 'checked' : '' }}>
                                                        <span class="slider"></span>
                                                    </label>
                                                    <h5 class="mb-0 mr-3 ml-2 text-white" style="font-size:smaller;">OT Only</h5>
                                                </div>

                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon1">
                                                        <i class="far fa-user"></i>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control autocomplete" id="filter_name" name="filter_name" placeholder="Type name" aria-label="Type name" aria-describedby="basic-addon1" autocomplete="off" value="{{ request('filter_name') }}">
                                                <div class="input-group-append">
                                                    <button class="btn btn-info" id="btn_filter" type="submit" title="Filter by name"><i class="fas fa-filter"></i>Filter</button>
                                                    <button class="btn btn-warning" id="btn_clear" type="button" id="button-addon3" title="Clear filter" onclick="clearFilters()"><i class="fas fa-times"></i>Clear</button>
                                                </div>
                                            </div>

                                            </div>

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

                                    


                                    <div class="card-body">
                                        @if ($message = Session::get('success'))
                                            <div class="alert alert-success" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($message = Session::get('error'))
                                            <div class="alert alert-danger" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($errors->any())
                                            <div class="alert alert-danger" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif

                                        <div class="table-responsive">
                                            <table id="subcategoryTable" class="table table-bordered table-hover">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th class="text-center">NO.</th>
                                                        <th>NAME</th>
                                                        <th>DEPARTMENT</th>
                                                        <th>IN/OUT</th>
                                                        <th>DATE</th>
                                                        <th>TIME</th>
                                                        <th>LOCATION</th>
                                                        <th>Lat, Long</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                @php $no = 0; @endphp
                                                @php $processedNames = []; @endphp

                                                @forelse($checkins_checkouts as $checkin)
                                                    <tr>
                                                        @if(!in_array($checkin->employee_first_name, $processedNames))
                                                            <td class="text-center">{{ ++$no }}</td>
                                                            <td>{{ $checkin->employee_first_name }}</td>
                                                            @php
                                                                $processedNames[] = $checkin->employee_first_name;
                                                            @endphp
                                                        @else
                                                            <td></td>
                                                            <td></td>
                                                        @endif
                                                        <td>{{ $checkin->department_code }}</td>
                                                        <td>{{ $checkin->checkin_type }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($checkin->checkin_datetime)->format('l, d M Y') }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($checkin->checkin_datetime)->format('g:i:s A') }}</td>
                                                        <td>{{ $checkin->checkin_other_reason }} [{{ $checkin->checkin_reason }}] : {{ $checkin->checkin_sublocality }} , {{ $checkin->checkin_locality }}</td>
                                                        <td>
                                                            <a href="https://www.google.com/maps?q={{$checkin->checkin_address}}" target="_blank">
                                                                {{ $checkin->checkin_lat }}, {{ $checkin->checkin_lng }}
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="8" class="text-center text-danger">No check-ins or check-outs recorded.</td>
                                                    </tr>
                                                @endforelse
                                                </tbody>
                                            </table>
                                        </div> 
                                    </div>
                                </div>  

                                <div class="card" style="border-radius: 20px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-header">
                                    <h5>Not checkin yet</h5>
                                    </div>
                                    <div class="card-body">
                                    <div class="table-responsive">
                                            <table id="subcategoryTable" class="table table-bordered">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th class="text-center">NO.</th>
                                                        <th>NAME</th>
                                                        <th>DEPARTMENT</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                @php $no = 0; @endphp
                                                    @foreach($notcheckin as $notcheckin)
                                                        <tr>
                                                            <td class="text-center">{{ ++$no }}</td>
                                                            <td>{{ $notcheckin->employee_first_name }}</td>
                                                            <td>{{ $notcheckin->department_code }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div> 
                                    </div>
                                </div>
                         

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap DatePicker JS -->
    <script src="https://cdn.jsdelivr.net/npm/bs5-datepicker@1.2.0/dist/js/bootstrap-datepicker.min.js"></script>

    <script>
        $(function () {
            $('#datetimepicker').datetimepicker({
                format: 'YYYY-MM-DD' // Customize the format as needed
            });
        });
    </script> 
    <script>
    function clearFilters() {
        document.getElementById('filter_name').value = '';
        document.querySelector('input[name="start_date"]').value = '';
        document.querySelector('input[name="end_date"]').value = '';
        document.querySelector('form').submit(); // Resubmit the form
    }
    </script>

    <script>
    document.getElementById('exportButton').addEventListener('click', function() {
        let nameFilter = document.getElementById('filter_name').value; 
        let dateFilterStart = document.getElementById('start_date').value;
        let dateFilterEnd = document.getElementById('end_date').value;

        let url = "{{ route('export.checkins') }}?name=" + encodeURIComponent(nameFilter) + "&date=" + encodeURIComponent(dateFilterStart) + "&date=" + encodeURIComponent(dateFilterEnd);

        // Redirect to the export URL
        window.location.href = url;
    });
    </script>

    <script>
    // When the export button is clicked, toggle the visibility of the filter fields
    document.getElementById('filterdrop').addEventListener('click', function() {
        var filterFields = document.getElementById('filterFields');
        if (filterFields.style.display === 'none') {
            filterFields.style.display = 'block'; // Show the filters
        } else {
            filterFields.style.display = 'none'; // Hide the filters
        }
    });
    </script>

    <script>
        document.getElementById("toggleSwitch").addEventListener("change", function() {
    if (this.checked) {
        console.log("Switch is ON");
    } else {
        console.log("Switch is OFF");
    }
});

    </script>
@endsection