@extends('layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];
        $menu = $_GET['menu'] ?? '';
    @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' => 3]) }}">Residents</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Add Resident</li>
                </ol>
            </nav>
        @else
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('residents.get') }}">Residents</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add Resident</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' => 3]) : route('residents.get') }}"
                    class="back-btn">
                    &#x276e; &nbsp;Back
                </a>

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

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

                    <div class="row">
                        <div class="mb-3 col-6">
                            <label for="residence-name" class="form-label">Resident Name *</label>
                            <input type="text" class="form-control rounded required" name="residence_name"
                                id="residence-name" value="{{ old('residence_name') }}">
                        </div>

                        <div class="mb-3 col-6">
                            {{-- <label for="residence-email" class="form-label">Resident Email *</label> --}}
                            <label for="residence-email" class="form-label">Resident Email</label>
                            <div class="input-group">
                                {{-- TODO:need to make required --}}
                                <input type="text"
                                    class="form-control rounded email {{ $errors->has('email') ? 'border-required' : '' }}"
                                    name="email" id="residence-email" value="{{ old('email') }}">
                                <span class="info_icon" id="info_icon">
                                    <svg height="24" viewBox="0 0 512 512" width="24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="m256 0c-141.484375 0-256 114.496094-256 256 0 141.484375 114.496094 256 256 256 141.484375 0 256-114.496094 256-256 0-141.484375-114.496094-256-256-256zm0 472c-119.378906 0-216-96.609375-216-216 0-119.378906 96.609375-216 216-216 119.378906 0 216 96.609375 216 216 0 119.378906-96.609375 216-216 216zm59.332031-98c0 11.046875-8.953125 20-20 20h-78.664062c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h19.332031v-117.332031h-19.332031c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h39.332031c11.046875 0 20 8.953125 20 20v137.332031h19.332031c11.046875 0 20 8.953125 20 20zm-84.332031-250.332031c0-13.808594 11.191406-25 25-25s25 11.191406 25 25c0 13.804687-11.191406 25-25 25s-25-11.195313-25-25zm0 0" />
                                    </svg>
                                </span>
                            </div>
                            @if ($errors->has('email'))
                                <div class="text-danger required-label">{{ $errors->first('email') }}</div>
                            @endif
                        </div>

                        <div class="mb-3 col-6 hide">
                            <label for="user_name" class="form-label">User Name *</label>
                            <input type="text" class="form-control rounded" name="user_name" id="user_name"
                                value="{{ old('user_name') }}" readonly style="background: #e9ecef;">
                        </div>

                        <div class="mb-3 col-6">
                            <label for="mobile-number" class="form-label">Mobile Number *</label>
                            <div class="input-group">
                                <select name="country_code" id="country_code" class="form-select-sm rounded-start border-0"
                                    style="width: 105px; outline:none; -webkit-appearance: none;
                                    -moz-appearance: none;"
                                    disabled>
                                    @if (!empty($country_codes))
                                        @foreach ($country_codes ?? [] as $country_code)
                                            <option value="{{ $country_code->code }}"
                                                {{ $country_code->shortName == 'SG' ? 'selected' : '' }}>
                                                {{ $country_code->shortName }}({{ $country_code->code }})
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                <input type="text"
                                    class="form-control rounded-end required mobile_number {{ $errors->has('mobile_number') ? 'border-required' : '' }}"
                                    name="mobile_number" id="mobile-number" value="{{ old('mobile_number') ?? '' }}">
                                <span class="info_icon" id="info_icon">
                                    <svg height="24" viewBox="0 0 512 512" width="24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="m256 0c-141.484375 0-256 114.496094-256 256 0 141.484375 114.496094 256 256 256 141.484375 0 256-114.496094 256-256 0-141.484375-114.496094-256-256-256zm0 472c-119.378906 0-216-96.609375-216-216 0-119.378906 96.609375-216 216-216 119.378906 0 216 96.609375 216 216 0 119.378906-96.609375 216-216 216zm59.332031-98c0 11.046875-8.953125 20-20 20h-78.664062c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h19.332031v-117.332031h-19.332031c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h39.332031c11.046875 0 20 8.953125 20 20v137.332031h19.332031c11.046875 0 20 8.953125 20 20zm-84.332031-250.332031c0-13.808594 11.191406-25 25-25s25 11.191406 25 25c0 13.804687-11.191406 25-25 25s-25-11.195313-25-25zm0 0" />
                                    </svg>
                                </span>
                            </div>
                            @if ($errors->has('mobile_number'))
                                <div class="text-danger required-label">{{ $errors->first('mobile_number') }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="mb-3 col-6">
                            <label for="password" class="form-label">Password *</label>
                            <div class="input-group">
                                <input type="password" class="form-control rounded required password" name="password"
                                    id="password" value="{{ old('password') ?? ($password ?? '') }}">
                                <span class="input_icon" id="password_eye">
                                    <svg id="Icons" enable-background="new 0 0 128 128" height="24"
                                        viewBox="0 0 128 128" width="24" xmlns="http://www.w3.org/2000/svg">
                                        <path id="Hide"
                                            d="m79.891 65.078 7.27-7.27c.529 1.979.839 4.048.839 6.192 0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27c7.949-.542 14.271-6.864 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602-4.741 7.219-23.339 31.994-55.294 31.994-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573c6.043 1.853 12.685 3.018 20.014 3.018 41.873 0 62.633-36.504 63.496-38.057.672-1.209.672-2.677 0-3.886zm-16.668-39.229-88 88c-.781.781-1.805 1.172-2.828 1.172s-2.047-.391-2.828-1.172c-1.563-1.563-1.563-4.094 0-5.656l11.196-11.196c-18.1-10.927-27.297-27.012-27.864-28.033-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056 10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zm-76.495 65.183 10.127-10.127c-2.797-3.924-4.46-8.709-4.46-13.884 0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189c-6.47-2.591-13.822-4.27-22.073-4.27-31.955 0-50.553 24.775-55.293 31.994 3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809c-2.379-1.405-5.118-2.267-8.076-2.267-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                        {{-- <div class="mb-3 col-6">
                            <label for="password-confirmation" class="form-label">Confirm Password *</label>
                            <div class="input-group">
                                <input type="password" class="form-control rounded required password confirm_password"
                                    name="password_confirmation" id="password-confirmation"
                                    value="{{ old('password_confirmation') }}">
                                <span class="input_icon" id="confirm_password_eye">
                                    <svg id="Icons" enable-background="new 0 0 128 128" height="24"
                                        viewBox="0 0 128 128" width="24" xmlns="http://www.w3.org/2000/svg">
                                        <path id="Hide"
                                            d="m79.891 65.078 7.27-7.27c.529 1.979.839 4.048.839 6.192 0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27c7.949-.542 14.271-6.864 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602-4.741 7.219-23.339 31.994-55.294 31.994-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573c6.043 1.853 12.685 3.018 20.014 3.018 41.873 0 62.633-36.504 63.496-38.057.672-1.209.672-2.677 0-3.886zm-16.668-39.229-88 88c-.781.781-1.805 1.172-2.828 1.172s-2.047-.391-2.828-1.172c-1.563-1.563-1.563-4.094 0-5.656l11.196-11.196c-18.1-10.927-27.297-27.012-27.864-28.033-.672-1.209-.672-2.678 0-3.887.863-1.552 21.623-38.056 63.496-38.056 10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zm-76.495 65.183 10.127-10.127c-2.797-3.924-4.46-8.709-4.46-13.884 0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189c-6.47-2.591-13.822-4.27-22.073-4.27-31.955 0-50.553 24.775-55.293 31.994 3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809c-2.379-1.405-5.118-2.267-8.076-2.267-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z" />
                                    </svg>
                                </span>
                            </div>
                        </div> --}}

                        <div
                            class="mb-3 col-6 {{ !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" id="estate_id" value="{{ $estate_details->id }}">
                            @endif
                        </div>

                        <div class="mb-3 col-6">
                            <label for="bik-no" class="form-label">Blk No. *</label>
                            {{-- <input type="number" class="form-control rounded required" name="bik_no" id="bik-no"
                                value="{{ old('bik_no') }}"> --}}
                            <input type="hidden" id="selected_block_id" value="{{ old('bik_no') ?? '' }}">
                            <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-6">
                            <label for="unit-no" class="form-label">Unit No. *</label>
                            <input type="hidden" id="selected_unit_id" 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>
                            {{-- <input type="text" class="form-control rounded required" name="unit_no" id="unit-no"
                                maxlength="20" value="{{ old('unit_no') }}"> --}}

                            {{-- @if ($errors->has('unit_error'))
                                <p class="text-danger my-2">{{ $errors->first('unit_error') }}</p>
                            @endif --}}
                        </div>
                        <div class="col-12">
                            <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>
                        </div>

                        {{-- <div class="mb-3 col-6">
                            <label class="form-lable">Validity</label>
                            <div>
                                <input type="radio" class="form-check-inline m-0" name="validity" id="validity_active"
                                    value="1" checked>
                                <label for="validity_active" class="m-1">Active</label>
                                <input type="radio" class="form-check-inline m-0" name="validity"
                                    id="validity_inactive" value="0">
                                <label for="validity_inactive" class="m-1">Inactive</label>
                            </div>
                        </div> --}}

                        <div class="mb-3 d-grid col-6">
                            <label class="form-label">Profile Image (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>
                </div>

                <div class="seprator my-4"></div>

                <div id="vehicle-details-blocks" class="my-2">
                    <div>
                        <h4>Vehicle Details:</h4>
                    </div>

                    @if (!empty(old('vehicle_license')) && count(old('vehicle_license')) > 0)
                        @foreach (old('vehicle_license') ?? [] as $key => $vehicle_license)
                            <div class="my-2 rounded p-4 vehicle-block">
                                <div class="d-flex justify-content-end ">
                                    <button type="button"
                                        class="btn btn-danger btn-sm delete-block {{ $loop->index == 0 ? 'hide' : '' }}">Remove</button>
                                </div>
                                <div class="row vehicle_details">
                                    <div class="mb-3 col-6">
                                        <label for="vehicle-license" class="form-label">Vehicle License</label>
                                        <input type="text" class="form-control rounded" name="vehicle_license[]"
                                            id="vehicle-license" value="{{ $vehicle_license ?? '' }}" maxlength="20">
                                    </div>

                                    <div class="mb-3 col-6">
                                        <label for="vehicle-iu" class="form-label">Vehicle IU</label>
                                        <input type="text" class="form-control rounded" name="vehicle_iu[]"
                                            id="vehicle-iu"
                                            value="{{ !empty(old('vehicle_iu')) && !empty(old('vehicle_iu')[$key]) ? old('vehicle_iu')[$key] : '' }}"
                                            maxlength="20">
                                    </div>

                                    <div class="mb-3 col-6">
                                        <label for="vehicle-model" class="form-label">Vehicle Model</label>
                                        <input type="text" class="form-control rounded" name="vehicle_model[]"
                                            id="vehicle-model"
                                            value="{{ !empty(old('vehicle_model')) && !empty(old('vehicle_model')[$key]) ? old('vehicle_model')[$key] : '' }}"
                                            maxlength="30">
                                    </div>

                                    <div class="mb-3 col-6">
                                        <label for="rfid" class="form-label">RFID</label>
                                        <input type="text" class="form-control rounded" name="rfid[]" id="rfid"
                                            value="{{ !empty(old('rfid')) && !empty(old('rfid')[$key]) ? old('rfid')[$key] : '' }}"
                                            maxlength="20">
                                    </div>

                                    <div class="mb-3 col-6">
                                        <label for="valid_from" class="form-label">Valid From</label>
                                        <input type="text" class="form-control rounded validity-datepicker"
                                            name="valid_from[]" id="valid_from"
                                            value="{{ !empty(old('valid_from')) && !empty(old('valid_from')[$key]) ? old('valid_from')[$key] : '' }}"
                                            placeholder="YYYY-MM-DD">
                                    </div>

                                    <div class="mb-3 col-6">
                                        <label for="valid_to" class="form-label">Valid To</label>
                                        <input type="text" class="form-control rounded validity-datepicker"
                                            name="valid_to[]" id="valid_to"
                                            value="{{ !empty(old('valid_to')) && !empty(old('valid_to')[$key]) ? old('valid_to')[$key] : '' }}"
                                            placeholder="YYYY-MM-DD">
                                    </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">{{ !empty(old('remarks')) && !empty(old('remarks')[$key]) ? old('remarks')[$key] : '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="my-2 rounded p-4 vehicle-block">
                            <div class="d-flex justify-content-end ">
                                <button type="button" class="btn btn-danger btn-sm delete-block hide">Remove</button>
                            </div>
                            <div class="row vehicle_details">
                                <div class="mb-3 col-6">
                                    <label for="vehicle-license" class="form-label">Vehicle License</label>
                                    <input type="text" class="form-control rounded" name="vehicle_license[]"
                                        id="vehicle-license" maxlength="20">
                                </div>

                                <div class="mb-3 col-6">
                                    <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">
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="vehicle-model" class="form-label">Vehicle Model</label>
                                    <input type="text" class="form-control rounded" name="vehicle_model[]"
                                        id="vehicle-model" maxlength="30">
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="rfid" class="form-label">RFID</label>
                                    <input type="text" class="form-control rounded" name="rfid[]" id="rfid"
                                        maxlength="20">
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="valid_from" class="form-label">Valid From</label>
                                    <input type="text" class="form-control rounded validity-datepicker"
                                        name="valid_from[]" id="valid_from" placeholder="YYYY-MM-DD">
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="valid_to" class="form-label">Valid To</label>
                                    <input type="text" class="form-control rounded validity-datepicker"
                                        name="valid_to[]" id="valid_to" placeholder="YYYY-MM-DD">
                                </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>
                        </div>
                    @endif

                </div>
                <div class="d-flex justify-content-end mb-4">
                    <button type="button" class="btn normal-btn" id="add-block">Add Another Vehicle</button>
                </div>
                <div class="d-flex justify-content-end">
                    <a href="{{ !empty($menu) && $menu == 'estates' ? route('estates.view', ['id' => $estate_details->id, 'tab' => 3]) : route('residents.get') }}"
                        class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn residence-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-residence-page.js') }}"></script>
    @endPush
@endsection