@extends('layouts.main')

@section('content')
    @include('partials.header')
    <div class="px-[3%] mb-20">
        <div class="max-w-7xl mx-auto">
            <!-- Banner -->
            <div style=" {{ $restaurant->cover ?? 'background: rgb(56, 56, 56)' }}"
                class="rounded-2xl text-grey-100 w-full h-44 overflow-hidden relative px-4 md:px-11 bg-[url('/storage/images/restaurants/{{ $restaurant->cover }}')] flex py-4 justify-between mt-8 bg-no-repeat bg-cover">
                <div class="flex flex-col justify-center">
                    <span class="block text-2xl font-sora font-bold">Ristorante </span><span
                        class="block text-2xl font-sora font-bold">{{ $restaurant->name }}</span>
                </div>

                <div onclick="document.getElementById('image').click()"
                    class="flex gap-2 cursor-pointer h-fit whitespace-nowrap absolute right-4">
                    <span>Change Cover Photo</span>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px"
                        height="20px">
                        <image x="0px" y="0px" width="20px" height="20px"
                            xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAABQCAQAAAAg7eobAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBgwBDzqJCbdtAAAEFklEQVRo3s1awXXiMBD98LYAl2AqiKkgdgehgkAFCRUEKiBbAXQAHeBUgLaCuARfc9o9EK0tzVgaC5vo32wk8TUzXzOSNfnCqEiQI/v/VKIMGWQyIskcL3iy3tU4YYsqDpIJ9oRggy02P08ywxGps0WJBeqfJJnhjMTbqsICSjbgdHCKCfYCikCKC5Y/RXLfUnODqqOtaEJDk9wQuRwwxwQzTLBgFqAlzp7oxdAx+YSj9WaBkzWJN9KrxspqNSJJKpgVDsxEOBcfsLoHyQRnKxq7/jjFkYlbB83hYtIWjOr80woFY+Eldl1DD2VJO9ZqzDyL9RJ78q7gc/swJKlg5oKFmualEgXXcAh3Z8QmK1EuUZhbbs/ZNXYAkjTDVEzE8aCLz/M4JHdk9qkod2usjad8DJKvbP7NceEdx6AybMn2uo1k3rlspLjgVTjKH1+DW0imRNMmdsJ6yItwkgmORDA2liQLcXgYj+SOZJgZtqRVhrOnakyNuqkckqQtmBoFgA2zKUiwZ3JL86sZMoprFJZxcpytN02G4csHhQVb+O6tybKZKsSSVDDtDFORPAIAGS7M7tH2R8lbsj9JKpgDIbXCinH70drI0gVsDRb93W07SGHOtsvY3U6zlU1xEZTIQSRfrdm7SjL+gKBGAQWQnOQoevuRdAlGNqkr1ngQ+qM3yR4OasF/muEtkeXCkQiGg8Lce5ZWuKt4OcmdeA9D7VQwuajB2lciS93dRzA8cuKJKw7+ycpI9hcMBy4XKZ+rAZm73RlGjgq/rTe17ADQb0n5pt+HDBfrTSE7nvZbMlwwdLIm1tITdB9JviQLwZksYO/Srm53DyMYgMv4AsFouCw5lGCAJfFHjxNzlyUjEIxGtyUjEIyPZBSC0eDdHYlgNDhLRiMYDWrJiASjQS0ZkWC6SEYlGA3T3ZEJRqNtyegEo9FYMkLBaDSWjFAwNskoBaNxdXekgtGYgp4RRiOYNsld0Kafgn50WvS9t8Jj8pXi03jjPJVxIMGnNdn17dF4xdQ694pKMA3JR+M5NIboh+R10DgdJNvzV4Er2kiCaUiag4dgNMHwJLOAEUbIMJSkMv6wP80RBdOQ/DCe+5IcVTANydJ4fuzVe2TBaEy+gM/WmXaFmbjv4CVZF6YwPzqm/ktZ37iDYNokzajMhT3vIJg2SXP+3q/PAO4kmDbJygj2XNDrToJpkzRtmXmvJIyeYXiSfaLyjoLR+AXAjsqMvc2Yf//2dj/BaOgt7d/A/u49zAYvN95nUdjipEmexUtPGzXmjmjkbp2GoNBV0EdQd7dgXgahCDxrkmVA55WnVzIQybQhWffqyN8mNaEGIvnRFL3yjKGwFnzDBnNZJAQK7+2jv9R5F0p9/2XVY+FOpXfyO1HhhPofnv5vaBHjOA4AAAAASUVORK5CYII=" />
                    </svg>
                </div>
            </div>

            <!-- Title -->
            <div class="flex items-center justify-between mt-10 gap-3 border-b border-grey-600 pb-6">
                <div>
                    <span class="font-sore font-bold text-2xl text-grey-400">Update Profile</span>
                    <p class="font-medium text-base text-grey-300 mt-1">
                        Complete all the fields in your restaurant profile to improve the
                        look of your menu and <br />
                        provide useful information to your customers.
                    </p>
                </div>
                {{-- <div
                    class="items-center bg-secondary-300 hover:bg-secondary-300/90 h-fit text-base font-medium gap-2 py-3 px-3 md:px-5 cursor-pointer rounded-full w-fit text-white min-w-[140px] justify-center hidden md:flex">
                    <p class="">Add Meal</p>
                </div> --}}
            </div>

            <!-- form -->
            <form action="{{ route('dashboard.profile.update') }}" method="post" enctype="multipart/form-data"
                class="mt-10 grid md:grid-cols-2 grid-cols-1 gap-10">
                <input type="file" style="display: none" name="cover" id="image">
                @csrf
                <div class="border-b border-grey-200 pb-4">
                    <label for="name" class="font-semibold text-xs text-grey-400 mb-2 block">Name of Restaurant</label>
                    <input type="text" placeholder="Enter Meal Name" name="name" value="{{ $restaurant->name }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="city" class="font-semibold text-xs text-grey-400 mb-2 block">City</label>
                    <input type="text" placeholder="Enter City Name" name="city" value="{{ $restaurant->city }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="street" class="font-semibold text-xs text-grey-400 mb-2 block">Street / Square / Civ.
                    </label>
                    <input type="text" placeholder="Enter Address" name="street" value="{{ $restaurant->street }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="province" class="font-semibold text-xs text-grey-400 mb-2 block">Province</label>
                    <input type="text" placeholder="Enter Province" name="province" value="{{ $restaurant->province }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="postacode" class="font-semibold text-xs text-grey-400 mb-2 block">Postal Code</label>
                    <input type="text" placeholder="Enter Postal Code" name="postal" value="{{ $restaurant->postal }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="state" class="font-semibold text-xs text-grey-400 mb-2 block">State</label>
                    <input type="text" placeholder="Enter State Name" name="state" value="{{ $restaurant->state }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="phone" class="font-semibold text-xs text-grey-400 mb-2 block">Telephone number
                    </label>
                    <input type="text" placeholder="Enter Telephone Number" name="contact"
                        value="{{ $restaurant->contact }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="wa" class="font-semibold text-xs text-grey-400 mb-2 block">Whatsapp Number
                    </label>
                    <input type="text" placeholder="Enter Whatsapp Number" name="whatsapp"
                        value="{{ $restaurant->whatsapp }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="website" class="font-semibold text-xs text-grey-400 mb-2 block">Website Address</label>
                    <input type="text" placeholder="Enter Website Address" name="website"
                        value="{{ $restaurant->website }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="fb" class="font-semibold text-xs text-grey-400 mb-2 block">Link to Your Facebook
                        Page
                    </label>
                    <input type="text" placeholder="Enter Facebook Page URL" name="fb"
                        value="{{ $restaurant->facebook }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="instagram" class="font-semibold text-xs text-grey-400 mb-2 block">Link to Your Instagram
                        Page
                    </label>
                    <input type="text" placeholder="Enter Instagram Page URL" name="instagram"
                        value="{{ $restaurant->instagram }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="border-b border-grey-200 pb-4">
                    <label for="twitter" class="font-semibold text-xs text-grey-400 mb-2 block">Link to Your Twitter
                        Page</label>
                    <input type="text" placeholder="Enter Twitter Page URL" name="twitter"
                        value="{{ $restaurant->twitter }}"
                        class="focus:outline-none border-none bg-transparent w-full placeholder:text-grey-300 placeholder:text-base text-grey-400 placeholder:font-medium" />
                </div>
                <div class="">
                    <label for="twitter" class="font-semibold text-xs text-grey-400 mb-2 block">Describe Your Business
                    </label>
                    <textarea name="description"
                        class="border border-grey-200 rounded-2xl w-full py-2 px-4 text-base font-medium h-32 text-grey-300 resize-none focus:outline-none focus:border-grey-600">{{ $restaurant->description }}</textarea>
                </div>
                <div class="">
                    <label for="twitter" class="font-semibold text-xs text-grey-400 mb-2 block">Additional Information
                    </label>
                    <textarea name="info"
                        class="border border-grey-200 rounded-2xl w-full py-2 px-4 text-base font-medium h-32 text-grey-300 resize-none focus:outline-none focus:border-grey-600">{{ $restaurant->info }}</textarea>
                </div>

                <div>
                    <!-- Button -->
                    <div class="flex gap-2">
                        <div
                            class="flex items-center h-fit text-base font-medium gap-2 py-3 px-3 md:px-5 cursor-pointer min-w-[140px] justify-center">
                            <p class="">Upload Logo</p>
                        </div>
                        <input type="file" name="image"
                            class="flex items-center h-fit text-base font-medium gap-2 py-3 px-3 md:px-5 cursor-pointer rounded w-fit text-black min-w-[140px] justify-center">

                    </div>
                </div>
                <div>
                    <!-- Button -->
                    <div class="flex gap-2">
                        <input type="submit" value="Save"
                            class="flex items-center bg-secondary-300 hover:bg-secondary-300/90 h-fit text-base font-medium gap-2 py-3 px-3 md:px-5 cursor-pointer rounded-full w-fit text-white min-w-[140px] justify-center">

                        <div
                            class="flex items-center bg-transarent border border-primary h-fit text-base font-medium gap-2 py-3 px-3 md:px-5 cursor-pointer rounded-full w-fit text-primary min-w-[140px] hover:bg-primary/10 justify-center">
                            <p class="">Cancel</p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @include('partials.footer')
@endsection