@extends('layouts.app')

@section('form-title') {{ __('Settings agenda') }} @endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('settings') }}">{{ __('Settings') }}</a> </li>
<li class="breadcrumb-item">{{ __('Settings agenda') }} </li>
@endsection

@section('content')
<style>
    #show-map {
        height: 200px;
        /* The height is 400 pixels */
        width: 100%;
        /* The width is the width of the web page */
    }
    .table td, .table th {
        padding: 0.50rem !important;
    }
    .addon-style {
        background-color: #e9ecef !important;
        color: #000;
        border-color: rgba(0,0,0,0.15);
    }
    html {
        scroll-behavior: smooth;
    }
    .error{ color: red;}
</style>

@include('free-hours.edit-modal')

<div class="pcoded-inner-content">
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page body start -->
            <div class="page-body">
                <div class="row">
                    {{-- Start add free hours --}}
                    @if(canViewUpdate('add free hours / days'))
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __("Add Free hour") }}</h5>
                            </div>
                            <div class="card-block">
                                <form action="{{ route('free-hours.store') }}" method="POST">
                                    @csrf
                                    <div class="row mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('Colleague') }} *</label>
                                        <div class="col-sm-10">
                                            {!! freeHourUsers('free_hour_user', old('free_hour_user', $user->uuid)) !!}
                                            <span class="messages">
                                            @if($errors->has('free_hour_user'))
                                            <p class="text-danger error">{{ $errors->first('free_hour_user') }}</p>
                                            @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('Date') }} *</label>
                                        <div class="col-sm-10">
                                            <input type="date" class="form-control fill" name="free_hour_date" id="free_hour_date" value="{{ old('free_hour_date') }}">
                                            <span class="messages">
                                            @if($errors->has('free_hour_date'))
                                            <p class="text-danger error">{{ $errors->first('free_hour_date') }}</p>
                                            @endif
                                            </span>
                                        </div>
                                    </div>

                                    <div class="row  mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('Start time') }} *</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="start_time" id="start_time" value="{{ old('start_time') }}" class="form-control hour-without-seconds" data-mask="99:99" placeholder="hh:mm">
                                            <span class="messages">
                                            @if($errors->has('start_time'))
                                            <p class="text-danger error">{{ $errors->first('start_time') }}</p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row  mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('End time') }} *</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="end_time" id="end_time" value="{{ old('end_time') }}" class="form-control hour-without-seconds" data-mask="99:99" placeholder="hh:mm">
                                            <span class="messages">
                                            @if($errors->has('end_time'))
                                            <p class="text-danger error">{{ $errors->first('end_time') }}</p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row  mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('Time slots') }} *</label>
                                        <div class="col-sm-10">
                                            {!! driverTimeBlocks('time_blocks[]', old('time_blocks', [])) !!}
                                            <span class="messages">
                                            @if($errors->has('time_blocks'))
                                            <p class="text-danger error">{{ $errors->first('time_blocks') }}</p>
                                            @endif
                                        </div>
                                    </div>
                    
                                    <div class="row  mb-3">
                                        <label class="col-sm-2 fw-bold">{{ __('Reason') }} *</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="reason" id="reason" value="{{ old('reason', 'Free') }}" class="form-control">
                                            <span class="messages">
                                            @if($errors->has('reason'))
                                            <p class="text-danger error">{{ $errors->first('reason') }}</p>
                                            @endif
                                            </span>
                                        </div>
                                    </div>
                    
                                    @if(canViewUpdate('free-hours-edit'))
                                    <div class="row">
                                        <label class="col-sm-2">&nbsp;</label>
                                        <div class="col-sm-10">
                                            <button type="submit" class="btn btn-primary m-b-0">{{ __('Save') }}</button>
                                        </div>
                                    </div>
                                    @endif
                                </form>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Start listing free hours --}}
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ __("Free hours") }}</h5>
                            </div>
                            <div class="card-block">
                                <div class="row mb-2">
                                    <label class="col-sm-2 fw-bold">{{ __('Year') }}</label>
                                    <div class="col-sm-10">
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="year_filter" id="year_filter" value="{{ $year }}" readonly>
                                            <span class="input-group-text addon-style">
                                                <label class=""><i class="fa fa-sort-down"></i></label>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-4">
                                    <label class="col-sm-2 fw-bold">{{ __('Colleague') }}</label>
                                    <div class="col-sm-10">
                                        {!! freeHourUsers('free_hour_user_list', old('free_hour_user_list', $user->uuid)) !!}
                                    </div>
                                </div>
                                <div id="div-list-fhd">
                                    @include('free-hours.lists')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page body end -->
    </div>
</div>
@endsection

@push('child-scripts')
<script>
    $(document).ready(function(){
        $('#year_filter').datepicker({
            format: " yyyy", // Notice the Extra space at the beginning
            viewMode: "years", 
            minViewMode: "years",
            autoclose: true
        });

        $('#year_filter').on('change', function(){
            let year = $(this).val();
            let user = $('#free_hour_user_list').val();
            fetchFreeHours(1, year, user);
        });

        $('#free_hour_user_list').on('change', function(){
            let year = $('#year_filter').val();
            let user = $(this).val();
            $('#free_hour_user').val(user);
            fetchFreeHours(1, year, user);
        });

        $('#free_hour_user').on('change', function(){
            let user = $(this).val();
            $('#free_hour_user_list').val(user).trigger('change');
        });

        // delete free hour
        $(document).on('click', '.fhd', function(e){
            let fhd_id = $(this).data('fhd-id');
            swal({
                title: "Are you sure?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            },
            function(){
                deletFreeHour(fhd_id);
                swal.close();
            });
        });

        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            let year = $('#year_filter').val().trim();
            let user = $('#free_hour_user_list').val();
            fetchFreeHours(page, year, user);
        });

        // edit free hour
        $(document).on('click','.efhd', function(e) {
            let efhd_id = $(this).data('efhd-id');

            if(efhd_id !== ''){
                $.ajax({
                    type:'GET',
                    url: '/free-hours/'+efhd_id+'/edit',
                    success: function(data){
                        $('#div-free-hour-edit').html(data);
                        $('#free_hour_edit_modal').modal('show');
                        $(".hour-without-seconds").inputmask({ mask: "99:99"});
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
            }
        });
    });

    function fetchFreeHours(page, year, user){
        $.ajax({
            url: "{{ route('free-hours.create') }}",
            data: {page: page, year: year, user: user},
            success: function(data){
                $('#div-list-fhd').html(data);
            }
        });
    }

    function editHoliday(date){
        $('#free_hour_date').val(date).trigger('change');
        window.scrollTo(0, 0);
    }

    function  deletFreeHour(fhd_id){
        $.ajax({
            type:'POST',
            url: '/free-hours/'+fhd_id,
            data: {
                _method: 'DELETE'
            },
            success: function(){
                $('#trfh-'+fhd_id).fadeOut();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    }
</script>
@endpush