@extends('layouts.master')

@section('title', 'Reserve Service')
@section('subtitle', 'Reserve')
@section('titleicon', "icon-file-text")


@section('pagecss')
<link rel="stylesheet" type="text/css" href="{{URL::asset('/css/style.css')}}" />
<link rel="stylesheet" type="text/css" href="{{URL::asset('/css/theme.css')}}" />
<link rel="stylesheet" type="text/css" href="{{URL::asset('/css/google-fonts.css')}}" />
<style>
  html,* { font-family: 'Inter'; }
  body { background-color: #fafafa; line-height:1.6;}
 .lead { font-size: 1.5rem; font-weight: 300; }
</style>
@endsection

@section('content')
    @if(!isset($facultyService))
        @php($facultyService = null)
    @endif
    <!-- BEGIN .main-content --> 
    <div class="main-content">
        @if(!empty($errors->all()))
            <div class="alert alert-danger text-white bg-danger">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div id="message_parent"><div id="message"></div></div>
        <!--TABLE-->
            <form action="{{route('save_reservation')}}" method="post" id="reservation_form" enctype='multipart/form-data'>
                {{ csrf_field() }}
                 <meta name="csrf-token" content="{!! csrf_token() !!}" />
                 <div class="row gutters">
                 <div class="col-md-4 d-flex">
                 <div class="card flex-fill">
                    <div class="card-header">
                        <span>Information</span>
                    </div>
                    <div class="card-body">
                        <div>
                            <input type="hidden" class="form-control" id="id" name="id" title="id" placeholder="id">
                        </div>
                        <div>
                            <input type="hidden" class="form-control" id="date" name="date" title="date" >
                        </div>
                        <div>
                            <input type="hidden" class="form-control" id="num_slots" name="num_slots" >
                        </div>
                        <div>
                            <input type="hidden" class="form-control" id="date_calender" name="date_calender" >
                        </div>
                        <div class="form-group">
                            <label>Select Service<span class="required" style="color:red;">*</span></label>
                            {!! Form::select('faculty_service', array(""=>__("tr.Select Service"))+'App\FacultyServices'::serviceTypeList() , $facultyService, array('id'=> 'faculty_service', 'class'=>'selectize', 'required'=>'required', 'title'=> __('tr.Faculty Service'))); !!}
                        </div>

                        <div id="select_type"  class="form-group">
                            <div id="addSelect">
                            
                            </div>
                        </div>

                        <div class="form-group" id="duration_dropdwon" style='display:none;'>
                                <label>@lang("tr.Select Duration")<span class="required" style="color:red;">*</span></label>
                                {!! Form::select('hall_duration', array(""=>__("tr.Select Duration"))+'App\FacultyServiceReservation'::durationList() , $facultyService, array('id'=> 'hall_duration', 'class'=>'selectize', 'required'=>'required', 'title'=> __('tr.Select Hall Duration'))); !!}
                        </div>
                        <div class="form-group" id='hall_loaction' style='display:none;'>
                            <label>Select Location</label><span class="required" style="color:red;">*</span>
                            {!! Form::select('hall_location_id', array(""=>__("tr.Select Location"))+$locations , null, array('id'=> 'hall_location_id', 'class'=>'selectize', 'required'=>'required', 'title'=> __('tr.Select Hall Location'))); !!}
                        </div>
                        <div class="form-group" id='hall_notes_id' style='display:none;'>
                            <label>Reservation Reason</label>
                            <input type="text" class="form-control" id="reservation_reason" name="reservation_reason" title="Reservation Reason" placeholder="Reservation Reason">
                        </div>
                    </div>
                    </div>
                    </div>
                    <div class="col-md-4 d-flex">
                    <div class="card flex-fill" >
                        <div class="card-header">
                            <span>Date</span>
                        </div>
                        <div class="card-body" id="calender_id" style='display:none;'>
                            <div class="calendar-wrapper"></div>
                        </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex">
                    <div class="card flex-fill">
                        <div class="card-header">
                            <span>Schedule Start Time</span>
                        </div>
                        <div class="card-body" id='time_slots' style='display:none;'>
                            <div id="slots"><div id="times"></div></div>
                        </div>
                    </div>    
                    </div>
                    </div>
                    <div class="form-group">
                        <a class='btn btn-primary' id='action'>@lang('tr.Submit') </a>
                        <a href="{{route('faculty_services')}}" class='btn btn-light' id='cancel'>@lang('tr.Cancel')</a>
                    </div>
                    
                </form>
            </div>
      
    <!-- END: .main-content -->
@endsection

@section('pagejs')

<script type="text/javascript" src="{{URL::asset('/int/js/calendar.js')}}"></script>
<!-- <script type="text/javascript">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
</script> -->
<script type="text/javascript">
    
    function selectDate(date) {

        $('.calendar-wrapper').updateCalendarOptions({
            date: date
        });
        $('#date').val(date);
        
        if ($('#faculty_service').val() == {{\App\FacultyServices::SERVICE_TYPE_PLAYING_FIELDS}} && $('#service_types').val() && $('#hall_duration').val() && $('#hall_location_id').val())
            updateSlots();
        else
            validateForm();
    }

    function getMonth($month) { 
        if($month == 'Jan') return 1;
        else if($month == 'Feb') return 2;
        else if($month == 'Mar') return 3;
        else if($month == 'Apr') return 4;
        else if($month == 'May') return 5;
        else if($month == 'Jun') return 6;
        else if($month == 'Jul') return 7;
        else if($month == 'Aug') return 8;
        else if($month == 'Sep') return 9;
        else if($month == 'Oct') return 10;
        else if($month == 'Nov') return 11;
        else if($month == 'Dec') return 12;
        else return $month;
    }

    function convertStringToDate(date) {
        
        month = getMonth(date[1]);
        day = date[2];
        year = date[3];

        return year+'-'+month+'-'+day;
    }

    function serviceTypes(status) {
        var html = "";
        $.ajax({
            type: "post",
            data: {'status':status},
            url: '{{route('filter_service')}}',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(json) {
                var $el = $("#addSelect");
                $el.remove();
                $el.append($("<option></option>")
                        .attr("value", '').text('Please Select'));
                html += '<div id="addSelect">';
                html += "<label>Select Type</label><span style='color:red;'>*</span>";
                html += "<select id='service_types' name='service_types' class='selectize'>";
                $.each(json, function(value, key) {
                    html +="<option class='options' value='"+value+"'>"+key+"</option>";
                });      
                html += "</select>" ;
                html += "</div>" ;
                $('#select_type').html(html);
                $('#service_types').initializeSelectize();
            }
        });
    }

    function validateForm() {
        $('#message').remove();
        var message = `
            <div id="message">
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <i class="icon-warning2"></i><strong>Oh!</strong> Please select required inputs marked with (<b style='color:red;'>*</b>).
                </div>
            </div>
        `;
        $('#message_parent').append(message);
    }

    function resetDropDownSelectizeValue(id, selectedValue) {
        $(id).val('');
        var $select = $(id).selectize();
        var selectize = $select[0].selectize;
        selectize.setValue(selectize.search(selectedValue));
    }

    const duration = [];
    @foreach('App\FacultyServiceReservation'::durationList() as $slot)
        duration.push("@lang($slot)");
    @endforeach
    
    function updateSlots() {
        $('.today-button').hide();
        
        var today = new Date();
        var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate()+1);
        
        if($('#date').val()==""){
           
            document.getElementById("date").value = tomorrow.toString();
        }
        var selectedDate = $('#date').val().split(" ");
        
        var oldDate= false;

        //Tomorrow
        var currentDay = tomorrow.getDate();
        var currentMonth = tomorrow.getMonth() + 1;
        var currentYear = tomorrow.getFullYear();
        //selected Date
        var selectedDay = selectedDate[2];
        var selectedMonth = getMonth(selectedDate[1]);
        var selectedYear = selectedDate[3];
        
        if(currentYear > selectedYear){
            oldDate = true;
        }else{
            if(currentMonth > selectedMonth && currentYear == selectedYear){
                oldDate = true;
            }else{
                if(currentDay > selectedDay && currentMonth == selectedMonth && currentYear == selectedYear){
                    oldDate = true;
                }
            }
        }

        date = convertStringToDate(selectedDate);
        $('#date_calender').val(date);
      
        if(oldDate) {
            var html = '';
            html +="<div id='times'>";
            html += '<div class="alert custom alert-warning"><i class="icon-flash"></i>There is no availability on this date. Please choose another one.!</div>';
            html +="</div>";
            $('#slots').html(html)
        } else {
            $('#time_slots').show();
            
            $.ajax({
                type: "post",
                data: {
                    'date':date,
                    'faculty_service':$('#faculty_service').val(),
                    'service_types':$('#service_types').val(),
                    'hall_duration':$('#hall_duration').val(),
                    'hall_location_id':$('#hall_location_id').val(),
                },
                url: '{{route('get_available_time')}}',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(json) {
                    if(json[0]){
                        var $el = $("#times");
                        $el.remove();
                        var html = '';
                        html +="<div id='times'>";
                            
                        $.each(json[0], function(key, value) { 
                            var time =value.split(':');
                            var hours = parseInt(time[0]);
                            var minutes = time[1];
                            var fullTime= hours == 12?((hours)+":"+minutes+' PM') : (hours > 12 ? ((hours-12)+":"+minutes+' PM'):((hours)+":"+minutes+' AM'));
                            html += '<label class="btn btn-outline-primary btn-rounded m-2 col-4"> <input type="radio" required class="time_slot" name="slot" id="'+key+'" autocomplete="off" value="'+key+'">&nbsp;'+fullTime+'</label>';
                            
                        });
                        html +="</div>";
                        $('#slots').html(html);
                        var $el = $("#calculated_time");
                        $el.remove();
                        var numberOfSlots = parseInt(json[1]);
                        var time = "";
                        var result;
                        $('#num_slots').val(numberOfSlots);
                        time = duration[numberOfSlots-1]
                       
                        var html = '';
                        html += "<div class='d-inline-block float-right' id='calculated_time'>";
                        html += "<span class='badge badge-bdr-pill badge-primary'>Elapsed Time: "+time+"</span>";
                        html += "</div>";
                        $('#show_result').html(html);
                    }
                    else{
                        var html = '';
                        html +="<div id='times'>";
                        html += '<div class="alert custom alert-warning"><i class="icon-flash"></i>There is no availability on this date. Please choose another one.!</div>';
                        html +="</div>";
                        $('#slots').html(html);
                    }

                }
            });
        }
    }

    $('#action').on("click", function() {
        var selected = $("input[type='radio'][name='slot']:checked");

        if(($('#faculty_service').val() == {{\App\FacultyServices::SERVICE_TYPE_PLAYING_FIELDS}} && $('#service_types').val() && $('#hall_duration').val() && $('#hall_location_id') && $('.time_slot').val() && selected.length > 0)) {
            $('#reservation_form').submit();
        } else {
            validateForm();
            errorBox('Missing Feilds! Please Fill All Required Fields.');
        }
    });
    var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate()+1);
    var defaultConfig = {
        weekDayLength: 1,
        date: tomorrow,
        onClickDate: selectDate,
        showYearDropdown: true,
    };
    $('.today-button').trigger('click');
    
    $('.calendar-wrapper').calendar(defaultConfig);

    @if(isset($facultyService))
        var status = {{$facultyService}};
        serviceTypes(status)
    @endif

    $(document).ready(function () {

        $('#faculty_service_id').initializeSelectize();
        $('#faculty_service').initializeSelectize();
        $('#service_types').initializeSelectize();
        $('#hall_duration').initializeSelectize();
        $('#hall_location_id').initializeSelectize();

        @if(!empty($errors->all()))
            serviceTypes($('#faculty_service').val())
            $('#duration_dropdwon').show();
            $('#hall_loaction').show();
            $('#hall_notes_id').show();
            $('#calender_id').show();
        @endif
        
        $(document).on("change", '#faculty_service', function(e) {
            var status = $(this).val();
            if($('#faculty_service').val()){ 
                serviceTypes(status)
            }
            else {
                $('#addSelect').remove();
            }

            $('#select_type').hide();
            $('#duration_dropdwon').show();
            $('#hall_loaction').show();
            $('#calender_id').hide();
            $('#time_slots').hide();
            $('#hall_notes_id').hide();

            $('#service_types').val('');
            $('#hall_duration').val('');
            $('#hall_location_id').val('');
            resetDropDownSelectizeValue("#hall_location_id", "Please Select Location");
            resetDropDownSelectizeValue("#hall_duration", "Please Select Duration");
            $('#reservation_reason').val('');
            $('#date').val('');
        });

        $(document).on("change", "#hall_duration", function () {
            if($('#faculty_service').val() == {{\App\FacultyServices::SERVICE_TYPE_PLAYING_FIELDS}} && $('#service_types').val() && $('#hall_duration').val()) {
                if($('#hall_location_id').val()) {
                    $('#hall_notes_id').show();
                    updateSlots();
                    $('#calender_id').show();
                }
            } else{
                $('#hall_notes_id').hide();
                $('#calender_id').hide();
                $('#time_slots').hide();
                $('#date').val('');
                $('#reservation_reason').val('');
                resetDropDownSelectizeValue("#hall_duration", "Please Select Duration");
            }
        });

        $(document).on("change", "#hall_location_id", function () {
            if($('#faculty_service').val() == {{\App\FacultyServices::SERVICE_TYPE_PLAYING_FIELDS}} && $('#service_types').val() && $('#hall_location_id').val()) {
                if($('#hall_duration').val()) {
                    $('#hall_notes_id').show();
                    updateSlots();
                    $('#calender_id').show();
                }
            } else{
                $('#hall_notes_id').hide();
                $('#calender_id').hide();
                $('#time_slots').hide();
                $('#date').val('');
                $('#reservation_reason').val('');
                resetDropDownSelectizeValue("#hall_location_id", "Please Select Location");
            }
        });
    }); 
</script>
@endsection