@extends('admin.layouts.master')

@section('content')

    <!-- End of Topbar -->
    <div id="app">
        <!-- Begin Page Content -->
        <div class="container-fluid">


            <!-- Page Heading -->
            <h1 class="h3 mb-4 text-gray-800">
                <i class="fas fa-utensils"></i>
                Add Restaurant
            </h1>

            <div class="row">
                <div class="col-sm-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{route('restaurant.index')}}">Restaurants</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Create</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row">

                <div class="col-sm-12">

                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">Add Restaurant Details</h6>
                        </div>
                        <div class="card-body">
                            <form action="{{route('restaurant.store')}}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Merchant Name</label>
                                            <input type="text" name="merchantName" id="merchantName"
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Merchant Email</label>
                                            <input type="email" name="merchantEmail" id="merchantEmail"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Restaurant Name</label>
                                            <input type="text" name="name" id="restaurantName" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Restaurant Category</label>
                                            <select name="restaurantCategories[]" id="restaurantClass"
                                                    class="form-control w-sm-100" multiple="multiple">
                                                @foreach($categories as $category)
                                                    <option value={{$category->id}}>{{$category->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Restaurant Description</label>
                                    <textarea name="description" id="restaurantDesc" cols="30" rows="3"
                                              class="form-control"></textarea>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Average Cost</label>
                                            <input type="number" name="avg_cost" id="avgCost" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label>Cuisines</label>
                                        <select name="cuisines[]" id="cuisines" class="form-control w-sm-100"
                                                multiple="multiple">
                                            @foreach($cuisines as $cuisine)
                                                <option value={{$cuisine->id}}>{{$cuisine->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Minimum Order Amount</label>
                                            <input type="number" name="min_order_amount" id="minOrder"
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Restaurant Phone</label>
                                            <input type="tel" name="phone" id="restPhone" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Address</label>
                                    <input type="text" name="address" id="dispAddress" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label>Search Place from here</label>
                                    <input type="text" id="mapsearch" class="form-control">
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-3 border border-secondary p-2">
                                            <div id="map-canvas" style="width: 100%; height: 40vh;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label>Logo</label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="logoImg" name="image">
                                            <label class="custom-file-label" for="logoImg">Logo</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <label>Header Image</label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="headerImg"
                                                   name="header_image">
                                            <label class="custom-file-label" for="headerImg">Header Image</label>
                                        </div>
                                    </div>

                                </div>
                                <div class="row my-4">
                                    <div class="col">
                                        <label>Facilities</label>
                                    </div>
                                </div>


                                <div class="row">

                                    <div class="col">

                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="outdoor_seating"
                                                   id="outdoorSeating" checked value="1">
                                            <label class="custom-control-label facilityLabels" for="outdoorSeating">Outdoor
                                                Seating <i class="fas fa-couch"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="cashOnDelivery"
                                                   name="cash_on_delivery" checked value="1">
                                            <label class="custom-control-label facilityLabels" for="cashOnDelivery">Cash
                                                On
                                                Delivery <i class="far fa-money-bill-alt"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="takeAway"
                                                   name="take_away" checked value="1">
                                            <label class="custom-control-label facilityLabels" for="takeAway">Take Away
                                                <i
                                                    class="fas fa-shoe-prints"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" name="wifi" id="wifi"
                                                   checked value="1">
                                            <label class="custom-control-label facilityLabels" for="wifi">Wifi <i
                                                    class="fa fa-wifi"></i></label>
                                        </div>
                                    </div>

                                </div>

                                <div class="row my-4">
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="delivery"
                                                   name="delivery" checked value="1">
                                            <label class="custom-control-label facilityLabels" for="delivery">Delivery
                                                <i
                                                    class="fas fa-truck"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="dineIn" value="1"
                                                   name="dine_in" checked>
                                            <label class="custom-control-label facilityLabels" for="dineIn">Dine In <i
                                                    class="fas fa-utensils"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="onlinePayment"
                                                   value="1"
                                                   name="online_payment" checked>
                                            <label class="custom-control-label facilityLabels" for="onlinePayment">Online
                                                Payment <i class="far fa-credit-card"></i></label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="kidsFriendly"
                                                   value="1"
                                                   name="kids_friendly" checked>
                                            <label class="custom-control-label facilityLabels" for="kidsFriendly">Kids
                                                Friendly <i class="fas fa-child"></i></label>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="parkingArea"
                                                   value="1"
                                                   name="parking_area" checked>
                                            <label class="custom-control-label facilityLabels" for="parkingArea">Parking
                                                Area <i class="fas fa-parking"></i></label>
                                        </div>
                                    </div>


                                    <div class="col">
                                        <!-- leave these empty for now -->
                                    </div>
                                    <div class="col">
                                        <!-- leave these empty for now -->
                                    </div>

                                </div>

                                {{-- heading row --}}
                                <div class="row my-4">
                                    <div class="col-sm-12">
                                        <div class="alert alert-dark" role="alert">
                                            <strong class="text-uppercase">Restaurant Timings</strong>
                                        </div>
                                    </div>
                                </div>
                                {{-- heading row --}}

                                <div class="row">
                                    <div class="col">
                                        <label>Monday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field" id="mondayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#mondayOpeningHrs" value="12:00 PM"
                                                       name="monday_opening"/>
                                                <div class="input-group-append" data-target="#mondayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field" id="mondayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#mondayClosingHrs" value="2:03 PM"
                                                       name="monday_closing"/>
                                                <div class="input-group-append" data-target="#mondayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>

                                <div class="row">
                                    <div class="col">
                                        <label>Tuesday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field" id="tuesdayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#tuesdayOpeningHrs" value="12:00 PM"
                                                       name="tuesday_opening"/>
                                                <div class="input-group-append" data-target="#tuesdayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text">
                                                        <i class="far fa-clock"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field" id="tuesdayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#tuesdayClosingHrs" value="11:58 PM"
                                                       name="tuesday_closing"/>
                                                <div class="input-group-append" data-target="#tuesdayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>

                                <div class="row">
                                    <div class="col">
                                        <label>Wednesday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="wednesdayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#wednesdayOpeningHrs" value="1:00 PM"
                                                       name="wednesday_opening"/>
                                                <div class="input-group-append" data-target="#wednesdayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="wednesdayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#wednesdayClosingHrs" value="12:00 AM"
                                                       name="wednesday_closing"/>
                                                <div class="input-group-append" data-target="#wednesdayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>


                                <div class="row">
                                    <div class="col">
                                        <label>Thursday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="thursdayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#thursdayOpeningHrs" value="5:00 PM"
                                                       name="thursday_opening"/>
                                                <div class="input-group-append" data-target="#thursdayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="thursdayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#thursdayClosingHrs" value="1:00 AM"
                                                       name="thursday_closing"/>
                                                <div class="input-group-append" data-target="#thursdayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr>


                                <div class="row">
                                    <div class="col">
                                        <label>Friday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field" id="fridayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#fridayOpeningHrs" value="8:00 AM"
                                                       name="friday_opening"/>
                                                <div class="input-group-append" data-target="#fridayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field" id="fridayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#fridayClosingHrs" value="12:00 AM"
                                                       name="friday_closing"/>
                                                <div class="input-group-append" data-target="#fridayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>

                                <div class="row">
                                    <div class="col">
                                        <label>Saturday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="saturdayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#saturdayOpeningHrs" value="9:00 AM"
                                                       name="saturday_opening"/>
                                                <div class="input-group-append" data-target="#saturdayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field"
                                                 id="saturdayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#saturdayClosingHrs" value="12:00 AM"
                                                       name="saturday_closing"/>
                                                <div class="input-group-append" data-target="#saturdayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>

                                <div class="row">
                                    <div class="col">
                                        <label>Sunday</label>
                                    </div>
                                    <div class="col">

                                        <div class="form-group">
                                            <label>Opening Time</label>
                                            <div class="input-group date restaurant-timing-field" id="sundayOpeningHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#sundayOpeningHrs" value="12:00 PM"
                                                       name="sunday_opening"/>
                                                <div class="input-group-append" data-target="#sundayOpeningHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <div class="col">
                                        <div class="form-group">
                                            <label>Closing Time</label>
                                            <div class="input-group date restaurant-timing-field" id="sundayClosingHrs"
                                                 data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input"
                                                       data-target="#sundayClosingHrs" value="12:00 PM"
                                                       name="sunday_closing"/>
                                                <div class="input-group-append" data-target="#sundayClosingHrs"
                                                     data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="far fa-clock"></i></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <button type="submit" class="btn btn-success btn-icon-split float-right my-4">
                                    <span class="text font-weight-bold">Submit Details</span>
                                    <span class="icon text-white"><i class="fas fa-arrow-right"></i></span>
                                </button>

                                <input type="hidden" name="city_id" value="0">
                                <input type="hidden" name="lat" id="lat">
                                <input type="hidden" name="lng" id="lng">

                            </form>
                        </div>
                    </div>

                </div>

            </div>

        </div>
        <!-- /.container-fluid -->
    </div>

    <!-- End of Main Content -->


@endsection


@section('scripts')

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBV68ITzQRel6iDKUCvMzGHh9YyPO5jlGw&libraries=places">
    </script>

    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Restaurant') !!}



    <script src="{{asset('js/admin/maps.js')}}"></script>

    <script>
        console.log('testa');
        $(document).ready(function () {
            $('#restaurantClass').select2();
            $('#cuisines').select2();
        });

        $(function () {
            $('.restaurant-timing-field').datetimepicker({
                format: 'LT'
            });
        });

    </script>

@endsection