@extends('admin.layout')
@section('title', 'Add Service')
@section('header')

<!-- Flatpickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Optional Theme (Stylish Material or Air) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">


<style>
    .flatpickr-day.available {
        background-color: #d4edda !important;
        color: #155724 !important;
        border: 2px solid #007bff !important;
    }

    .flatpickr-day.unavailable {
        background-color: #f8d7da !important;
        color: #721c24 !important;
        border: 2px solid #007bff !important;
    }
    .flatpickr-input {
        background-color: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #ced4da;
        padding: 10px 12px;
        font-size: 15px;
        color: #333;
        box-shadow: 0 0 5px rgba(0,0,0,0.05);
        transition: all 0.2s ease-in-out;
    }

    .flatpickr-input:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
    }

    .form-label {
        font-weight: 600;
    }
</style>


<style>
    /* Basic wizard step styling */
    .wizard-step {
        padding: 25px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 30px;
        background-color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease-in-out;
    }

    /* Hide all steps by default, JavaScript will show the active one */
    .wizard-step:not(:first-child) {
        display: none;
    }

    /* Styling for the navigation buttons */
    .d-flex button {
        margin-left: 10px;
        padding: 10px 25px;
        border-radius: 5px;
    }

    /* Styling for form-control in focus */
    .form-control:focus, .form-select:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

    /* Error message styling */
    .text-danger {
        font-size: 0.875em;
        margin-top: 5px;
    }

    /* Helper text for file uploads */
    .form-control + .text-muted {
        font-size: 0.85em;
        margin-top: 5px;
        display: block;
    }

    /* Enhanced breadcrumb back button */
    .breadcrumb-box {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .breadcrumb-box:hover {
        background-color: #e2e6ea;
    }

    .breadcrumb-box i {
        color: #6c757d;
    }

    /* Styles for repeatable room sections */
    .room-section {
        border: 1px solid #e9ecef;
        padding: 20px;
        margin-bottom: 25px;
        border-radius: 8px;
        background-color: #fcfcfc;
        position: relative; /* For positioning the remove button */
    }
    .room-section .remove-room-type {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.2em;
        color: #dc3545;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: color 0.2s ease;
    }
    .room-section .remove-room-type:hover {
        color: #c82333;
    }
</style>
@endsection

@section('content')

<div class="container-fluid page-wrapper">
   <div class="d-flex align-items-center justify-content-between mb-4">
    <div class="d-flex align-items-center">
        <div class="breadcrumb-box" onclick="redirectToPreviousPage()">
            <i class="fa-solid fa-chevron-left"></i>
        </div>
        <div class="ms-3">
            <h3 class="page-top-heading">Add New Service</h3>
        </div>
    </div>
    <div>
        <a href="{{ route('service_history') }}" class="btn btn-primary">History</a>

    </div>
</div>

    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card blured-card">
                <div class="card-body">

                    <form action="{{ route('add_service_post') }}" method="POST" enctype="multipart/form-data" id="wizardForm">
                        @csrf
                        <div class="wizard-step" id="step-1">
                            <h4 class="mb-4 text-primary">1. Business Details</h4>
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="category_id" class="form-label">Select Service Category <span class="text-danger">*</span></label>
                                    <select name="category_id" id="category_id" class="form-select @error('category_id') is-invalid @enderror">
                                        <option value="">-- Choose Category --</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ old('category_id', $view_business->category_id ?? '') == $category->id ? 'selected' : '' }}>{{ $category->category_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="subcategory_id" class="form-label">Select Subcategory</label>
                                    <select name="subcategory_id" id="subcategory_id" class="form-select @error('subcategory_id') is-invalid @enderror">
                                        <option value="">-- Choose Subcategory --</option>
                                        @foreach ($subcategories as $subcategory)
                                            <option value="{{ $subcategory->id }}" {{ old('subcategory_id', $view_business->subcategory_id ?? '') == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->subcategory_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('subcategory_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-lg-6 mb-3">
                                    <label for="business-name" class="form-label">Business Name <span class="text-danger">*</span></label>
                                    <input type="text" name="business_name" class="form-control @error('business_name') is-invalid @enderror" id="business-name" placeholder="E.g., John Doe Photography" value="{{ old('business_name', $view_business->business_name ?? '') }}">
                                    @error('business_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                 <div class="col-lg-6 mb-3">
                                    <label for="business-name" class="form-label">Business Name in Tamil<span class="text-danger">*</span></label>
                                    <input type="text" name="business_name_tamil" class="form-control @error('business_name_tamil') is-invalid @enderror" id="business-name" placeholder="E.g., John Doe Photography" value="{{ old('business_name_tamil', $view_business->business_name_tamil ?? '') }}">
                                    @error('business_name_tamil')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                               
                                <div class="col-lg-6 mb-3">
    <label class="form-label">Business Profile Image</label>
    <input type="file" name="business_profile" id="businessProfileInput"
        class="form-control @error('business_profile') is-invalid @enderror"
        accept="image/jpeg, image/png">
    <small class="text-muted">Max file size: 5MB, JPG/PNG only</small>
    @error('business_profile')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror

    <div id="businessProfilePreview" class="mt-2" style="display: none;">
        <img id="businessProfileImage" src="#" alt="Preview"
            class="img-thumbnail mb-2" style="max-height: 150px;">
        <br>
        <button type="button" class="btn btn-sm btn-danger" id="removeBusinessProfile">Remove</button>
    </div>
</div>
                                <div class="col-lg-12 mb-3">
                                    <label for="about" class="form-label">About Your Business <span class="text-danger">*</span></label>
                                    <textarea name="about_us" id="about" class="form-control @error('about_us') is-invalid @enderror" rows="5" placeholder="Tell us about your business, services, and unique selling points.">{{ old('about_us', $view_business->about_us ?? '') }}</textarea>
                                    @error('about_us')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label for="about" class="form-label">About Your Business in Tamil <span class="text-danger">*</span></label>
                                    <textarea name="about_us_intam" id="about" class="form-control @error('about_us') is-invalid @enderror" rows="5" placeholder="Tell us about your business, services, and unique selling points.">{{ old('about_us', $view_business->about_us ?? '') }}</textarea>
                                    @error('about_us')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="d-flex justify-content-end mt-4">
                                <button type="button" class="btn btn-primary next-step">Next Step <i class="fa-solid fa-arrow-right-long ms-2"></i></button>
                            </div>
                        </div>
                        <div class="wizard-step" id="step-2">
                            <h4 class="mb-4 text-primary">2. Services & Portfolio</h4>
                            <div class="row">
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Your Key Services <span class="text-muted">(Add at least one)</span></label>
                                    <div id="service-inputs-container">
                                        <div class="d-flex mb-2 align-items-center">
                                            <input type="text" name="services[]" class="form-control @error('services.0') is-invalid @enderror" placeholder="E.g., Wedding Photography, Interior Design, Plumbing Services" value="{{ old('services.0', $view_business->services[0] ?? '') }}">
                                            @error('services.0')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        @if (old('services'))
                                            @foreach (array_slice(old('services'), 1) as $index => $service)
                                                <div class="d-flex mb-2 align-items-center">
                                                    <input type="text" name="services[]" class="form-control mt-2 @error('services.' . ($index + 1)) is-invalid @enderror" placeholder="Your Service" value="{{ $service }}">
                                                    <button type="button" class="btn btn-sm btn-outline-danger ms-2 mt-2 remove-service-field"><i class="fa-solid fa-times"></i> Remove</button>
                                                </div>
                                                @error('services.' . ($index + 1))
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            @endforeach
                                        @elseif (isset($view_business->services) && is_array($view_business->services) && count($view_business->services) > 1)
                                            @foreach (array_slice($view_business->services, 1) as $index => $service)
                                                <div class="d-flex mb-2 align-items-center">
                                                    <input type="text" name="services[]" class="form-control mt-2" placeholder="Your Service" value="{{ $service }}">
                                                    <button type="button" class="btn btn-sm btn-outline-danger ms-2 mt-2 remove-service-field"><i class="fa-solid fa-times"></i> Remove</button>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addMoreServices">+ Add More Services</button>
                                </div>

                            
                                <div class="col-lg-12 mb-3 mt-4">
    <label class="form-label">Portfolio Images <span class="text-muted">(Upload up to 4, JPG only)</span></label>
    <div class="row" id="portfolioUploadContainer">
        @for ($i = 0; $i < 4; $i++)
            <div class="col-6 col-md-3 mb-3">
                <input type="file" name="portfolio_images[]" class="form-control portfolio-image-input @error('portfolio_images.' . $i) is-invalid @enderror" accept="image/jpeg" data-index="{{ $i }}">
                <small class="text-muted">Max: 5MB</small>
                @error('portfolio_images.' . $i)
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
                <div class="portfolio-image-preview mt-2" @if (!isset($view_business->portfolio_images[$i])) style="display: none;" @endif>
                    <img src="{{ isset($view_business->portfolio_images[$i]) ? asset('storage/portfolio_images/' . $view_business->portfolio_images[$i]) : '#' }}" alt="Portfolio Image Preview" class="img-thumbnail mb-2" style="max-height: 80px;">
                    <br>
                    <button type="button" class="btn btn-sm btn-danger remove-portfolio-image">Remove</button>
                </div>
            </div>
        @endfor
    </div>
</div>
                            </div>
                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-secondary prev-step"><i class="fa-solid fa-arrow-left-long me-2"></i> Previous</button>
                                <button type="button" class="btn btn-primary next-step">Next Step <i class="fa-solid fa-arrow-right-long ms-2"></i></button>
                            </div>
                        </div>
                        <div class="wizard-step" id="step-3">
                            <h4 class="mb-4 text-primary">3. Contact & Location Info</h4>
                            <div class="row">
                                <div class="col-lg-12 mt-4">
                                    <h5 class="mb-3">Social Media Links <span class="text-muted">(Optional)</span></h5>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="facebook" class="form-label">Facebook URL</label>
                                    <input type="url" name="facebook" class="form-control @error('facebook') is-invalid @enderror" id="facebook" placeholder="https://facebook.com/your-business" value="{{ old('facebook', $view_business->facebook ?? '') }}">
                                    @error('facebook')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="instagram" class="form-label">Instagram URL</label>
                                    <input type="url" name="instagram" class="form-control @error('instagram') is-invalid @enderror" id="instagram" placeholder="https://instagram.com/your-business" value="{{ old('instagram', $view_business->instagram ?? '') }}">
                                    @error('instagram')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="twitter" class="form-label">Twitter URL</label>
                                    <input type="url" name="twitter" class="form-control @error('twitter') is-invalid @enderror" id="twitter" placeholder="https://twitter.com/your-business" value="{{ old('twitter', $view_business->twitter ?? '') }}">
                                    @error('twitter')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-lg-12 mt-4">
                                    <h5 class="mb-3">Business Contact Information</h5>
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="contact_name" class="form-label">Contact Person Name <span class="text-danger">*</span></label>
                                    <input type="text" name="contact_name" class="form-control @error('contact_name') is-invalid @enderror" id="contact_name" placeholder="Full Name" value="{{ old('contact_name', $view_business->contact_name ?? '') }}">
                                    @error('contact_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                    <input type="tel" name="phone_number" class="form-control @error('phone_number') is-invalid @enderror" id="phone" placeholder="e.g., +91 9876543210" value="{{ old('phone_number', $view_business->phone_number ?? '') }}">
                                    @error('phone_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="whatsapp" class="form-label">WhatsApp Number</label>
                                    <input type="tel" name="whatsapp_number" class="form-control @error('whatsapp_number') is-invalid @enderror" id="whatsapp" placeholder="e.g., +91 9876543210 (Optional)" value="{{ old('whatsapp_number', $view_business->whatsapp_number ?? '') }}">
                                    @error('whatsapp_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="email@example.com" value="{{ old('email', $view_business->email ?? '') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="location" class="form-label">Street Address / Landmark <span class="text-danger">*</span></label>
                                    <input type="text" name="location" class="form-control @error('location') is-invalid @enderror" id="location" placeholder="House no, Street, Area" value="{{ old('location', $view_business->location ?? '') }}">
                                    @error('location')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <label for="state_id" class="form-label">Select State <span class="text-danger">*</span></label>
                                    <select name="state_id" id="state_id" class="form-select @error('state_id') is-invalid @enderror">
                                        <option value="">-- Choose State --</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}" {{ old('state_id', $view_business->state_id ?? '') == $state->id ? 'selected' : '' }}>{{ $state->state_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('state_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-lg-4 mb-3">
                                    <label for="district_id" class="form-label">Select District <span class="text-danger">*</span></label>
                                    <select name="district_id" id="district_id" class="form-select @error('district_id') is-invalid @enderror">
                                        <option value="">-- Choose District --</option>
                                        @if (old('district_id') || (isset($view_business->district_id) && $view_business->district_id))
                                            @foreach ($districts ?? [] as $district)
                                                <option value="{{ $district->id }}" {{ old('district_id', $view_business->district_id ?? '') == $district->id ? 'selected' : '' }}>{{ $district->district_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('district_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-lg-4 mb-3">
                                    <label for="taluk_id" class="form-label">Select Taluk <span class="text-danger">*</span></label>
                                    <select name="taluk_id" id="taluk_id" class="form-select @error('taluk_id') is-invalid @enderror">
                                        <option value="">-- Choose Taluk --</option>
                                        @if (old('taluk_id') || (isset($view_business->taluk_id) && $view_business->taluk_id))
                                            @foreach ($taluks ?? [] as $taluk)
                                                <option value="{{ $taluk->id }}" {{ old('taluk_id', $view_business->taluk_id ?? '') == $taluk->id ? 'selected' : '' }}>{{ $taluk->taluk_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @error('taluk_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-secondary prev-step"><i class="fa-solid fa-arrow-left-long me-2"></i> Previous</button>
                                <button type="button" class="btn btn-primary next-step">Next Step <i class="fa-solid fa-arrow-right-long ms-2"></i></button>
                            </div>
                        </div>
                        <div class="wizard-step" id="step-4">
                            <h4 class="mb-4 text-primary">4. Business Hours & Availability</h4>

                            <div class="mb-4">
                                <h5 class="mb-3">Standard Business Hours</h5>
                                <div class="row align-items-center mb-3">
                                    <div class="col-md-2">
                                        <label class="form-label fw-bold">Mon - Fri</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" name="mon_fri" class="form-control @error('mon_fri') is-invalid @enderror" placeholder="9:00 AM - 5:00 PM or 'Closed'" value="{{ old('mon_fri', $view_business->mon_fri ?? '9:00 AM - 5:00 PM') }}">
                                        @error('mon_fri')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row align-items-center mb-3">
                                    <div class="col-md-2">
                                        <label class="form-label fw-bold">Saturday</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" name="saturday" class="form-control @error('saturday') is-invalid @enderror" placeholder="9:00 AM - 2:00 PM or 'Closed'" value="{{ old('saturday', $view_business->saturday ?? '9:00 AM - 2:00 PM') }}">
                                        @error('saturday')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row align-items-center mb-3">
                                    <div class="col-md-2">
                                        <label class="form-label fw-bold">Sunday</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" name="sunday" class="form-control @error('sunday') is-invalid @enderror" placeholder="Closed or '9:00 AM - 1:00 PM'" value="{{ old('sunday', $view_business->sunday ?? 'Closed') }}">
                                        @error('sunday')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                           

<div class="mb-4">
    <h5 class="mb-3">Mark Specific Availability <span class="text-muted">(e.g., holidays, special events)</span></h5>
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="available_dates" class="form-label fw-bold text-success">Available Dates</label>
            <input type="text" id="available_dates" name="available_dates"
                   class="form-control flatpickr-input @error('available_dates') is-invalid @enderror"
                   value="{{ old('available_dates', $view_business->available_dates ?? '') }}" placeholder="Select Available Dates" readonly>
            @error('available_dates')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-md-6 mb-3">
            <label for="unavailable_dates" class="form-label fw-bold text-danger">Unavailable Dates</label>
            <input type="text" id="unavailable_dates" name="unavailable_dates"
                   class="form-control flatpickr-input @error('unavailable_dates') is-invalid @enderror"
                   value="{{ old('unavailable_dates', $view_business->unavailable_dates ?? '') }}" placeholder="Select Unavailable Dates" readonly>
            @error('unavailable_dates')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>


                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-secondary prev-step"><i class="fa-solid fa-arrow-left-long me-2"></i> Previous</button>
                                <button type="button" class="btn btn-primary next-step">Next Step <i class="fa-solid fa-arrow-right-long ms-2"></i></button>
                            </div>
                        </div>
                        <div class="wizard-step" id="step-5">
                            <h4 class="mb-4 text-primary">5. Room Details (Optional)</h4>

                            <div id="room-details-container">
                            </div>

                            <button type="button" class="btn btn-outline-success mt-3" id="addAnotherRoomType">
                                <i class="fa-solid fa-plus-circle me-2"></i> Add Another Room Type
                            </button>

                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-secondary prev-step"><i class="fa-solid fa-arrow-left-long me-2"></i> Previous</button>
                                <button type="submit" class="btn btn-success px-5"><i class="fa-solid fa-check-circle me-2"></i> Submit Service</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



<template id="room-template">
    <div class="card mb-4 room-section border">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 text-primary">Room Type Details</h5>
            <button type="button" class="btn btn-sm btn-outline-danger remove-room-type">
                <i class="fa-solid fa-trash-alt me-2"></i> Remove Room Type
            </button>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <label for="room_name_ROOM_INDEX" class="form-label">Room Type Name</label>
                    <input type="text" name="rooms[ROOM_INDEX][room_name]" id="room_name_ROOM_INDEX"
                        class="form-control" placeholder="E.g., Standard Room, Deluxe Suite">
                </div>
                <div class="col-lg-4 mb-3">
                    <label for="available_room_ROOM_INDEX" class="form-label">Number of Rooms Available</label>
                    <input type="number" name="rooms[ROOM_INDEX][available_room]" id="available_room_ROOM_INDEX"
                        class="form-control" min="0" value="1">
                </div>
                <div class="col-lg-4 mb-3">
                    <label for="amount_ROOM_INDEX" class="form-label">Price per Night (Optional)</label>
                    <input type="number" name="rooms[ROOM_INDEX][amount]" id="amount_ROOM_INDEX"
                        class="form-control" step="0.01" min="0" placeholder="0.00">
                </div>
            </div>
            <div class="row room-image-upload-container mt-3">
                <div class="col-lg-12 mb-3">
                    <label class="form-label">Room Images <span class="text-muted">(Upload up to 4)</span></label>
                </div>
                @for ($j = 0; $j < 4; $j++)
                    <div class="col-6 col-md-3 mb-3">
                        <input type="file" name="rooms[ROOM_INDEX][images][{{ $j }}]" class="form-control room-image-input" accept="image/jpeg, image/png">
                        <small class="text-muted">Max: 5MB</small>
                        <div class="room-image-preview mt-2" style="display: none;">
                            <img src="#" alt="Room Image Preview" class="img-thumbnail mb-2" style="max-height: 80px;">
                            <br>
                            <button type="button" class="btn btn-sm btn-danger remove-room-image">Remove</button>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
</template>



@endsection

@section('footer')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>




<script>
    function redirectToPreviousPage() {
        window.history.back();
    }

    // Function to handle image preview and removal for any file input
    function setupImagePreview(inputElement, previewContainer, imageElement, removeButton) {
        inputElement.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imageElement.src = e.target.result;
                    previewContainer.style.display = 'block';
                };
                reader.readAsDataURL(this.files[0]);
            } else {
                imageElement.src = '#';
                previewContainer.style.display = 'none';
            }
        });

        removeButton.addEventListener('click', function() {
            inputElement.value = ''; // Clear the file input
            imageElement.src = '#';
            previewContainer.style.display = 'none';
        });

        // Initial check for existing image
        if (imageElement.src && imageElement.src !== window.location.href + '#') {
            previewContainer.style.display = 'block';
        }
    }


    document.getElementById('addMoreServices').addEventListener('click', function() {
        const container = document.getElementById('service-inputs-container');
        const inputWrapper = document.createElement('div');
        inputWrapper.className = 'd-flex mb-2 align-items-center';
        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'services[]';
        input.className = 'form-control';
        input.placeholder = 'Your Service';

        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'btn btn-sm btn-outline-danger ms-2 remove-service-field';
        removeButton.innerHTML = '<i class="fa-solid fa-times"></i> Remove';
        removeButton.onclick = function() {
            inputWrapper.remove();
        };

        inputWrapper.appendChild(input);
        inputWrapper.appendChild(removeButton);
        container.appendChild(inputWrapper);
    });

    document.getElementById('service-inputs-container').addEventListener('click', function(event) {
        if (event.target.classList.contains('remove-service-field') || event.target.closest('.remove-service-field')) {
            const button = event.target.closest('.remove-service-field');
            button.closest('.d-flex.mb-2.align-items-center').remove();
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const wizardSteps = document.querySelectorAll('.wizard-step');
        let currentStep = 0;

        function showStep(stepIndex) {
            wizardSteps.forEach((step, index) => {
                step.style.display = (index === stepIndex) ? 'block' : 'none';
            });
        }

        document.querySelectorAll('.next-step').forEach(button => {
            button.addEventListener('click', function() {
                if (currentStep < wizardSteps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });

        document.querySelectorAll('.prev-step').forEach(button => {
            button.addEventListener('click', function() {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        const firstErrorStep = document.querySelector('.wizard-step .is-invalid');
        if (firstErrorStep) {
            let errorStepParent = firstErrorStep.closest('.wizard-step');
            if (errorStepParent) {
                currentStep = Array.from(wizardSteps).indexOf(errorStepParent);
            }
        }
        showStep(currentStep);

        // Business Profile Image Setup
        const businessProfileInput = document.getElementById('businessProfileInput');
        const businessProfilePreview = document.getElementById('businessProfilePreview');
        const businessProfileImage = document.getElementById('businessProfileImage');
        const removeBusinessProfile = document.getElementById('removeBusinessProfile');

        setupImagePreview(businessProfileInput, businessProfilePreview, businessProfileImage, removeBusinessProfile);

        // Populate existing business profile image on load
        const existingBusinessProfile = "{{ $view_business->business_profile ?? '' }}";
        if (existingBusinessProfile) {
            businessProfileImage.src = "{{ asset('storage/business_profiles/') }}" + "/" + existingBusinessProfile;
            businessProfilePreview.style.display = 'block';
        }


        // Portfolio Images Setup
        document.querySelectorAll('.portfolio-image-input').forEach(input => {
            const index = input.dataset.index;
            const previewContainer = input.nextElementSibling.nextElementSibling; // Get the div after small tag
            const imageElement = previewContainer.querySelector('img');
            const removeButton = previewContainer.querySelector('.remove-portfolio-image');
            setupImagePreview(input, previewContainer, imageElement, removeButton);
        });

    });

    const getDistrictsURL = "{{ url('/get-districts') }}";
    const getTaluksURL = "{{ url('/get-taluks') }}";

    document.addEventListener('DOMContentLoaded', function() {
        const stateDropdown = document.getElementById('state_id');
        const districtDropdown = document.getElementById('district_id');
        const talukDropdown = document.getElementById('taluk_id');

        function loadDistricts(stateId, selectedDistrictId = null) {
            districtDropdown.innerHTML = '<option value="">-- Choose District --</option>';
            talukDropdown.innerHTML = '<option value="">-- Choose Taluk --</option>';

            if (stateId) {
                fetch(`${getDistrictsURL}?state_id=${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(district => {
                            const option = document.createElement('option');
                            option.value = district.id;
                            option.textContent = district.district_name;
                            if (selectedDistrictId && selectedDistrictId == district.id) {
                                option.selected = true;
                            }
                            districtDropdown.appendChild(option);
                        });
                        if (selectedDistrictId) {
                            loadTaluks(selectedDistrictId, "{{ old('taluk_id', $view_business->taluk_id ?? '') }}");
                        }
                    })
                    .catch(error => console.error('Error fetching districts:', error));
            }
        }

        function loadTaluks(districtId, selectedTalukId = null) {
            talukDropdown.innerHTML = '<option value="">-- Choose Taluk --</option>';

            if (districtId) {
                fetch(`${getTaluksURL}?district_id=${districtId}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(taluk => {
                            const option = document.createElement('option');
                            option.value = taluk.id;
                            option.textContent = taluk.taluk_name;
                            if (selectedTalukId && selectedTalukId == taluk.id) {
                                option.selected = true;
                            }
                            talukDropdown.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error fetching taluks:', error));
            }
        }

        stateDropdown.addEventListener('change', function() {
            const stateId = this.value;
            loadDistricts(stateId);
        });

        districtDropdown.addEventListener('change', function() {
            const districtId = this.value;
            loadTaluks(districtId);
        });
        const initialSelectedState = stateDropdown.value;
        const initialSelectedDistrict = "{{ old('district_id', $view_business->district_id ?? '') }}";
        if (initialSelectedState) {
            loadDistricts(initialSelectedState, initialSelectedDistrict);
        }
    });
</script>



<script>
    let selectedAvailable = [];
    let selectedUnavailable = [];

    function updateUnavailablePicker() {
        unavailablePicker.set('disable', selectedAvailable);
    }

    function updateAvailablePicker() {
        availablePicker.set('disable', selectedUnavailable);
    }

    const availablePicker = flatpickr("#available_dates", {
        mode: "multiple",
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        theme: "airbnb",
        disable: selectedUnavailable,
        onChange: function(selectedDates, dateStr) {
            selectedAvailable = selectedDates.map(d => flatpickr.formatDate(d, "Y-m-d"));
            updateUnavailablePicker();
        },
        onDayCreate: function(dObj, dStr, fp, dayElem) {
            const date = dayElem.dateObj;
            const formatted = flatpickr.formatDate(date, "Y-m-d");
            if (selectedAvailable.includes(formatted)) {
                dayElem.classList.add("available");
            }
        }
    });

    const unavailablePicker = flatpickr("#unavailable_dates", {
        mode: "multiple",
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        theme: "airbnb",
        disable: selectedAvailable,
        onChange: function(selectedDates, dateStr) {
            selectedUnavailable = selectedDates.map(d => flatpickr.formatDate(d, "Y-m-d"));
            updateAvailablePicker();
        },
        onDayCreate: function(dObj, dStr, fp, dayElem) {
            const date = dayElem.dateObj;
            const formatted = flatpickr.formatDate(date, "Y-m-d");
            if (selectedUnavailable.includes(formatted)) {
                dayElem.classList.add("unavailable");
            }
        }
    });
</script>




<script>
document.addEventListener('DOMContentLoaded', function () {
    const roomDetailsContainer = document.getElementById('room-details-container');
    const roomTemplate = document.getElementById('room-template');
    let roomIndex = 0;

    function setupImagePreview(input, previewContainer, imageElement, removeButton) {
        input.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    imageElement.src = e.target.result;
                    previewContainer.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        removeButton.addEventListener('click', function () {
            input.value = '';
            imageElement.src = '#';
            previewContainer.style.display = 'none';
        });
    }

    function addRoomSection(roomData = null) {
        const clone = roomTemplate.content.cloneNode(true);
        const roomSection = clone.querySelector('.room-section');

        // Replace ROOM_INDEX in inputs and labels
        roomSection.querySelectorAll('[name*="ROOM_INDEX"]').forEach(input => {
            input.name = input.name.replace(/ROOM_INDEX/g, roomIndex);
            if (input.id) {
                input.id = input.id.replace(/ROOM_INDEX/g, roomIndex);
            }
        });

        roomSection.querySelectorAll('label[for*="ROOM_INDEX"]').forEach(label => {
            label.htmlFor = label.htmlFor.replace(/ROOM_INDEX/g, roomIndex);
        });

        // Set data if available
        if (roomData) {
            roomSection.querySelectorAll('input').forEach(input => {
                const match = input.name.match(/\[(room_name|available_room|amount)\]$/);
                if (match && roomData[match[1]] !== undefined) {
                    input.value = roomData[match[1]];
                }
            });

            if (roomData.images && Array.isArray(roomData.images)) {
                roomData.images.forEach((imagePath, imgIndex) => {
                    const fileInput = roomSection.querySelector(`input[name="rooms[${roomIndex}][images][${imgIndex}]"]`);
                    const previewContainer = fileInput?.nextElementSibling?.nextElementSibling;
                    const imageElement = previewContainer?.querySelector('img');
                    const removeButton = previewContainer?.querySelector('.remove-room-image');

                    if (imagePath && imageElement && previewContainer && removeButton) {
                        imageElement.src = `/storage/room_images/${imagePath}`;
                        previewContainer.style.display = 'block';
                        setupImagePreview(fileInput, previewContainer, imageElement, removeButton);
                    }
                });
            }
        }

        // Remove button
        roomSection.querySelector('.remove-room-type').addEventListener('click', function () {
            roomSection.remove();
        });

        // Setup image previews
        roomSection.querySelectorAll('.room-image-input').forEach(input => {
            const previewContainer = input.nextElementSibling.nextElementSibling;
            const imageElement = previewContainer.querySelector('img');
            const removeButton = previewContainer.querySelector('.remove-room-image');
            setupImagePreview(input, previewContainer, imageElement, removeButton);
        });

        roomDetailsContainer.appendChild(clone);
        roomIndex++;
    }

    // Button click to add section
    document.getElementById('addAnotherRoomType').addEventListener('click', function () {
        addRoomSection();
    });

    // Load existing or old rooms
    const oldRoomsJson = `{!! json_encode(old('rooms') ?? []) !!}`;
    const existingRoomsJson = `{!! json_encode($view_business->rooms ?? []) !!}`;

    let roomsToLoad = [];
    try {
        const oldRooms = JSON.parse(oldRoomsJson);
        if (Object.keys(oldRooms).length > 0) {
            roomsToLoad = Object.values(oldRooms);
        } else {
            const existingRooms = JSON.parse(existingRoomsJson);
            if (Array.isArray(existingRooms)) {
                roomsToLoad = existingRooms;
            }
        }
    } catch (e) {
        console.error("Error parsing room data:", e);
    }

    if (roomsToLoad.length > 0) {
        roomsToLoad.forEach(room => {
            addRoomSection(room);
        });
    } else {
        addRoomSection();
    }
});
</script>





@endsection