@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'restraunt';
    @endphp
    <style>
        .error-message {
            color: #FF0000;
        }

        form .error-message {
            color: red;
            /* Set your desired color here */
        }

        form .input_class.error-message {
            color: #0e1726;
        }
    </style>
    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <!-- <h6 class="card-title">Edit Manage Customers</h6> -->
                            <a class="d-flex align-items-center justify-content-center pl-2"
                                href="{{ route('manage.restaurants') }}">
                                <img class="back-btn" src="{{ asset('public/assets/img/left-arrow.svg') }}">
                                <h6 class="card-title p-0">Add Details</h6>
                            </a>
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn h-10">
                        <div class="view-details Article">
                            <form id="update_restaurant_form" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Restaurant Name</label>
                                            <input type="text" class="form-control" name="name" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Restaurant ID</label>
                                            <input type="text" class="form-control" name="rest_id" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="location" class="label">Address</label>
                                            <input type="text" class="form-control" name="address" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="label">Image</label>
                                            <div class="">
                                                <input type="file" class="form-control input_class" accept="image/*"
                                                    placeholder="Upload an Image" name="image" id="selectImage" required>
                                                <img id="preview" src="#" alt="your image" class="mt-3 "
                                                    style="display:none;width:20%;" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="location" class="label">Exclusion</label>
                                            <textarea type="text" class="form-control" name="exclusion"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="location" class="label">Select state</label>

                                        <select class="form-select" aria-label="Default select example" id="single"
                                            name="state_xid">
                                            <option value="">Select State</option>
                                            @foreach ($state as $states)
                                                <option value="{{ $states['id'] }}">{{ $states['name'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="location" class="label">Latitude</label>
                                            <input type="text" class="form-control" name="latitude" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="location" class="label">Longitude</label>
                                            <input type="text" class="form-control" name="longitude" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="phone_number" class="label">Phone number</label>
                                            <input type="text" class="form-control" name="phone_number" maxlength="15"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">Bio</label>
                                            <input type="text" class="form-control" name="bio" required>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="label">Operating Hours</label>
                                            @foreach (['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] as $day)
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label>{{ $day }} Start Time:</label>
                                                        <input type="time" class="form-control"
                                                            name="operating_hours[{{ $day }}][start_time]">
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label>{{ $day }} End Time:</label>
                                                        <input type="time" class="form-control"
                                                            name="operating_hours[{{ $day }}][end_time]">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label for="company-name" class="label">While at Restaurant be sure to
                                                try:</label>
                                            <input type="text" class="form-control mb-3" name="try_on_1" required>
                                            <input type="text" class="form-control mb-3" name="try_on_2" required>
                                            <input type="text" class="form-control mb-3" name="try_on_3" required>
                                            <input type="text" class="form-control mb-3" name="try_on_4" required>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button id="update_restaurant_btn" type="submit"
                                            class="download-btn-custom mt-3 custom-width-10">Save</button>
                                    </div>
                                </div>
                            </form>

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

            </div>
        </div>
    </div>
@endsection


@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_restaurant/add_restaurant.js') }}"></script>

    <script>
        selectImage.onchange = evt => {
            preview = document.getElementById('preview');
            preview.style.display = 'block';
            const [file] = selectImage.files
            if (file) {
                preview.src = URL.createObjectURL(file)
            }
        }

        $("#single").select2({
            placeholder: "Select Location",
            allowClear: true
        });
    </script>
    <script>
        var quill = new Quill('#news-quill-add', {
            theme: 'snow'
        });
    </script>
@endsection
