@extends('layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
    @endphp
    <div class="page-heading-block py-4">
        @if (!empty($menu) && $menu == 'estates')
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @if ($userType != 3 && $userType != 4)
                        <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                    @endif
                    <li class="breadcrumb-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id]) }}">
                            {{ $estate_details->name ?? '' }}
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 4]) }}">Visitors</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Add Visitor</li>
                </ol>
            </nav>
        @else
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('visitors.get') }}">Visitors</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add Visitor</li>
                </ol>
            </nav>
        @endif
        {{-- <div class="page-title-block d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{{ !empty($menu) && $menu == 'estates' ? route('estates.view', ['id' => $estate_details->id, 'tab' => 4]) : route('visitors.get') }}"
                    class="back-btn">
                    &#x276e; &nbsp;Back
                </a>

                <h4 class="mx-5 mb-0 font-weight-bold">Add Visitor</h4>
            </div>
        </div> --}}
    </div>

    <div class="page-main-content">
        <div class="add-visitor-form-block p-5 rounded">
            <form action="{{ route('visitors.store') }}" method="POST" class="row" id="add-visitor-form"
                enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" name="menu" value="{{ $menu ?? '' }}">

                <div class="row">
                    <div class="mb-3 col-4">
                        <label for="vehicle-model" class="form-label">Vehicle Make / Model *</label>
                        <input type="text" class="form-control rounded required" name="vehicle_model" id="vehicle-model"
                            maxlength="30" value="{{ old('vehicle_model') ?? '' }}">
                    </div>

                    <div class="mb-3 col-4">
                        <label for="vehicle-license" class="form-label">Vehicle License *</label>
                        <input type="text" class="form-control rounded required" name="vehicle_license"
                            id="vehicle-license" maxlength="20" value="{{ old('vehicle_license') ?? '' }}">
                    </div>

                    <div class="mb-3 col-4">
                        <label for="vehicle-iu" class="form-label">Vehicle IU</label>
                        <input type="text" class="form-control rounded" name="vehicle_iu" id="vehicle-iu" maxlength="20"
                            value="{{ old('vehicle_iu') ?? '' }}">
                    </div>
                </div>

                <div class="row">
                    <div class="mb-3 col-4">
                        <label for="visitor-name" class="form-label">Visitor Name *</label>
                        <input type="text" class="form-control rounded required" name="visitor_name" id="visitor-name"
                            value="{{ old('visitor_name') ?? '' }}">
                    </div>
                    <div class="mb-3 col-4">
                        <label for="mobile-number" class="form-label">Visitor Mobile Number *</label>
                        <input type="text" class="form-control rounded required mobile_number" name="mobile_number" id="mobile-number"
                            value="{{ old('mobile_number') ?? '' }}">
                    </div>
                </div>


                <div class="row">

                    <div
                        class="mb-3 col-4 {{ !empty($menu) && $menu == 'estates' ? 'hide' : '' }} {{ $userType != 1 && $userType != 2 ? 'hide' : '' }}">
                        <label for="unit-no" class="form-label">Estate *</label>
                        <select name="estate" id=""
                            class="form-control form-select estate-select rounded required"
                            {{ !empty($estate_details->id) ? 'disabled' : '' }}>
                            @foreach ($estate_list ?? [] as $estate)
                                <option value="{{ $estate->value }}"
                                    {{ !empty($estate_details->id) && $estate->value == $estate_details->id ? 'selected' : '' }}>
                                    {{ $estate->label }}
                                </option>
                            @endforeach
                        </select>
                        @if (!empty($estate_details->id))
                            <input type="hidden" name="estate" value="{{ $estate_details->id }}">
                        @endif
                    </div>

                    <div class="mb-3 col-4">
                        <label for="bik_no" class="form-label">Blk No. *</label>
                        {{-- <input type="number" class="form-control rounded required bg-light" name="bik_no" id="bik-no"
                            value="{{ old('bik_no') ?? '' }}" readonly> --}}
                        <select name="bik_no" id="bik_no" class="form-control form-select rounded required">
                            <option value="">Select Blk No</option>
                        </select>
                    </div>

                    <div class="mb-3 col-4">
                        <label for="unit_no" class="form-label">Unit No. *</label>
                        {{-- <input type="text" class="form-control rounded required" name="unit_no" id="unit-no"
                            maxlength="20" value="{{ old('unit_no') ?? '' }}"> --}}
                        <select name="unit_no" id="unit_no" class="form-control form-select rounded required">
                            <option value="">Select Unit No</option>
                        </select>
                    </div>
                </div>

                {{-- <div class="mb-3 col-6">
                    <label for="resident-name" class="form-label">Resident *</label>
                    <select name="resident" id=""
                        class="form-control resident-select form-select rounded required">

                    </select>
                </div> --}}

                <div class="row">
                    <div class="mb-3 col-4">
                        <label for="resident-name" class="form-label">Resident *</label>
                        <input type="text" name="resident_name" id="resident-name"
                            class="form-control required bg-light" value="{{ old('resident_name') ?? '' }}" readonly>
                        <input type="hidden" name="resident_id" value="{{ old('resident_id') ?? '' }}"
                            id="resident-id">
                    </div>

                    <div class="mb-3 col-4">
                        <label for="resident-contact-no" class="form-label">Resident Contact No.</label>
                        <input type="text" class="form-control rounded bg-light" name="resident_contact_noo"
                            id="resident-contact-no" value="{{ old('resident_contact_noo') ?? '' }}" readonly>
                    </div>

                    <div class="mb-3 col-4">
                        <label for="rfid" class="form-label">RFID</label>
                        <input type="text" class="form-control rounded" name="rfid" id="rfid" maxlength="20"
                            value="{{ old('rfid') ?? '' }}">
                    </div>
                </div>

                @if ($userType == 1 || $userType == 2 || $userType == 3)
                    <div class="mb-3 col-4 responsive-date-time">
                        <label for="validity-date" class="form-label">Validity Date *</label>
                        <div class="d-flex justify-content-between date-time-block">
                            <input type="text" class="form-control rounded date-time required" name="validity_date"
                                id="validity-date">
                            <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" alt=""
                                srcset="">
                        </div>
                    </div>
                @endif

                {{-- @if ($userType == 3)
                <div class="mb-3 col-6 d-flex align-items-center">
                    <div class="form-check">
                        <input type="checkbox" name="unplanned" id="unplanned" class="form-check-input">
                        <label for="unplanned" class="form-check-label">Unplanned Visitor</label>
                    </div>
                </div>
                @endif --}}

                <div class="mb-3 col-12">
                    <label for="purpose" class="form-label">Purpose</label>
                    <textarea name="purpose" id="purpose" class="form-control rounded" cols="0" rows="2">{{ old('purpose') ?? '' }}</textarea>
                    {{-- <input type="text" class="form-control rounded" name="purpose" id="purpose"> --}}
                </div>

                {{-- <div class="mb-3 col-12">
                    <label for="remarks" class="form-label">Remarks</label>
                    <textarea name="remarks" id="remarks" class="form-control rounded" cols="0" rows="2"></textarea>
                </div> --}}

                <div class="mb-3 d-grid ">
                    <label class="form-label">Attach (PNG, JPEG)</label>
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg" />
                    <label for="attachment" class="attachment-label">
                        <div id="img-preview">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </div>
                    </label>
                </div>
                <div class="d-flex justify-content-end ">
                    <a href="{{ !empty($menu) && $menu == 'estates' ? route('estates.view', ['id' => $estate_details->id, 'tab' => 4]) : route('visitors.get') }}"
                        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')
        <!-- Add Splide Script-->
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

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