@extends('Admin.layout')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{route('restaurant_management')}}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Edit Restaurant — {{ $restaurant->id }}
        </h5>
    </div>

    <div class="d-flex flex-lg-row flex-column justify-content-start gap-3 my-5">
        <a href="#" class="btn btn-primary d-flex align-items-center">
            <i class="ti tabler-user me-2"></i>
            <span>Profile Details</span>
        </a>
        <a href="{{route('edit_documents', $restaurant->id)}}" class="btn d-flex align-items-center">
            <i class="ti tabler-checklist me-2"></i>
            <span>Documents</span>
        </a>
    </div>

    <div class="card p-5">

        <form action="{{route('restaurant_update')}}" method="POST" enctype="multipart/form-data" id="editForm">
            @csrf
            <input type="hidden" name="id" value="{{ $restaurant->id }}">

            <h5>Restaurant Details</h5>

            <div class="row">

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Restaurant ID</label>
                    <input type="text" class="form-control bg-light" value="{{ $restaurant->restaurant_id }}" readonly>
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Restaurant Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('restaturant_name') is-invalid @enderror"
                        name="restaturant_name" value="{{ old('restaturant_name', $restaurant->name) }}">
                    @error('restaturant_name')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Owner Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('owner_name') is-invalid @enderror" name="owner_name"
                        value="{{ old('owner_name', $restaurant->owner_name) }}">
                    @error('owner_name')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Phone No<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('phno') is-invalid @enderror" name="phno"
                        value="{{ old('phno', $restaurant->phone) }}" maxlength="10"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    @error('phno')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                {{-- <div class="col-lg-3 mb-3">
                    <label class="form-label">Choose Image</label>
                    <input type="file" class="form-control @error('image') is-invalid @enderror" name="image"
                        accept=".jpg,.jpeg,.png">
                    @error('image')
                    <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                    @if($restaurant->image)
                    <small class="text-muted">Current: {{ basename($restaurant->image) }}</small>
                    @endif
                </div> --}}

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Choose Image</label>

                    <div class="d-flex align-items-center gap-2 mb-2" id="imagePreviewWrap" @if(!$restaurant->image)
                    style="display:none;" @endif>
                        <img id="restaurantImageThumb"
                            src="{{ $restaurant->image ? asset('storage/' . $restaurant->image) : '' }}"
                            alt="Restaurant Image" class="rounded-3 border"
                            style="width: 80px; height: 80px; object-fit: cover;">

                        <button type="button" class="btn btn-icon btn-sm border" data-bs-toggle="modal"
                            data-bs-target="#imagePreviewModal" title="View full image">
                            <i class="ti tabler-eye text-primary"></i>
                        </button>
                    </div>

                    <input type="file" id="restaurantImageInput" class="form-control @error('image') is-invalid @enderror"
                        name="image" accept=".jpg,.jpeg,.png" onchange="previewRestaurantImage(event)">
                    @error('image')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror

                    {{-- <small class="text-muted d-block mt-1" id="imageCurrentLabel">
                        @if($restaurant->image)
                        Current: {{ basename($restaurant->image) }}
                        @endif
                    </small> --}}
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Restaurant Type<span class="text-danger">*</span></label>
                    <select class="form-select @error('restaurant_type') is-invalid @enderror" name="restaurant_type">
                        <option value="">Select</option>
                        <option value="veg" {{ old('restaurant_type', $restaurant->restaurant_type) == 'veg' ? 'selected' : '' }}>Veg</option>
                        <option value="non-veg" {{ old('restaurant_type', $restaurant->restaurant_type) == 'non-veg' ? 'selected' : '' }}>Non-Veg</option>
                        <option value="both" {{ old('restaurant_type', $restaurant->restaurant_type) == 'both' ? 'selected' : '' }}>Both</option>
                    </select>
                    @error('restaurant_type')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Email<span class="text-danger">*</span></label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                        value="{{ old('email', $restaurant->email) }}">
                    @error('email')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">City<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('city') is-invalid @enderror" name="city"
                        value="{{ old('city', $restaurant->city) }}">
                    @error('city')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-3 mb-3">
                    <label class="form-label">Street<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('street') is-invalid @enderror" name="street"
                        value="{{ old('street', $restaurant->street) }}">
                    @error('street')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Address<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                        value="{{ old('address', $restaurant->address) }}">
                    @error('address')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-2 mb-3">
                    <label class="form-label">Pincode<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode"
                        value="{{ old('pincode', $restaurant->pincode) }}" maxlength="6"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    @error('pincode')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

           <div class="col-lg-2 mb-3">
    <label class="form-label">
        Start Time<span class="text-danger">*</span>
    </label>

    <input type="time"
           lang="en-US"
           class="form-control @error('starttime') is-invalid @enderror"
           name="starttime"
           value="{{ old('starttime', $restaurant->start_time) }}">

    @error('starttime')
        <div class="text-danger mt-1">{{ $message }}</div>
    @enderror
</div>

<div class="col-lg-2 mb-3">
    <label class="form-label">
        End Time<span class="text-danger">*</span>
    </label>

    <input type="time"
           lang="en-US"
           class="form-control @error('endtime') is-invalid @enderror"
           name="endtime"
           value="{{ old('endtime', $restaurant->end_time) }}">

    @error('endtime')
        <div class="text-danger mt-1">{{ $message }}</div>
    @enderror
</div>

                <h5 class="my-4">Document Details</h5>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">FSSAI License Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('licenseno') is-invalid @enderror" name="licenseno"
                        value="{{ old('licenseno', $restaurant->license_no) }}">
                    @error('licenseno')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Aadhar Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('aadhar') is-invalid @enderror" name="aadhar"
                        value="{{ old('aadhar', $restaurant->aadhar) }}" maxlength="12"
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    @error('aadhar')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">PAN Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('panno') is-invalid @enderror" name="panno"
                        value="{{ old('panno', $restaurant->pan_no) }}">
                    @error('panno')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">GSTIN(Optional)</label>
                    <input type="text" class="form-control @error('gst') is-invalid @enderror" name="gst"
                        value="{{ old('gst', $restaurant->gstin) }}">
                    @error('gst')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <h5 class="my-4">Bank Details</h5>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Account Holder Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('accountholder') is-invalid @enderror"
                        name="accountholder" value="{{ old('accountholder', $restaurant->account_holder) }}">
                    @error('accountholder')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Bank Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('bankname') is-invalid @enderror" name="bankname"
                        value="{{ old('bankname', $restaurant->bank_name) }}">
                    @error('bankname')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Account Number<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('acno') is-invalid @enderror" name="acno"
                        value="{{ old('acno', $restaurant->account_number) }}">
                    @error('acno')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">IFSC Code<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                        value="{{ old('ifsc', $restaurant->ifsc_code) }}">
                    @error('ifsc')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Branch Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('branch') is-invalid @enderror" name="branch"
                        value="{{ old('branch', $restaurant->branch_name) }}">
                    @error('branch')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">UPI ID(Optional)</label>
                    <input type="text" class="form-control @error('upi') is-invalid @enderror" name="upi"
                        value="{{ old('upi', $restaurant->upi_id) }}">
                    @error('upi')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <h5 class="my-4">Legal Information</h5>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Terms & Condition<span class="text-danger">*</span></label>
                    <textarea class="form-control @error('terms') is-invalid @enderror" name="terms"
                        rows="3">{{ old('terms', $restaurant->terms_conditions) }}</textarea>
                    @error('terms')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Privacy & Policy<span class="text-danger">*</span></label>
                    <textarea class="form-control @error('privacy') is-invalid @enderror" name="privacy"
                        rows="3">{{ old('privacy', $restaurant->privacy_policy) }}</textarea>
                    @error('privacy')
                        <div class="text-danger mt-1">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            <div class="d-flex justify-content-center align-items-center mt-5 gap-5">
                <button type="reset" class="btn btn-light text-light">Discard</button>
                <button type="submit" class="btn btn-primary" id="submitBtn">Update</button>
            </div>

        </form>

    </div>

    <div class="modal fade" id="imagePreviewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-4">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Restaurant Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="restaurantModalImg"
                        src="{{ $restaurant->image ? asset('storage/' . $restaurant->image) : '' }}" alt="Restaurant Image"
                        class="img-fluid rounded-3">
                </div>
            </div>
        </div>
    </div>


    <script>
        document.getElementById('submitBtn').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('editForm').submit();
        });
    </script>

    <script>

        <script>
            function previewRestaurantImage(event) {
            const file = event.target.files[0];
            if (!file) return;

            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
            if (!allowedTypes.includes(file.type)) {
                alert('Please upload a JPG or PNG image only.');
            event.target.value = '';
            return;
            }

            if (file.size > 5 * 1024 * 1024) {
                alert('Maximum file size is 5 MB.');
            event.target.value = '';
            return;
            }

            const imageUrl = URL.createObjectURL(file);

            // update thumbnail
            document.getElementById('restaurantImageThumb').src = imageUrl;

            // update modal preview too
            document.getElementById('restaurantModalImg').src = imageUrl;

            // show the thumbnail row (in case there was no image before)
            document.getElementById('imagePreviewWrap').style.display = 'flex';

            // update the "Current:" label to reflect the new file
            document.getElementById('imageCurrentLabel').textContent = 'Selected: ' + file.name;
        }
    </script>
    </script>

@endsection