@extends('admin.layout')
@section('title', 'Business Profile Viewe')
@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('update_business_post', ['business_id' => $business->id]) }}" method="POST"
                            enctype="multipart/form-data" id="wizardForm">
                            @csrf
                            <input type="hidden" name="business_id" value="{{ $business->id }}">
                            <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 for="business-name" class="form-label">Business Name 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', $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"
        class="form-control @error('business_profile') is-invalid @enderror"
        accept="image/jpeg,image/png,image/jfif"
    >

    <small class="text-muted">
        Max file size: 5MB, JPG/PNG only
    </small>

    @error('business_profile')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror

    @php
        $businessProfileUrl = null;

        $digitalOceanBaseUrl =
            'https://dstone.sfo3.digitaloceanspaces.com';

        if (!empty($business?->business_profile)) {

            $storedProfile = trim(
                $business->business_profile
            );

            /*
            |--------------------------------------------------------------------------
            | Full URL என்றால் path மட்டும் எடுக்கவும்
            |--------------------------------------------------------------------------
            */
            if (
                str_starts_with($storedProfile, 'http://') ||
                str_starts_with($storedProfile, 'https://')
            ) {
                $storedPath = parse_url(
                    $storedProfile,
                    PHP_URL_PATH
                );
            } else {
                $storedPath = $storedProfile;
            }

            /*
            |--------------------------------------------------------------------------
            | எந்த folder/path இருந்தாலும் filename மட்டும் எடுக்கவும்
            |--------------------------------------------------------------------------
            */
            $fileName = basename(
                rawurldecode(
                    (string) $storedPath
                )
            );

            /*
            |--------------------------------------------------------------------------
            | Use working DigitalOcean business_profile path
            |--------------------------------------------------------------------------
            */
            if (!empty($fileName)) {
                $businessProfileUrl =
                    rtrim($digitalOceanBaseUrl, '/') .
                    '/business_profile/' .
                    rawurlencode($fileName);
            }
        }
    @endphp

    @if($businessProfileUrl)

        <img
            src="{{ $businessProfileUrl }}"
            alt="Business Profile Image"
            class="img-thumbnail mt-2"
            style="
                max-width: 250px;
                max-height: 200px;
                object-fit: cover;
            "
            loading="lazy"
            onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='block';
            "
        >

        <p
            class="text-danger mt-2"
            style="display:none;"
        >
            Image not found
        </p>

    @else

        <p class="text-muted mt-2">
            No business profile image available.
        </p>

    @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 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_intam', $business->about_us_intam ?? '') }}</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 (empty($services)) {
                                                    $decoded = json_decode($business->service ?? '[]', true);

                                                    if (is_array($decoded)) {
                                                        $services = $decoded;
                                                    } else {
                                                        $services = explode(',', $business->service ?? '');
                                                        $services = array_map('trim', $services);
                                                    }
                                                    if (empty($services)) {
                                                        $services = [''];
                                                    }
                                                }
                                            @endphp

                                            {{-- Render service inputs --}}
                                            @foreach ($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="{{ old('services.' . $index, $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
                                            @endforeach
                                        </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 = [];

            $storedPortfolio =
                $business?->portfolio ?? [];

            if (is_array($storedPortfolio)) {
                $portfolioImages =
                    $storedPortfolio;
            } elseif (!empty($storedPortfolio)) {
                $decodedPortfolio =
                    json_decode(
                        $storedPortfolio,
                        true
                    );

                if (
                    json_last_error() === JSON_ERROR_NONE &&
                    is_array($decodedPortfolio)
                ) {
                    $portfolioImages =
                        $decodedPortfolio;
                }
            }

            $portfolioImages =
                array_values(
                    array_filter(
                        $portfolioImages
                    )
                );
        @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]))

                    @php
                        $storedImage = trim(
                            (string) $portfolioImages[$i]
                        );

                        /*
                        |--------------------------------------------------------------------------
                        | Get path from full URL or stored local path
                        |--------------------------------------------------------------------------
                        */
                        if (
                            str_starts_with(
                                $storedImage,
                                'http://'
                            ) ||
                            str_starts_with(
                                $storedImage,
                                'https://'
                            )
                        ) {
                            $storedPath = parse_url(
                                $storedImage,
                                PHP_URL_PATH
                            );
                        } else {
                            $storedPath =
                                $storedImage;
                        }

                        /*
                        |--------------------------------------------------------------------------
                        | Get filename and create DigitalOcean URL
                        |--------------------------------------------------------------------------
                        */
                        $portfolioFileName =
                            basename(
                                rawurldecode(
                                    (string) $storedPath
                                )
                            );

                        $portfolioImageUrl = null;

                        if (!empty($portfolioFileName)) {
                            $portfolioImageUrl =
                                'https://dstone.sfo3.digitaloceanspaces.com/portfolio/' .
                                rawurlencode(
                                    $portfolioFileName
                                );
                        }
                    @endphp

                    @if($portfolioImageUrl)

                        <img
                            src="{{ $portfolioImageUrl }}"
                            alt="Portfolio Image"
                            class="img-thumbnail mt-2"
                            style="
                                width: 100%;
                                height: 150px;
                                object-fit: cover;
                            "
                        >

                    @endif

                    <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_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>
                                            @foreach ($districts as $district)
                                                <option value="{{ $district->id }}"
                                                    {{ old('district_id', $business->district_id ?? '') == $district->id ? 'selected' : '' }}>
                                                    {{ $district->district_name }}
                                                </option>
                                            @endforeach
                                        </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>
                                            @foreach ($taluks as $taluk)
                                                <option value="{{ $taluk->id }}"
                                                    {{ old('taluk_id', $business->taluk_id ?? '') == $taluk->id ? 'selected' : '' }}>
                                                    {{ $taluk->taluk_name }}
                                                </option>
                                            @endforeach
                                        </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>
                                7

                                <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
                                        <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>

                                            </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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>`

    <script>
        $(document).ready(function() {
            // Redirect to previous page
            window.redirectToPreviousPage = function() {
                window.history.back();
            };

            // Add More Services
            $('#addMoreServices').on('click', function() {
                const inputWrapper = $('<div class="d-flex mb-2 align-items-center"></div>');
                const input = $(
                    '<input type="text" name="services[]" class="form-control" placeholder="Your Service">'
                );
                const removeButton = $(
                    '<button type="button" class="btn btn-sm btn-outline-danger ms-2 remove-service-field"><i class="fa-solid fa-times"></i> Remove</button>'
                );

                inputWrapper.append(input, removeButton);
                $('#service-inputs-container').append(inputWrapper);
            });

            // Remove Service Field using event delegation
            $('#service-inputs-container').on('click', '.remove-service-field', function() {
                $(this).closest('.d-flex.mb-2.align-items-center').remove();
            });

            // Wizard Step Functionality
            const wizardSteps = $('.wizard-step');
            let currentStep = 0;

            function showStep(stepIndex) {
                wizardSteps.hide();
                $(wizardSteps[stepIndex]).show();
            }

            $('.next-step').on('click', function() {
                if (currentStep < wizardSteps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                }
            });

            $('.prev-step').on('click', function() {
                if (currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });

            // Determine initial step if there's a validation error
            const firstErrorField = $('.wizard-step .is-invalid').first();
            if (firstErrorField.length) {
                const errorStepParent = firstErrorField.closest('.wizard-step');
                if (errorStepParent.length) {
                    currentStep = wizardSteps.index(errorStepParent);
                }
            }
            showStep(currentStep);

            // URLs for fetching districts and taluks
            const getDistrictsURL = "{{ url('/get-districts') }}"; // Updated route name
            const getTaluksURL = "{{ url('/get-taluks') }}"; // Updated route name

            const stateDropdown = $('#state_id');
            const districtDropdown = $('#district_id');
            const talukDropdown = $('#taluk_id');

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

                if (stateId) {
                    $.getJSON(getDistrictsURL, {
                        state_id: stateId
                    }, function(data) {
                        $.each(data, function(key, district) {
                            districtDropdown.append(
                                $('<option></option>').val(district.id).text(district
                                    .district_name)
                            );
                        });
                        if (selectedDistrictId) {
                            districtDropdown.val(selectedDistrictId);
                            const districtExists = data.some(d => d.id == selectedDistrictId);
                            if (districtExists) {
                                loadTaluks(selectedDistrictId,
                                    "{{ old('taluk_id', $business->taluk_id ?? '') }}");
                            }
                        }
                    }).fail(function(jqxhr, textStatus, error) {
                        console.error('Error fetching districts:', textStatus, error);
                    });
                }
            }

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

                if (districtId) {
                    $.getJSON(getTaluksURL, {
                        district_id: districtId
                    }, function(data) {
                        $.each(data, function(key, taluk) {
                            talukDropdown.append(
                                $('<option></option>').val(taluk.id).text(taluk.taluk_name)
                            );
                        });
                        if (selectedTalukId) {
                            talukDropdown.val(selectedTalukId);
                        }
                    }).fail(function(jqxhr, textStatus, error) {
                        console.error('Error fetching taluks:', textStatus, error);
                    });
                }
            }

            stateDropdown.on('change', function() {
                const stateId = $(this).val();
                loadDistricts(stateId);
            });

            districtDropdown.on('change', function() {
                const districtId = $(this).val();
                loadTaluks(districtId);
            });

            // Initial load for districts and taluks based on old input or existing business data
            const initialSelectedState = "{{ old('state_id', $business->state_id ?? '') }}";
            const initialSelectedDistrict = "{{ old('district_id', $business->district_id ?? '') }}";

            if (initialSelectedState) {
                loadDistricts(initialSelectedState, initialSelectedDistrict);
            } else {
                districtDropdown.empty().append('<option value="">-- Choose District --</option>');
                talukDropdown.empty().append('<option value="">-- Choose Taluk --</option>');
            }

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