@extends('layout.master')
@section('content')
    <style>
        #selected_not_available_dates,
        #selected_not_available_times {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #c6cfe9;
            background: #fff;
        }

        #selected_not_available_dates span,
        {
        display: inline-block;
        margin: 5px;
        padding: 5px 10px;
        background: #e74c3c;
        color: white;
        border-radius: 3px;
        font-size: 12px;
        cursor: pointer;
        }

        #selected_not_available_times div {
            display: inline-block;
            /* margin: 5px;
            padding: 5px 10px;
            background: #e74c3c;
            color: white;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer; */
        }
    </style>
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
        $menu = $_GET['menu'] ?? '';
    @endphp
    <div class="page-heading-block py-4">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
                <li class="breadcrumb-item"><a href="{{ route('settings.facilities') }}">Estate Facilities</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Add Estate Facilities</li>
            </ol>
        </nav>
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('settings.facilities.store') }}" method="POST" class="row" id="add-facility-form"
                enctype="multipart/form-data">
                {{ csrf_field() }}
                <div class="mb-3 col-4">
                    <label for="estate-name" class="form-label">Name *</label>
                    <input type="text" class="form-control rounded {{ $errors->has('title') ? 'border-required' : '' }}"
                        name="title" id="estate-name" value="{{ old('title') }}">
                    @if ($errors->has('title'))
                        <p class="user_data text-danger my-2">{{ $errors->first('title') }}</p>
                    @endif
                </div>

                <div class="mb-3 col-3">
                    <label class="form-label">Status</label>
                    <div>
                        <input type="radio" class="form-check-inline m-0 status" name="status" id="active"
                            value="1" checked>
                        <label for="banner" class="m-1">Active</label>
                        <input type="radio" class="form-check-inline m-0 status" name="status" id="inactive"
                            value="0">
                        <label for="notice" class="m-1">Inactive</label>
                    </div>
                    @if ($errors->has('status'))
                        <p class="user_data text-danger m-0 status-old-error">{{ $errors->first('status') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-3">
                    <label class="form-label">Duration Type</label>
                    <div>
                        <input type="radio" class="form-check-inline m-0 duration_type" name="duration_type"
                            id="hour" value="1" checked>
                        <label for="hour" class="m-1">Hour</label>
                        <input type="radio" class="form-check-inline m-0 duration_type" name="duration_type"
                            id="minute" value="0">
                        <label for="minute" class="m-1">Minute</label>
                    </div>
                    @if ($errors->has('status'))
                        <p class="user_data text-danger m-0 status-old-error">{{ $errors->first('status') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-4 responsive-date-time">
                    <label for="available_date" class="form-label">Available Date*</label>
                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name="available_date"
                            id="available_date">
                        <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" alt=""
                            srcset="">
                    </div>
                </div>

                <div class="mb-3 col-4">
                    <label for="not_available_dates" class="form-label">Not Available Dates</label>
                    <input type="hidden" id="not_available_dates_hidden" name="not_available_dates">
                    {{-- <input type="hidden" id="not_available_dates_hidden" name="not_available_dates" value='["01/23/2025","01/25/2025","01/27/2025"]'> --}}

                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name=""
                            id="not_available_dates">
                        <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" alt=""
                            srcset="">
                    </div>

                </div>
                <div class="mb-3 col-12">
                    <label for="not_available_dates" class="form-label">Selected Not Available Dates</label>
                    <div id="selected_not_available_dates">
                        No dates selected.
                    </div>

                </div>

                <div class="mb-3 col-4 responsive-date-time">
                    <label for="available_time" class="form-label">Available time*</label>
                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name="available_time"
                            id="available_time">
                        <img src="{{ asset('assets/images/icons/calendar-time.svg') }}" alt="" srcset="">
                    </div>
                </div>

                <div class="mb-3 col-4">
                    <label for="not_available_times_hidden" class="form-label">Not Available Times</label>
                    <input type="hidden" id="not_available_times_hidden" name="not_available_times">

                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name=""
                            id="not_available_times">
                        <img src="{{ asset('assets/images/icons/calendar-time.svg') }}" alt="" srcset="">
                    </div>

                </div>
                <div class="mb-3 col-12">
                    <label for="selected_not_available_times" class="form-label">Selected Not Available Times</label>
                    <div id="selected_not_available_times">
                        No dates selected.
                    </div>

                </div>


                <div class="mb-3 col-12">
                    <label for="description" class="form-label">Description</label>
                    <textarea name="description" id="description" class="form-control rounded" cols="0" rows="2">{{ !empty(old('description')) && !empty(old('description')) ? old('description') : '' }}</textarea>
                </div>
                <div class="d-grid attachment-block">
                    <label class="form-label attachment-label-text">Attach (PNG, JPEG)</label>
                    <p id="attachment-error" class="text-danger m-0" style="display: none;">

                    </p>
                    @if ($errors->has('attachment'))
                        <p class="user_data text-danger m-0 attachment-old-error">{{ $errors->first('attachment') }}</p>
                    @endif
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg , application/pdf" />
                    <label for="attachment" class="attachment-label">
                        <div id="img-preview">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </div>
                    </label>
                </div>
                <a href="javascript:void(0)" id="previewButton" style="display: none;" data-bs-toggle="modal"
                    data-bs-target="#mobileBannerPreview">(Show preview)</a>
                <div class="d-flex justify-content-end ">
                    <a href="{{ route('settings.banners-notices') }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Save</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/add-facility-page.js') }}"></script>
    @endPush
@endsection