@extends('layouts.master')

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h2> {{($type == 'location')? 'Location' : 'Service'}} : {{$selected_name}} </h2>
                </div>
            </div>
            <div class="card card-dark">
                 <div class="card-header">
                    <form>
                    <div class="row">
                        <div class="col-md {{($type=='service')? 'd-none':''}}">
                            <div class="form-group">
                                <select name="" id="service_id" class="form-control select2">
                                    <option value="">@lang('modules.booking.selectService')</option>
                                    @if(count($services) == 1)
                                        <option value="{{ $services[0]->id }}" selected >{{ ucwords($services[0]->name) }}</option>
                                    @else
                                        @foreach($services as $service)
                                            <option value="{{ $service->id }}" 
                                            {{ ($service->id == $id && $type=='service')?'selected':'' }}
                                            >{{ ucwords($service->name) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md {{($type=='location')? 'd-none':''}}">
                            <div class="form-group">
                                <select name="" id="location_id" class="form-control select2">
                                    <option value="">@lang('modules.booking.selectLocation')</option>
                                    @if(count($locations) == 1)
                                        <option value="{{ $locations[0]->id }}" selected >{{ ucwords($locations[0]->name) }}</option>
                                    @else
                                        @foreach($locations as $location)
                                            <option value="{{ $location->id }}"
                                            {{ ($location->id == $id && $type=='location')?'selected':'' }}
                                            >{{ ucwords($location->name) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <select class="select2 form-control" id="weekday" name="weekday">
                                    <option value="">All Days</option>
                                    <option value="6">All Sundays</option>
                                    <option value="0">All Mondays</option>
                                    <option value="1">All Tuesdays</option>
                                    <option value="2">All Wednesdays</option>
                                    <option value="3">All Thursdays</option>
                                    <option value="4">All Fridays</option>
                                    <option value="5">All Saturdays</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <input type="text" class="form-control datepicker" name="startDate" id="filter-date-start" placeholder="@lang('app.booking') @lang('app.startDate')">
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <input type="text" class="form-control datepicker" name="endDate" id="filter-date-end" placeholder="@lang('app.booking') @lang('app.endDate')">
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="form-group">
                                <button type="button" id="load-dates" class="btn btn-success" style="width:100%;margin-bottom:5px"> @lang('app.view')</button>
                                                      
                            </div>
                        </div>
                        
                        <div class="col-md">
                            <div class="form-group">
                                 <button type="reset" id="reset-dates" class="btn btn-danger" style="width:100%;margin-bottom:5px"> @lang('app.reset')</button>
                            </div>  
                        </div>
                    </div>
                    </form>
                </div>
                <!-- /.card-header -->
                <div class="card-body" id="date-detail">
                    
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@push('footer-js')

   <script>
    function toggle(elementBox) {
            var elBox = $(elementBox);
            elBox.slideToggle();
        }
        
        $('#filter-date-start').datetimepicker({
            format: '{{ $date_picker_format }}',
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            },
            useCurrent: false,
        });

        $('#filter-date-end').datetimepicker({
            format: '{{ $date_picker_format }}',
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            },
            useCurrent: false,
        });


        $('body').on('click', '#load-dates', function (e) {
            e.preventDefault();
                let location_id = $('#location_id').val();
                let service_id = $('#service_id').val();
                if(location_id == '')
                {
                    swal('Choose a location');
                    return false;
                }
                if(service_id == '')
                {
                    swal('Choose a service');
                    return false;
                }
                let url = "{{URL::to('account/location/service/:location_id/:service_id')}}";
                url = url.replace(':location_id', location_id);
                url = url.replace(':service_id', service_id);
                var data = {
                    weekday : $('#weekday').val(),
                    startDate : $('#filter-date-start').val(),
                    endDate : $('#filter-date-end').val(),
                    _token :'{{csrf_token()}}'
                }
                $.easyAjax({
                    type: 'POST',
                    url: url,
                    data:data,
                    success: function (response) {
                        if (response.status == "success") {
                            $('html, body').animate({
                                scrollTop: $("#date-detail").offset().top-50
                            }, 2000);                            
                            $('#date-detail').hide().html(response.view).fadeIn('slow');
                        }
                    }
                });
            });

        $('body').on('change','.time-status',function () {
            var id = $(this).data('row-id');
            var url = "{{route('admin.booking-dates.update', ':id')}}";
            url = url.replace(':id', id);

            if ($(this).is(':checked')) {
                var status = 'enabled';
            } else {
                var status = 'disabled';
            }

            $.easyAjax({
                url: url,
                type: "POST",
                data: {'_method': 'PUT', '_token': "{{ csrf_token() }}", 'status': status}
            })
        });

        $('body').on('click','.edit-row',function () {
            var id = $(this).data('row-id');
            var url = '{{ route('admin.booking-dates.edit', ':id')}}';
            url = url.replace(':id', id);

            $('#modelHeading').html('@lang('app.edit') @lang('menu.bookingTimes')');
            $.ajaxModal('#application-modal', url);
        });
        $('body').on('click','.disable-break',function () {
            var id = $(this).data('row-id');
            var url = "{{ URL::to('account/location/service/breaktimes/:id')}}";
            url = url.replace(':id', id);

            $('#modelHeading').html('@lang('app.edit') @lang('app.disableTime')');
            $.ajaxModal('#application-modal', url);
        });
        $('#load-dates').trigger('click');

        $('body').on('click','.delete-break',function(e){
            $(this).closest('.row').remove();
        })
        
        $('body').on('click','.add-more-break',function(e){
            e.stopPropagation();
            var timeSelect = $('#timeSelect').html()
            $('.break_time_list').append(timeSelect);
            $('.break_time_list .select2').select2();
        })   

        $('body').on('click','#reset-dates',function(e){
            $(".select2").val("").trigger('change');
        })

        
   </script>

@endpush