@extends('layouts.vertical.master-empty')

@section('page-title', "Daily attendance Report")
<style>
    @media screen {
        /*.app-sidebar {*/
        /*    width: 450px !important;*/
        /*}*/
        .map {
            height: 200px !important;
        }
    }
</style>
@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5">
            <div class="card-header">
                <!--begin::Header-->
                <div class="px-7 py-5">
                    <div class="fs-5 text-dark fw-bold">Filter Options</div>
                </div>
                <!--end::Header-->
            </div>
            <div class="card-body  js-datatable-filter-form">
                <!--begin::Form-->
                <div class="px-7 py-5 row d-flex flex-row">
                    <!--begin::Input group-->
                    <div class="col-md-4 mb-10">
                        <!--begin::Label-->
                        <label class="form-label fw-semibold" for="gov_id">Governorate:</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <div>
                            <select name="gov_id" class="form-select form-control-solid select2" id="gov_id" required>
                                <option value="">@lang("Select Governorate")</option>
                                @foreach($governorates as $gov)
                                    <option value="{{$gov->id}}" @if($gov->id == request()->gov_id) selected @endif>{{$gov->defaultLang->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--end::Input-->
                    </div>
                    <!--end::Input group-->
                    <!--begin::Input group-->
                    <div class="col-md-4 mb-10" id="kt_menu_64b77b0e7d45b">
                        <!--begin::Label-->
                        <label class="form-label fw-semibold" for="employee">Employee:</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <div>
{{--                            <select class="form-select form-select-solid" name="employee" id="employee" multiple="multiple" >--}}
                            <select name="employee" class="form-select form-control-solid" id="employee" multiple="multiple" data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_64b77b0e7d45b" data-allow-clear="true">
{{--                            <select class="form-select form-select-solid" name="employee" multiple="multiple" data-kt-select2="true" data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_64b77b0e7d45b" data-allow-clear="true">--}}
                                <option></option>
                                @foreach($employees as $employee)
                                    <option value="{{$employee->id}}">{{\App\Models\User::getDecryptedData($employee->full_name)}}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--end::Input-->
                    </div>
                    <!--end::Input group-->
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-6">
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label fw-semibold">Date:</label>
                                    <!--end::Label-->
                                    <!--begin::Options-->
                                    <div class="position-relative d-flex align-items-center">
                                        <!--begin::Icon-->
                                    {{--                                                    <i class="ki-outline ki-calendar-8 fs-2 position-absolute mx-4"></i>--}}
                                    <!--end::Icon-->
                                        <!--begin::Datepicker-->
                                        <input class="form-control form-control-solid flatpickr-input active" placeholder="Select a date" name="start_date" id="start_date" type="text" readonly="readonly" value="{{date('Y-m-d')}}">
                                        <!--end::Datepicker-->
                                    </div>
                                    <!--end::Options-->
                                </div>
                                <!--end::Input group-->
                            </div>
                            <div class="col-md-6">
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="form-label fw-semibold">&nbsp;</label>
                                    <!--end::Label-->
                                    <!--begin::Options-->
                                    <div class="position-relative d-flex align-items-center">
                                        <a class="btn btn-lg btn-primary" id="export-report" href="{{route('users.export-daily-report')}}">Export</a>
                                    </div>
                                    <!--end::Options-->
                                </div>
                                <!--end::Input group-->

                            </div>
                        </div>

                        {{--                                        <div class="col-md-6">--}}
                        {{--                                            <!--begin::Input group-->--}}
                        {{--                                            <div class="mb-10">--}}
                        {{--                                                <!--begin::Label-->--}}
                        {{--                                                <label class="form-label fw-semibold">To Date:</label>--}}
                        {{--                                                <!--end::Label-->--}}
                        {{--                                                <!--begin::Options-->--}}
                        {{--                                                <div class="position-relative d-flex align-items-center">--}}
                        {{--                                                    <!--begin::Icon-->--}}
                        {{--                                                    <i class="ki-outline ki-calendar-8 fs-2 position-absolute mx-4"></i>--}}
                        {{--                                                    <!--end::Icon-->--}}
                        {{--                                                    <!--begin::Datepicker-->--}}
                        {{--                                                    <input class="form-control form-control-solid flatpickr-input active" placeholder="Select a date" name="end_date" type="text" readonly="readonly">--}}
                        {{--                                                    <!--end::Datepicker-->--}}
                        {{--                                                </div>--}}
                        {{--                                                <!--end::Options-->--}}
                        {{--                                            </div>--}}
                        {{--                                            <!--end::Input group-->--}}
                        {{--                                        </div>--}}
                    </div>
                </div>
                <!--end::Form-->
            </div>
        </div>
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header">
                <!--begin::Card title-->
                <div class="card-title fs-3 fw-bold">@lang("Daily attendance Report")</div>
                <!--end::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Row-->
                <div class="row mb-8">
                    {{ $dataTable->table() }}
                </div>
                <!--end::Row-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    @include('components.datatable.buttons-script')

    <script>
        let startMap;
        let startMarker;
        let endMap;
        let endMarker;
        $(".flatpickr-input").flatpickr({
            enableTime: false,
            dateFormat: "Y-m-d",
        });
        $(document).ready(function () {
            $('.js-datatable-filter-form :input').on('change', function (e) {
                window.LaravelDataTables["user-session-table"].draw();
            });
            $('.js-datatable-filter-form :input').on('keyup', function (e) {
                window.LaravelDataTables["user-session-table"].draw();
            });

                $('#user-session-table').on('preXhr.dt', function ( e, settings, data ) {
                    $('.js-datatable-filter-form :input').each(function () {
                        data[$(this).prop('name')] = $(this).val();
                    });
                });
        });
        $(document).on('click', '#export-report', function(e) {
            e.preventDefault();
            let gov = $("#gov_id").val();
            let employee = $("#employee").val();
            let date = $("#start_date").val();
            location.href = $(this).attr('href') + '?gov_id=' + gov + '&employee=' + employee + '&start_date=' + date;
        })
        $(document).on('click', '.view-on-map', function(e) {
            let start_location = $(this).data('start-location');
            let end_location = $(this).data('end-location');
            if(start_location !== ""){
                const start_location_array = start_location.split(",");
                const startLatLng = { lat: start_location_array[0], lng: start_location_array[1] };
                if (startMarker !== null && startMarker !== undefined) {
                    startMap.removeLayer(startMarker);
                }
                startMarker = L.marker(startLatLng).addTo(startMap);
                startMap.setView(startLatLng, 17);
            }else{
                if (startMarker !== null && startMarker !== undefined) {
                    startMap.removeLayer(startMarker);
                }
            }
            if(end_location !== ""){
                const end_location_array = end_location.split(",");
                const endLatLng = { lat: end_location_array[0], lng: end_location_array[1] };
                if (endMarker !== null && endMarker !== undefined) {
                    endMap.removeLayer(endMarker);
                }
                endMarker = L.marker(endLatLng).addTo(endMap);
                endMap.setView(endLatLng, 17);
            }else{
                if (endMarker !== null && endMarker !== undefined) {
                    endMap.removeLayer(endMarker);
                }
            }
        });
    </script>
    <script type="text/javascript">
        function initLeafletMap() {
            startMap = new L.Map('map');
            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(startMap);
            startMap.setView({lat: 0, lng: 0}, 18);

            endMap = new L.Map('map2');
            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(endMap);
            endMap.setView({lat: 0, lng: 0}, 18);
        }
        $(document).ready(function(){
            initLeafletMap();
        });
    </script>
@endpush
