@extends('layouts.customer')

@section('content')
<style type="text/css">
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 79%;
    }
    ul.multiselect-container.dropdown-menu.show {
        width: 100%;
        padding: 10px;
    }
    .dropdown-toggle::after{
        position: absolute;
        right: 10px;
        margin-top: 7px;
        font-size: 17px;
    }
</style>
<link rel="stylesheet" href="{{ asset('css/duration-picker.css') }}" />
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Online Ordering Availability</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Online Ordering Availability</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Create Availability</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <!-- <h5 class="mb-4">Add Future Availability</h5> -->
                            

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form action="{{ route('restaurants.online-ordering.availability.store', ['account' => $account, 'restaurant' => $restaurant]) }}" method="POST">
                                @csrf
                                @method('POST')
                                <h5 class="mb-4">Create Availability</h5>
                                <div class="form-row">
                                    <div class="form-group col-6">
                                        <label for="date">Date</label>
                                        <input type="date" class="form-control" name="date" id="date" value="{{ old('date') }}" />
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="note">Note (Optional)</label>
                                        <textarea class="form-control" id="note" name="note">{{ old('note') }}</textarea>
                                    </div>
                                </div>
                                
                                <hr />

                                <h5 class="mb-4">Locations</h5>
                                @if($locations)   
                                    <div class="form-group">
                                        <label for="location_id">Location</label>
                                        <select name="location_id[]" class="form-control" id="location_id" data-width="100%" multiple="multiple" required>
                                            <!-- <option value="">SELECT LOACTION</option> -->
                                            @foreach($locations ?? [] as $location)
                                                <option value="{{ $location->id}}" @if( old('location_id') == $location->id) selected @endif>{{ $location->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endif 

                                <div class="form-group">
                                    <label>Availability</label>
                                    <div class="col-12 p-0">
                                        <div class="custom-switch custom-switch-secondary mb-2">
                                            <input class="custom-switch-input" id="switch" type="checkbox" name="is_avaliable" @if( old('is_avaliable') == 1) checked @endif>
                                            <label class="custom-switch-btn" for="switch"></label>
                                        </div>
                                    </div>
                                </div>

                                <div class="availability-wrapper d-none">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label>Opening Time</label>
                                            <input type="text" class="form-control timepicker" name="open_time" value="{{ old('open_time') }}" />
                                        </div>
    
                                        <div class="form-group col-md-6">
                                            <label>Closing Time</label>
                                            <input type="text" class="form-control timepicker" name="close_time" value="{{ old('close_time') }}" />
                                        </div>
    
                                        <div class="form-group col-md-6">
                                            <label>CutOff Duration</label>
                                            <input type="text" data-duration="{{ old('cutoff_time') ?? 90 }}" class="form-control cutoff-duration-picker" placeholder="Select duration" data-output-format="minutes" data-position="right">
                                            <input type="hidden" name="cutoff_time" value="{{ old('cutoff_time') ?? 90 }}" />
                                        </div>
                                    </div>
                                </div>
                                
                                <input type="hidden" name="restaurant_id" value="{{ $restaurant }}" />
                                <button type="submit" class="btn btn-primary d-block mt-3">Create</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script src="{{ asset('js/day.js')}}"></script>  
    <script src="{{ asset('js/timepicker-bs4.js')}}"></script> 
    <script src="{{ asset('js/duration-picker.js')}}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.min.js')}}"></script>

    <script type="text/javascript">
        $('input.timepicker').timepicker({});  

        // cutoff-duration-picker
        $('.cutoff-duration-picker').durationPicker({
            duration: 60,              // Initial duration in minutes
            outputFormat: 'minutes',   // 'minutes' or 'seconds'
            mode: 'input',            // 'input' or 'display'
            showSliders: true,        // Show hour/minute sliders
            showPresets: true,        // Show quick select buttons
            scrollSlider: true,       // Enable mouse wheel on sliders
            resizable: true,          // Allow popup resize
            width: 'auto',           // Dropdown width (number or 'auto')
            presets: [15, 30, 60, 120, 240], // Quick select values (minutes)
            onChange: function(data) {} // Callback function
        });

        $('.cutoff-duration-picker').on('durationChange', function(e, data) {
            $(this).parent().next().val(data.totalMinutes);
            // console.log(data); // { hours, minutes, totalMinutes, totalSeconds, display }
        });

        $('#switch').on('change', function () {
            $('.availability-wrapper').toggleClass('d-none', !this.checked);
        });

        $('#location_id').multiselect({
            includeSelectAllOption: true,
            nonSelectedText:'Choose Location'
        });
    </script>
@endsection