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

    <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('edit_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', $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', $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', $business->business_name ?? '') }}">
                                        @error('business_name')
                                            <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"
                                            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
                                        {{-- Display existing image if available --}}
                                        @if (isset($business->business_profile) && $business->business_profile)
                                            <img src="{{ asset('path/to/your/business_profiles/' . $business->business_profile) }}"
                                                alt="Business Profile Image" class="img-thumbnail mt-2"
                                                style="max-height: 80px;">
                                        @endif
                                    </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', $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">
                                            @php
                                                $services = old('services');

                                                if (is_null($services)) {
                                                    $decoded = json_decode($business->service, true);
                                                    $services = is_array($decoded) ? $decoded : [];
                                                }
                                            @endphp

                                            @forelse ($services as $index => $service)
                                                <div class="d-flex mb-2 align-items-center">
                                                    <input type="text" name="services[]"
                                                        class="form-control @error('services.' . $index) is-invalid @enderror"
                                                        placeholder="E.g., Wedding Photography, Interior Design, Plumbing Services"
                                                        value="{{ $service }}">
                                                    @if ($index > 0)
                                                        <button type="button"
                                                            class="btn btn-sm btn-outline-danger ms-2 remove-service-field"><i
                                                                class="fa-solid fa-times"></i> Remove</button>
                                                    @endif
                                                </div>
                                                @error('services.' . $index)
                                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                                @enderror
                                            @empty
                                                <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="">
                                                    @error('services.0')
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            @endforelse
                                        </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">
                                            @php
                                                $portfolioImages = $business->portfolio
                                                    ? json_decode($business->portfolio, true)
                                                    : [];
                                            @endphp
                                            @for ($i = 0; $i < 4; $i++)
                                                <div class="col-6 col-md-3 mb-3">
                                                    <input type="file" name="portfolio_images[]"
                                                        class="form-control @error('portfolio_images.' . $i) is-invalid @enderror"
                                                        accept="image/jpeg">
                                                    <small class="text-muted">Max: 5MB</small>
                                                    @error('portfolio_images.' . $i)
                                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                                    @enderror
                                                    @if (isset($portfolioImages[$i]))
                                                        <img src="{{ asset('path/to/your/portfolio_images/' . $portfolioImages[$i]) }}"
                                                            alt="Portfolio Image" class="img-thumbnail mt-2"
                                                            style="max-height: 80px;">
                                                        <input type="hidden" name="existing_portfolio_images[]"
                                                            value="{{ $portfolioImages[$i] }}">
                                                    @endif
                                                </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', $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', $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', $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', $business->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', $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', $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', $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', $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', $business->state ?? '') == $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($business->district) && $business->district))
                                                {{-- You'll likely need an AJAX call here to populate districts based on the selected state --}}
                                                {{-- For now, if the district is already set in $business, display it --}}
                                                <option value="{{ $business->district }}" selected>{{-- District Name --}}
                                                </option>
                                            @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($business->taluk) && $business->taluk))
                                                {{-- You'll likely need an AJAX call here to populate taluks based on the selected district --}}
                                                {{-- For now, if the taluk is already set in $business, display it --}}
                                                <option value="{{ $business->taluk }}" selected>{{-- Taluk Name --}}
                                                </option>
                                            @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', $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', $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', $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 align-items-end">
                                        <div class="col-md-3 mb-3">
                                            <label for="year" class="form-label">Select Year</label>
                                            <select name="year" id="year"
                                                class="form-control @error('year') is-invalid @enderror">
                                                @php
                                                    $currentYear = date('Y');
                                                    $selectedYear = old('year', $business->year ?? $currentYear);
                                                @endphp
                                                @for ($y = $currentYear; $y <= $currentYear + 5; $y++)
                                                    <option value="{{ $y }}"
                                                        {{ $selectedYear == $y ? 'selected' : '' }}>{{ $y }}
                                                    </option>
                                                @endfor
                                            </select>
                                            @error('year')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 mb-3">
                                            <label for="month" class="form-label">Select Month</label>
                                            <select name="month" id="month"
                                                class="form-control @error('month') is-invalid @enderror">
                                                @for ($m = 1; $m <= 12; $m++)
                                                    <option value="{{ $m }}"
                                                        {{ old('month', $business->month ?? date('n')) == $m ? 'selected' : '' }}>
                                                        {{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                                @endfor
                                            </select>
                                            @error('month')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 mb-3">
                                            <label for="available_day" class="form-label">Available Day</label>
                                            <select name="available_day" id="available_day"
                                                class="form-control @error('available_day') is-invalid @enderror">
                                                <option value="">-- Choose Day --</option>
                                                @php
                                                    $selectedAvailableDay = old(
                                                        'available_day',
                                                        $business->available_date ?? '',
                                                    );
                                                    $daysInMonth = cal_days_in_month(
                                                        CAL_GREGORIAN,
                                                        old('month', $business->month ?? date('n')),
                                                        old('year', $business->year ?? date('Y')),
                                                    );
                                                @endphp
                                                @for ($d = 1; $d <= $daysInMonth; $d++)
                                                    <option value="{{ $d }}"
                                                        {{ $selectedAvailableDay == $d ? 'selected' : '' }}>
                                                        {{ $d }}</option>
                                                @endfor
                                            </select>
                                            @error('available_day')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 mb-3">
                                            <label for="unavailable_day" class="form-label">Unavailable Day</label>
                                            <select name="unavailable_day" id="unavailable_day"
                                                class="form-control @error('unavailable_day') is-invalid @enderror">
                                                <option value="">-- Choose Day --</option>
                                                @php
                                                    $selectedUnavailableDay = old(
                                                        'unavailable_day',
                                                        $business->unavailable_date ?? '',
                                                    );
                                                @endphp
                                                @for ($d = 1; $d <= $daysInMonth; $d++)
                                                    <option value="{{ $d }}"
                                                        {{ $selectedUnavailableDay == $d ? 'selected' : '' }}>
                                                        {{ $d }}</option>
                                                @endfor
                                            </select>
                                            @error('unavailable_day')
                                                <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">
                                    @php
                                        $rooms = $business->rooms ? json_decode($business->rooms, true) : [];
                                    @endphp
                                    @forelse ($rooms as $index => $room)
                                        <div class="room-type-entry mb-4 p-3 border rounded bg-light">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">Room Type {{ $index + 1 }}</h6>
                                                <button type="button"
                                                    class="btn btn-sm btn-outline-danger remove-room-type"><i
                                                        class="fa-solid fa-times"></i> Remove</button>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Room Type</label>
                                                    <input type="text" name="rooms[{{ $index }}][type_room]"
                                                        class="form-control"
                                                        placeholder="E.g., Standard Room, Deluxe Suite"
                                                        value="{{ old('rooms.' . $index . '.type_room', $room['type_room'] ?? '') }}">
                                                </div>
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Available Rooms</label>
                                                    <input type="number"
                                                        name="rooms[{{ $index }}][available_rooms]"
                                                        class="form-control" placeholder="Number of rooms"
                                                        value="{{ old('rooms.' . $index . '.available_rooms', $room['available_rooms'] ?? '') }}">
                                                </div>
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Amount per Room</label>
                                                    <input type="number" name="rooms[{{ $index }}][amount]"
                                                        class="form-control" placeholder="Amount (e.g., 1500)"
                                                        value="{{ old('rooms.' . $index . '.amount', $room['amount'] ?? '') }}">
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        {{-- Initial empty room entry if no rooms exist --}}
                                        <div class="room-type-entry mb-4 p-3 border rounded bg-light">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h6 class="mb-0">Room Type 1</h6>
                                                {{-- No remove button for the first empty one --}}
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Room Type</label>
                                                    <input type="text" name="rooms[0][type_room]" class="form-control"
                                                        placeholder="E.g., Standard Room, Deluxe Suite"
                                                        value="{{ old('rooms.0.type_room', '') }}">
                                                </div>
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Available Rooms</label>
                                                    <input type="number" name="rooms[0][available_rooms]"
                                                        class="form-control" placeholder="Number of rooms"
                                                        value="{{ old('rooms.0.available_rooms', '') }}">
                                                </div>
                                                <div class="col-lg-4 mb-3">
                                                    <label class="form-label">Amount per Room</label>
                                                    <input type="number" name="rooms[0][amount]" class="form-control"
                                                        placeholder="Amount (e.g., 1500)"
                                                        value="{{ old('rooms.0.amount', '') }}">
                                                </div>
                                            </div>
                                        </div>
                                    @endforelse
                                </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="room-section">
            <button type="button" class="remove-room-type" title="Remove this room type">
                <i class="fa-solid fa-times-circle"></i>
            </button>
            <div class="row">
                <div class="col-lg-4 mb-3">
                    <label class="form-label">Room Type/Name</label>
                    {{-- ROOM_INDEX will be replaced by JS --}}
                    <input type="text" name="rooms[ROOM_INDEX][room_name]" class="form-control"
                        placeholder="E.g., Standard Room, Deluxe Suite">
                    {{-- You would typically display Laravel validation error here if old() data is present --}}
                    {{-- @error('rooms.ROOM_INDEX.room_name') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror --}}
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Number of Available Rooms</label>
                    <input type="number" name="rooms[ROOM_INDEX][available_room]" class="form-control"
                        placeholder="e.g., 5" min="0">
                    {{-- @error('rooms.ROOM_INDEX.available_room') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror --}}
                </div>

                <div class="col-lg-4 mb-3">
                    <label class="form-label">Price per Room (per night/hour)</label>
                    <input type="number" name="rooms[ROOM_INDEX][amount]" class="form-control" placeholder="e.g., 1500"
                        min="0" step="0.01">
                    {{-- @error('rooms.ROOM_INDEX.amount') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror --}}
                </div>

                <div class="col-lg-12 mb-3 mt-4">
                    <label class="form-label">Room Images <span class="text-muted">(Upload up to 4, JPG
                            only)</span></label>
                    <div class="row room-image-upload-container">
                        @for ($i = 0; $i < 4; $i++)
                            <div class="col-6 col-md-3 mb-3">
                                <input type="file" name="rooms[ROOM_INDEX][images][{{ $i }}]"
                                    class="form-control" accept="image/jpeg">
                                <small class="text-muted">Max: 5MB</small>
                                {{-- @error('rooms.ROOM_INDEX.images.' . $i) <div class="invalid-feedback d-block">{{ $message }}</div> @enderror --}}
                                {{-- Placeholder for existing image thumbnail if needed for editing. Requires dynamic JS to show image based on $view_business->rooms data. --}}
                                {{-- <img src="{{ asset('path/to/your/room_images/' . 'some_image_name.jpg') }}" alt="Room Image" class="img-thumbnail mt-2" style="max-height: 80px;"> --}}
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </template>

@endsection

@section('footer')

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

        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);
        });

        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>
        const yearSelect = document.getElementById('year');
        const currentYear = new Date().getFullYear();
        const startYear = currentYear;
        const endYear = startYear + 10;

        for (let y = startYear; y <= endYear; y++) {
            const option = document.createElement('option');
            option.value = y;
            option.textContent = y;
            yearSelect.appendChild(option);
        }

        function getDaysInMonth(year, month) {
            return new Date(year, month, 0).getDate();
        }

        function populateDays() {
            const year = parseInt(yearSelect.value);
            const month = parseInt(document.getElementById('month').value);

            const daysInMonth = getDaysInMonth(year, month);

            const availableDaySelect = document.getElementById('available_day');
            const unavailableDaySelect = document.getElementById('unavailable_day');

            availableDaySelect.innerHTML = '<option value="">-- Select Day --</option>';
            unavailableDaySelect.innerHTML = '<option value="">-- Select Day --</option>';

            for (let d = 1; d <= daysInMonth; d++) {
                const optionAvailable = document.createElement('option');
                optionAvailable.value = d;
                optionAvailable.textContent = d;
                availableDaySelect.appendChild(optionAvailable);

                const optionUnavailable = document.createElement('option');
                optionUnavailable.value = d;
                optionUnavailable.textContent = d;
                unavailableDaySelect.appendChild(optionUnavailable);
            }

            const oldAvailableDay = "{{ old('available_day', $view_business->available_day ?? '') }}";
            if (oldAvailableDay) {
                availableDaySelect.value = oldAvailableDay;
            }
            const oldUnavailableDay = "{{ old('unavailable_day', $view_business->unavailable_day ?? '') }}";
            if (oldUnavailableDay) {
                unavailableDaySelect.value = oldUnavailableDay;
            }
        }

        yearSelect.addEventListener('change', populateDays);
        document.getElementById('month').addEventListener('change', populateDays);

        window.addEventListener('DOMContentLoaded', () => {
            yearSelect.value = "{{ old('year', date('Y')) }}";
            document.getElementById('month').value = "{{ old('month', date('n')) }}";
            populateDays();
        });
    </script>

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

            function addRoomSection(roomData = null) {
                const clone = roomTemplate.content.cloneNode(true);
                const roomSection = clone.querySelector('.room-section');
                roomSection.querySelectorAll('[name*="ROOM_INDEX"]').forEach(input => {
                    input.name = input.name.replace('ROOM_INDEX', roomIndex);
                });
                if (roomData) {
                    roomSection.querySelectorAll('input').forEach(input => {
                        const fieldNameMatch = input.name.match(/\[(room_name|available_room|amount)\]$/);
                        if (fieldNameMatch && roomData[fieldNameMatch[1]] !== undefined) {
                            input.value = roomData[fieldNameMatch[1]];
                        }
                    });
                    if (roomData.images && Array.isArray(roomData.images)) {
                        const imageInputContainers = roomSection.querySelectorAll(
                            '.room-image-upload-container .col-6.col-md-3.mb-3');
                        roomData.images.forEach((imagePath, imgIndex) => {
                            if (imagePath && imageInputContainers[imgIndex]) {
                                const imgPreview = document.createElement('img');
                                imgPreview.src = `/path/to/your/room_images/${imagePath}`;
                                imgPreview.alt = `Room Image ${imgIndex + 1}`;
                                imgPreview.className = 'img-thumbnail mt-2';
                                imgPreview.style.maxHeight = '80px';
                                imageInputContainers[imgIndex].appendChild(imgPreview);
                            }
                        });
                    }
                }
                roomSection.querySelector('.remove-room-type').addEventListener('click', function() {
                    roomSection.remove();
                });

                roomDetailsContainer.appendChild(clone);
                roomIndex++;
            }
            document.getElementById('addAnotherRoomType').addEventListener('click', function() {
                addRoomSection();
            });
            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) && existingRooms.length > 0) {
                        roomsToLoad = existingRooms;
                    }
                }
            } catch (e) {
                console.error("Error parsing room data:", e);
            }

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

@endsection