@extends('layouts.app')
@section('title', trans('title.absence_reports'))

@section('plugin-styles')
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@stop

@section('content')
<div class="content">
    <x-content.header title="{{__('title.absence_reports')}}" />
    <div class="tw-card">
        <div class="p-6">
            <form id="form" action="{{route('reports.leaves.filter')}}" method="POST">
                <div class="w-full flex flex-col gap-4">
                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                        <label for="range" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans('forms.lbl_date_range')}}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <input name="range" id="range" type="text" class="form-input w-full reportrange" placeholder="{{getDateFormat()}}-{{getDateFormat()}}">
                            <x-svg-icon icon="icon-calendar" width="16" height="16" class="search-icon" />
                        </div>
                    </div>

                    <hr/>

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                        <label for="employee" class="form-label text-sm-semibold w-full lg:w-1/2">{{__('forms.lbl_filter_by')}}</label>
                        <div class="w-full  lg:w-1/2">

                            <div class="flex justify-start items-start gap-2">
                                <div class="w-4 h-4">
                                    <input type="radio" name="filter" id="employee" value="employee" checked="">
                                </div>
                                <label for="employee" class="text-custom-grey-600 text-sm-medium">{{trans('forms.lbl_employee')}}</label>
                            </div>

                            <div class="flex justify-start items-start gap-2">
                                <div class="w-4 h-4">
                                    <input type="radio" name="filter" id="position" value="position">
                                </div>
                                <label for="position" class="text-custom-grey-600 text-sm-medium">{{trans('forms.lbl_position')}}</label>
                            </div>

                            <div class="flex justify-start items-start gap-2">
                                <div class="w-4 h-4">
                                    <input type="radio" name="filter" id="location" value="location">
                                </div>
                                <label for="location" class="text-custom-grey-600 text-sm-medium">{{trans('forms.lbl_location')}}</label>
                            </div>
                        </div>
                    </div>

                     <hr/>

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0 employee-elements">
                        <label for="employee-select" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans('forms.lbl_employee')}}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select
                                name="employee"
                                id="employee-select"
                                class="w-full form-input form-input-select pd-dropdown"
                                data-placeholder="Select Employee">
                                <option></option>
                                @foreach ($users as $key => $user)
                                    <option value="{{$user->id}}">{{$user->display_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0 hidden position-elements">
                        <label for="position-select" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans('forms.lbl_position')}}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select
                                id="position-select"
                                name="position"
                                class="w-full form-input form-input-select pd-dropdown"
                                disabled='true'
                                data-placeholder="Select Position"
                                required >
                                <option></option>
                                @foreach ($positions as $key => $postion)
                                    <option value="{{$postion->id}}">{{$postion->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0 hidden location-elements">
                        <label for="location-select" class="form-label text-sm-semibold w-full lg:w-1/2">{{trans('forms.lbl_select_location')}}</label>
                        <div class="w-full lg:w-1/2 relative">
                            <select
                                id="location-select"
                                name="location"
                                class="w-full form-input form-input-select pd-dropdown"
                                disabled='true'
                                data-placeholder="Select Location">
                                <option></option>
                                @foreach ($locations as $key => $location)
                                    <option value="{{$location->id}}">{{$location->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <hr/>

                   <div class="form_group w-full lg:w-[60%] flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-0">
                        <div class="form-label text-sm-semibold w-full lg:w-1/2 hidden lg:inline-block">&nbsp;</div>
                        <div class="w-full lg:w-1/2">
                            <button type="submit" class="btn-primary-base btn-save">
                                <i class="mdi mdi-magnify"></i> {{trans('forms.lbl_filter')}}
                            </button>
                        </div>
                    </div>
                </div>
            </form>

            <div class="mt-4" id="results">

            </div>
        </div>
    </div>
</div>
@stop

@section('footer-script')
    <script id="result-template" type="text/x-handlebars-template">
        <div class="w-full flex flex-col gap-4">
            <h3 class="!py-0">{{trans('forms.lbl_search_results')}}:</h3>
            <hr/>
            <ul id="results">
                @{{#if result}}
                    @{{{result}}}
                @{{else}}
                    <li>{{trans('forms.lbl_no_result_found')}}.</li>
                @{{/if}}
            </ul>
        </div>

    </script>
    <script type="text/javascript" src="{{asset('vendors/daterangepicker/js/daterangepicker.js')}}"></script>
    <script type="text/javascript">
        let options = ['employee', 'position', 'location'];
        //Get the Template from above
        let source = document.getElementById("result-template").textContent,
        template = Handlebars.compile(source);

        $("body").on("change", "input[name='filter']", function(){
            let _this = this;
            $.each(options, function(key, value){
                if($(_this).val() == value) {
                    $("."+value+"-elements").removeClass("hidden");
                    $("."+value+"-elements").find("select").prop("disabled", false);
                } else {
                    if(!$("."+value+"-elements").hasClass('hidden')){
                        $("."+value+"-elements").addClass("hidden");
                    }
                    $("."+value+"-elements").find("select").prop("disabled", true);
                }
            })
        })

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            $(document).trigger('onRangeChanged');
        }

        cb(moment().subtract(29, 'days'), moment());
        $('.reportrange').daterangepicker({
            showWeekNumbers: true,
            locale: {
                format: "{{getDateFormat()}}",
	            customRangeLabel: "{{trans('label.pick_date_range')}}",
                "firstDay": 1,
                "daysOfWeek": daysOfWeek,
                "monthNames": monthNames
            },
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),
            // ranges: rangeFilters
        }, cb);

        $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
            range = jQuery("#reportrange").val();
        });


        $(".btn-save").on("click", function(event) {
			event.preventDefault();

			data = $(this).parents("form").serialize();

			PDRequest({
				type    : "POST",
				url     : $(this).parents("form").prop("action"),
				data    : data,
				event   : event
			}).then((response) => {
                if(response.status == 'success'){
                    html = template({ result : response.data });
    				$("#results").html(html);
                }
            });
		});

    </script>
    <!-- End custom js for this page-->

@stop