@extends('backend.layouts.app')
@section('title')
    {{ __('Add New 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">{{ __('Add New 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.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <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" 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 }}">{{ $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 }}">{{ $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" id="sub_title" name="sub_title" class="form-control"
                                                    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" id="stock" name="stock" class="form-control"
                                                    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" 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">{{ __('Per Hour') }}</option>
                                                <option value="daily" data-text="Days">{{ __('Per Day') }}</option>
                                                <option value="weekly" data-text="Weeks">{{ __('Per Week') }}</option>
                                                <option value="monthly" data-text="Months">{{ __('Per Month') }}</option>
                                                <option value="yearly" data-text="Years">{{ __('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" />
                                                <label for="durationTypeActive">{{ __('Fixed Time') }}</label>
                                                <input type="radio" id="durationTypeFlexible" name="duration_type"
                                                    value="flexible" checked />
                                                <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" 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" required
                                                    accept=".gif, .jpg, .png" />
                                                <label for="banner_image">
                                                    <img class="upload-icon"
                                                        src="{{ asset('global/materials/upload.svg') }}"
                                                        alt="" />
                                                    <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>
                                        <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
                                            <div class="row gallery-group">
                                                <div class="col-xl-6 gallery-item">
                                                    <div class="wrap-custom-file">
                                                        <input type="file" name="galleries[]" id="galleries1"
                                                            accept=".gif, .jpg, .png" required />
                                                        <label for="galleries1">
                                                            <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>
                                            </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>
                            <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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                        </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="">
                                                </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="" required>
                                        </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="">
                                                </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="" required>
                                        </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="">
                                                </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></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"></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 same-type">
                                                <input type="radio" id="radio-five" name="status" checked=""
                                                    value="1" />
                                                <label for="radio-five">{{ __('Active') }} </label>
                                                <input type="radio" id="radio-six" name="status" value="0" />
                                                <label for="radio-six">{{ __('Deactivate') }} </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <button type="submit" class="site-btn-sm primary-btn w-100">
                                {{ __('Add New 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() {
            $(this).closest('.gallery-item').remove();
        });

        $('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');
            }
        }

        (function($) {
            let i = 0;
            "use strict";

            // Function to add new facility form
            $("#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);

                imagePreview();
            });

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