@extends('backend.layouts.app')
@section('title')
    {{ __('Edit Space') }}
@endsection
@section('content')
    <div class="main-content">
        <div class="page-title">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-xl-8">
                        <div class="title-content">
                            <h2 class="title">{{ __('Edit Space') }}</h2>
                            <a href="{{ url()->previous() }}" class="title-btn"><i
                                    data-lucide="corner-down-left"></i>{{ __('Back') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-xl-8">
                    <form action="{{ route('admin.space.update', $space->id) }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Basic Info') }}</h3>
                            </div>
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Title:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" name="title" class="box-input"
                                                value="{{ $space->title }}" placeholder="Title Here" required>
                                        </div>
                                    </div>
                                    @if (multiLocationEnabled())
                                        <div class="col-xl-6">
                                            <div class="site-input-groups">
                                                <label class="box-input-label" for="">
                                                    {{ __('Location:') }}
                                                    <span class="text-danger">*</span>
                                                </label>
                                                <div class="input-group joint-input">
                                                    <select name="location_id" id="location" class="form-select" required>
                                                        <option>Select Location</option>
                                                        @foreach ($locations as $location)
                                                            <option value="{{ $location->id }}"
                                                                @if ($location->id == $space->location_id) selected @endif>
                                                                {{ $location->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-xl-6 schema-name">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Space Type:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <select name="type_id" id="type_id" class="form-select" required>
                                                <option>Select Space Type</option>
                                                @foreach ($space_types as $type)
                                                    <option value="{{ $type->id }}"
                                                        @if ($type->id == $space->type_id) selected @endif>
                                                        {{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Sub Title:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group joint-input">
                                                <input type="text" name="sub_title" class="box-input"
                                                    value="{{ $space->sub_title }}" placeholder="Sub-title Here" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Stock:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group joint-input">
                                                <input type="text" name="stock" class="box-input"
                                                    value="{{ $space->stock }}" placeholder="Stock here" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Pricing') }}</h3>
                            </div>
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="col-xl-6" id="price">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Price:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group joint-input">
                                                <input type="text" class="form-control" name="price"
                                                    value="{{ $space->price }}" required/>
                                                <span class="input-group-text">{{ $currency }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Price Type:') }}
                                            </label>
                                            <select name="price_type" class="form-select" id="">
                                                <option value="hourly" data-text="Hours" @selected($space->price_type == 'hourly')>
                                                    {{ __('Per Hour') }}
                                                </option>
                                                <option value="daily" data-text="Days" @selected($space->price_type == 'daily')>
                                                    {{ __('Per Day') }}
                                                </option>
                                                <option value="weekly" data-text="Weeks" @selected($space->price_type == 'weekly')>
                                                    {{ __('Per Week') }}
                                                </option>
                                                <option value="monthly" data-text="Months" @selected($space->price_type == 'monthly')>
                                                    {{ __('Per Month') }}
                                                </option>
                                                <option value="yearly" data-text="Years" @selected($space->price_type == 'yearly')>
                                                    {{ __('Per Year') }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Duration Type:') }}
                                            </label>
                                            <div class="switch-field same-type">
                                                <input type="radio" id="durationTypeActive" name="duration_type"
                                                    value="fixed" @checked($space->duration_type === 'fixed') />
                                                <label for="durationTypeActive">{{ __('Fixed Time') }}</label>
                                                <input type="radio" id="durationTypeFlexible" name="duration_type"
                                                    value="flexible" @checked($space->duration_type === 'flexible') />
                                                <label for="durationTypeFlexible">{{ __('Flexible Time') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6" id="duration-area">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Enter Number Of Duration:') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <div class="input-group joint-input">
                                                <input type="text" class="form-control" name="fixed_duration"
                                                    value="{{ $space->fixed_duration }}" required/>
                                                <span class="input-group-text" id="duration-label"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Images') }}</h3>
                            </div>
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="site-input-groups row">
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-label">
                                            {{ __('Banner Image') }} <span class="text-danger">*</span><i icon-name="info" data-bs-toggle="tooltip"
                                                title="" data-bs-original-title="Space Banner image"></i>
                                        </div>
                                        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                            <div class="wrap-custom-file">
                                                <input type="file" name="banner_image" id="banner_image"
                                                    accept=".gif, .jpg, .png" />
                                                <label for="banner_image" class="file-ok"
                                                    style="background-image: url({{ asset($space->banner_image) }})">
                                                    <span>{{ __('Upload Banner Image') }}</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="site-input-groups row" id="galleries-section">
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-label">
                                            {{ __('Galleries') }} <span class="text-danger">*</span>
                                            <i icon-name="info" data-bs-toggle="tooltip" title=""
                                                data-bs-original-title="Space Galleries"></i>
                                        </div>
                                        <input type="hidden" name="old_galleries"
                                            value="{{ json_encode(array_values($space->galleries)) }}" />
                                        @php
                                            $galleries = $space->galleries;
                                        @endphp
                                        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                            <div class="row gallery-group">
                                                @foreach ($galleries as $gallery)
                                                    <div class="col-xl-6 gallery-item">
                                                        <div class="wrap-custom-file">
                                                            <input type="file" name="galleries[]" id="galleries1"
                                                                accept=".gif, .jpg, .png" />
                                                            <label for="banner_image" class="file-ok"
                                                                style="background-image: url({{ asset($gallery) }})">
                                                                <img class="upload-icon"
                                                                    src="{{ asset('global/materials/upload.svg') }}"
                                                                    alt="" />

                                                                <span>{{ __('Upload Galleries') }}</span>
                                                            </label>
                                                            <div class="close" id="remove-btn"
                                                                data-index="{{ $loop->index }}">
                                                                <i data-lucide="x"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <button type="button" class="site-btn-sm primary-btn"
                                            id="add-more-galleries">{{ __('Add More') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Highlight Services') }}</h3>
                            </div>
                            @php
                                $services = json_decode($space->services, true);
                            @endphp
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('First Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }}</a>
                                            </label>
                                            <input type="text" name="first_icon" class="box-input" required
                                                value="{{ $services['first_icon'] }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('First Title') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="first_title" class="box-input" required
                                                value="{{ $services['first_title'] }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Second Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }}</a>
                                            </label>
                                            <input type="text" name="second_icon" class="box-input" required
                                                value="{{ $services['second_icon'] }}">
                                        </div>
                                    </div>

                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for=""
                                                class="box-input-label">{{ __('Second Title') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="second_title" class="box-input" required
                                                value="{{ $services['second_title'] }}">
                                        </div>
                                    </div>

                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Third Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }}</a>
                                            </label>
                                            <input type="text" name="third_icon" class="box-input" required
                                                value="{{ $services['third_icon'] }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Third Title') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="third_title" class="box-input" required
                                                value="{{ $services['third_icon'] }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Fourth Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }}</a>
                                            </label>
                                            <input type="text" name="fourth_icon" class="box-input" required
                                                value="{{ $services['fourth_icon'] }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for=""
                                                class="box-input-label">{{ __('Fourth Title') }} <span class="text-danger">*</span></label>
                                            <input type="text" name="fourth_title" class="box-input" required
                                                value="{{ $services['fourth_icon'] }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Info') }}</h3>
                            </div>
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Capacity Icon ') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }} </a>
                                            </label>
                                            <input type="text" name="capacity_icon" class="box-input"
                                                value="{{ $space->capacity_icon }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Capacity') }} <span class="text-danger">*</span></label>
                                            <div class="site-input-groups">
                                                <div class="site-input-groups">
                                                    <input type="text" name="capacity" class="box-input" required
                                                        value="{{ $space->capacity }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Benefit Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }} </a>
                                            </label>
                                            <input type="text" name="benefit_icon" class="box-input"
                                                value="{{ $space->benefit_icon }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Benefit') }} <span class="text-danger">*</span></label>
                                            <div class="site-input-groups">
                                                <div class="site-input-groups">
                                                    <input type="text" name="benefit" class="box-input" required
                                                        value="{{ $space->benefit }}">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Area Icon') }} <span class="text-danger">*</span>
                                                <a class="link" href="https://fontawesome.com/icons"
                                                    target="_blank">{{ __('Font Awesome') }} </a>
                                            </label>
                                            <input type="text" name="area_icon" class="box-input"
                                                value="{{ $space->area_icon }}">
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Area') }} <span class="text-danger">*</span></label>
                                            <div class="site-input-groups">
                                                <div class="site-input-groups">
                                                    <input type="text" name="area" class="box-input" required
                                                        value="{{ $space->area }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12">
                                        <div class="site-input-groups">
                                            <label for="" class="box-input-label">{{ __('Description') }} <span class="text-danger">*</span></label>
                                            <div class="site-input-groups">
                                                <div class="site-input-groups">
                                                    <textarea name="description" class="form-textarea summernote" placeholder="Content" required>{{ $space->description }}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Facilities') }}</h3>
                                <a href="javascript:void(0)" id="generate" class="site-btn-xs primary-btn mb-3">
                                    <i data-lucide="plus-circle"></i>

                                    {{ __('Add') }}
                                </a>
                            </div>
                            <div class="row justify-content-center my-4">
                                <div class="col-xxl-10">
                                    <div class="addOptions">
                                        @foreach ($space->facilities as $key => $facility)
                                            <div class="mb-4" id="area{{ $key }}">
                                                <div class="option-remove-row row align-items-center">
                                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                                                        <div class="wrap-custom-file">
                                                            <input type="file"
                                                                name="facilities[{{ $key }}][icon]"
                                                                id="facility_image{{ $loop->iteration }}"
                                                                accept=".gif, .jpg, .png" class="facility-upload" />
                                                            <label for="facility_image{{ $loop->iteration }}"
                                                                class="file-ok"
                                                                style="background-image: url({{ asset($facility['icon']) }})">
                                                                <img class="upload-icon"
                                                                    src="{{ asset('global/materials/upload.svg') }}"
                                                                    alt="Facility Icon" />
                                                                <span>{{ __('Upload Facility Icon') }}</span>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                                                        <div class="site-input-groups mb-0">
                                                            <input name="facilities[{{ $key }}][title]"
                                                                class="box-input" type="text"
                                                                value="{{ $facility['title'] }}" required
                                                                placeholder="Title" />
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                                                        <div class="site-input-groups mb-0">
                                                            <input name="facilities[{{ $key }}][price]"
                                                                class="box-input" type="text"
                                                                value="{{ $facility['price'] }}" required
                                                                placeholder="Price" />
                                                        </div>
                                                    </div>

                                                    <div class="col-xl-1 col-lg-6 col-md-6 col-sm-6 col-12">
                                                        <button class="delete-option-row delete_desc" type="button">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>

                                                    <div class="option-fields{{ $key }} row"></div>
                                                </div>
                                                <hr class="mb-4">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="site-card">
                            <div class="site-card-header">
                                <h3 class="title">{{ __('Status') }}</h3>
                            </div>
                            <div class="site-card-body">
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="site-input-groups">
                                            <label class="box-input-label" for="">
                                                {{ __('Status:') }}
                                            </label>
                                            <div class="switch-field">
                                                <input type="radio" id="active" name="status" value="1"
                                                    @checked($space->status) />
                                                <label for="active">{{ __('Active') }}</label>
                                                <input type="radio" id="deactivate" name="status" value="0"
                                                    @checked(!$space->status) />
                                                <label for="deactivate">{{ __('Deactive') }}</label>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <button type="submit" class="site-btn-sm primary-btn w-100">
                                {{ __('Update Space') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        document.getElementById('add-more-galleries').addEventListener('click', function() {
            const galleriesSection = document.querySelector('#galleries-section .gallery-group');
            const galleryCount = galleriesSection.querySelectorAll('.gallery-item').length;

            const newGalleryInput = `
                <div class="col-xl-6 gallery-item">
                            <div class="wrap-custom-file">
                            <input type="file" name="galleries[]" id="galleries${galleryCount + 1}" accept=".gif, .jpg, .png" required />
                            <label for="galleries${galleryCount + 1}">
                                <img class="upload-icon" src="{{ asset('global/materials/upload.svg') }}" alt="" />
                                <span>{{ __('Upload Galleries') }}</span>
                            </label>
                            <div class="close" id="remove-btn">
                                <i data-lucide="x"></i>
                            </div>
                        </div>
                </div>`;

            galleriesSection.insertAdjacentHTML('beforeend', newGalleryInput);
            imagePreview();
            lucide.createIcons();
        });

        $(document).on('click', '#remove-btn', function() {

            const index = $(this).attr('data-index');

            const oldGalleriesInput = document.querySelector('input[name="old_galleries"]');
            const oldGalleries = JSON.parse(oldGalleriesInput.value);

            // Remove the item from the old galleries array
            const updatedGalleries = oldGalleries.filter((_, i) => i != index);

            // Update the hidden input with the updated array
            oldGalleriesInput.value = JSON.stringify(updatedGalleries);


            $(this).closest('.gallery-item').remove();
        });

        $(document).ready(function() {
            (function($) {
                let i = {{ count($space->facilities) }};
                "use strict";

                $('select[name=price_type]').on('change', function() {
                    setDurationLabel();
                });

                setDurationLabel();

                function setDurationLabel() {
                    const dataText = $('select[name=price_type]').find('option:selected').data('text');
                    if (dataText) {
                        $('#duration-label').text(dataText);
                    } else {
                        $('#duration-label').text('');
                    }
                }

                $('input[name=duration_type]').on('change', function() {
                    durationToggle();
                });

                durationToggle();

                function durationToggle() {
                    const durationType = $('input[name=duration_type]:checked').val();

                    if (durationType === 'fixed') {
                        $('#duration-area').removeClass('d-none');
                    } else {
                        $('#duration-area').addClass('d-none');
                    }
                }

                $("#generate").on("click", function() {
                    i++;
                    const form = `
            <div class="mb-4" id="area${i}">
                <div class="option-remove-row row align-items-center">
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="wrap-custom-file">
                            <input
                                type="file"
                                name="facilities[${i}][icon]"
                                id="facility_image${i}"
                                accept=".gif, .jpg, .png"
                                class="facility-upload"
                                required
                            />
                            <label for="facility_image${i}">
                                <img class="upload-icon" src="{{ asset('global/materials/upload.svg') }}" alt="" />
                                <span>{{ __('Upload Facility Icon') }}</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="site-input-groups mb-0">
                            <input
                                name="facilities[${i}][title]"
                                class="box-input"
                                type="text"
                                value=""
                                required
                                placeholder="Title"
                            />
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
                        <div class="site-input-groups mb-0">
                            <input
                                name="facilities[${i}][price]"
                                class="box-input"
                                type="text"
                                value=""
                                required
                                placeholder="Price"
                            />
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-6 col-md-6 col-sm-6 col-12">
                        <button class="delete-option-row delete_desc" type="button">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="option-fields${i} row"></div>
                </div>
                <hr class="mb-4">
            </div>`;
                    $(".addOptions").append(form);
                });

                // Delete dynamically added facility form
                $(document).on("click", ".delete_desc", function() {
                    $(this).closest(".option-remove-row").parent().remove();
                    i--;
                });

                $(document).on("change", ".facility-upload", function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            // Update the sibling label's upload icon specific to this input
                            $(e.target)
                                .closest(".wrap-custom-file") // Find the closest wrapping div
                                .find(".upload-icon") // Target the icon inside this wrap
                                .attr("src", event.target.result); // Set the preview image
                        };
                        reader.readAsDataURL(file);
                    }
                });

            })(jQuery);
        });
    </script>
@endsection
