@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' => $resident->estate_id]) }}">
                            {{ $resident->estate_name ?? '' }}
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('estates.view', ['id' => $resident->estate_id, 'tab' => 3]) }}">Residents</a>
                    </li>
                    {{-- <li class="breadcrumb-item active" aria-current="page">{{ $resident->full_name ?? '' }}</li> --}}
                    <li class="breadcrumb-item active" aria-current="page">Edit</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">Edit</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' => $resident->estate_id, 'tab' => 3]) : route('residents.get') }}"
                    class="back-btn">
                    &#x276e; &nbsp;Back
                </a>

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

    <div class="page-main-content">
        <div class="add-residence-form-block p-5 rounded">
            <form action="{{ route('residents.update', ['id' => $resident->id]) }}" method="POST" class="row"
                id="edit-residence-form" enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" name="menu" value="{{ $menu ?? '' }}">
                <input type="hidden" id="resident_id" value="{{ $resident->id }}">
                <input type="hidden" id="user_id" name="user_id" value="{{ $resident->user_id }}">
                <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="{{ !empty(old('residence_name')) ? old('residence_name') : $resident->full_name ?? '' }}">
                        </div>

                        <div class="mb-3 col-6">
                            <label for="residence-email" class="form-label">Resident Email *</label>
                            <div class="input-group">
                                <input type="text"
                                    class="form-control rounded required email {{ $errors->has('email') ? 'border-required' : '' }}"
                                    name="email" id="residence-email"
                                    value="{{ !empty(old('email')) ? old('email') : $resident->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="user_name" class="form-control rounded required" name="user_name" id="user_name"
                                value="{{ !empty(old('user_name')) ? old('user_name') : $resident->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="{{ !empty(old('mobile_number')) ? old('mobile_number') : $resident->contact_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 {{ !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">
                                @foreach ($estate_list ?? [] as $estate)
                                    <option value="{{ $estate->value }}"
                                        {{ !empty($resident->estate_id) && $estate->value == $resident->estate_id ? 'selected' : '' }}>
                                        {{ $estate->label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 col-6">
                            <label for="bik-no" class="form-label">Blk No. *</label>
                            <input type="hidden" id="selected_block_id"
                                value="{{ old('bik_no') ?? $resident->block_id }}">
                            <select name="bik_no" id="bik_no" class="form-control form-select rounded required">
                                <option value="">Select Blk No</option>
                            </select>
                            {{-- <input type="number" class="form-control rounded required" name="bik_no" id="bik-no"
                            value="{{ !empty(old('bik_no')) ? old('bik_no') : $resident->block_number ?? '' }}"> --}}
                        </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') ?? $resident->unit_id }}">
                            <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"
                            value="{{ !empty(old('unit_no')) ? old('unit_no') : $resident->unit_number ?? '' }}">
                        @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" {{ $resident->is_active == 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"
                                    {{ $resident->is_active == 0 ? 'checked' : '' }}>
                                <label for="validity_inactive" class="m-1">Inactive</label>
                            </div>
                        </div> --}}
                        <input type="hidden" id="form_date" value="{{ $resident->valid_from ?? '' }}">
                        <input type="hidden" id="to_date" value="{{ $resident->valid_to ?? '' }}">

                        <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" class=" d-grid">
                                    <img src="{{ !empty($resident->public_url) ? $resident->public_url : asset('assets/images/add-attachment-icon.svg') }}"
                                        alt="" width="100" height="100">
                                    <button type="button"
                                        class="btn btn-danger btn-sm remove_image mt-1 {{ empty($resident->public_url) ? 'hide' : '' }}"
                                        data-image_id="{{ $resident->profile_image_id ?? '' }}">Remove</button>
                                </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
                    @elseif(!empty($vehicle_details) && count($vehicle_details) > 0)
                        @foreach ($vehicle_details ?? [] as $vehical_detail)
                            <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="{{ $vehical_detail->licence ?? '' }}"
                                            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="{{ $vehical_detail->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" value="{{ $vehical_detail->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"
                                            value="{{ $vehical_detail->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"
                                            value="{{ isset($vehical_detail->valid_from) ? \Carbon\Carbon::parse($vehical_detail->valid_from)->format('m/d/y h:i A') : '' }}"
                                            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="{{ isset($vehical_detail->valid_to) ? \Carbon\Carbon::parse($vehical_detail->valid_to)->format('m/d/y h:i A') : '' }}" 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">{{ $vehical_detail->remarks ?? '' }}</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' => $resident->estate_id, 'tab' => 3]) : route('residents.get') }}"
                        class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Update</button>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        <!-- Add Splide Script-->
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

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