@extends('layout.master')
@section('content')
    @php
        $userType = \App\Helpers\Helpers::getUserRole()->type_id ?? [];

        $userAccess = \App\Helpers\Helpers::getUserAccess() ?? [];
        $access = $userAccess['accesses'] ?? [];
        $menu = $_GET['menu'] ?? '';
    @endphp
    <input type="hidden" id="user_type" value="{{ $userType }}">
    <div class="page-heading-block pt-4 pb-1">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">{{ $resident->full_name ?? '' }}</li>
            </ol>
        </nav>
    </div>

    <div class="page-main-content">
        <div>
            <div class="table-links-section">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link mx-2 py-2 px-4 rounded-top table-links active" data-name="vehical-entry"
                            aria-current="page" href="javascript:void(0)">Vehicle
                            Entry</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mx-2 py-2 px-4 rounded-top table-links " data-name="vehical-exit"
                            href="javascript:void(0)">Vehicle Exit</a>
                    </li>
                </ul>
            </div>
            <div class="vehicle-info-block vehical-entry-block p-3">
                <div id="vehical-entry" class="vehical-table-block">
                    <div class="vehical-search-section d-flex justify-content-between align-items-center my-4">
                        <h4>Vehicle Entry Information</h4>
                        <div class="d-flex">
                            <input type="text" placeholder="Search Vehicle" class="search mx-3 vehicle_entry_search">
                            <button type="button" class="btn filter_btn entry_log_filter" data-bs-toggle="modal"
                                data-bs-target="#entryLogfilter">
                                <img src="{{ asset('assets/images/icons/filter.png') }}" alt="">
                            </button>
                        </div>
                    </div>

                    <div class="d-flex gap-2 filters hide">
                        <span class="mx-2">Results filtered by</span>

                        {{-- estate --}}
                        <div class="filters-applied-list ml-2 my-auto  filter-type-list hide" id="estate_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Estate:
                                    <span class="filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                    data-type="estate_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>


                        {{-- Blk No --}}
                        <div class="filters-applied-list ml-2 my-auto  filter-type-list hide" id="block_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Block:
                                    <span class="filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                    data-type="filter_blk_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>


                        {{-- Unit No --}}
                        <div class="filters-applied-list ml-2 my-auto  filter-type-list hide" id="unit_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Unit:
                                    <span class="filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                    data-type="filter_unit_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>

                        {{-- Vehicle License --}}
                        <div class="filters-applied-list ml-2 my-auto  filter-type-list hide" id="license_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Vehicle:
                                    <span class="filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                    data-type="filter_license">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>

                        {{-- Entry date --}}
                        <div class="filters-applied-list ml-2 my-auto  filter-type-list hide" id="entry_date_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Date:
                                    <span class="filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close clear-filter px-0 py-0 my-auto border-0"
                                    data-type="entry_date_filter">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>
                    </div>
                    <table class="table vehicle-info-table" id="vehicle-entry-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th scope="col" class="p-3">Entry Date/Time</th>
                                <th scope="col" class="p-3">Vehicle License</th>
                                <th scope="col" class="p-3">Name</th>
                                <th scope="col" class="p-3">Estate Name</th>
                                <th scope="col" class="p-3">Mobile</th>
                                <th scope="col" class="p-3">Visiting Unit</th>
                                <th scope="col" class="p-3">License Plate Image</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>


                <div id="vehical-exit" class="vehical-table-block hide">
                    <div class="vehical-search-section d-flex justify-content-between align-items-center my-4">
                        <h4>Vehicle Exit Information</h4>
                        <div class="d-flex">
                            <input type="text" placeholder="Search Vehicle" class="search mx-3 vehicle_exit_search">
                            <button type="button" class="btn filter_btn exit_log_filter" data-bs-toggle="modal"
                                data-bs-target="#exitLogfilter">
                                <img src="{{ asset('assets/images/icons/filter.png') }}" alt="">
                            </button>
                        </div>
                    </div>


                    <div class="d-flex gap-2 exit_filters hide">
                        <span class="mx-2">Results filtered by</span>

                        {{-- estate --}}
                        <div class="filters-applied-list ml-2 my-auto  exit-filter-type-list hide" id="exit_estate_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Estate:
                                    <span class="exit-filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close exit-clear-filter px-0 py-0 my-auto border-0"
                                    data-type="exit_estate_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>


                        {{-- Blk No --}}
                        <div class="filters-applied-list ml-2 my-auto  exit-filter-type-list hide" id="exit_block_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Block:
                                    <span class="exit-filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close exit-clear-filter px-0 py-0 my-auto border-0"
                                    data-type="exit_filter_blk_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>


                        {{-- Unit No --}}
                        <div class="filters-applied-list ml-2 my-auto  exit-filter-type-list hide" id="exit_unit_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Unit:
                                    <span class="exit-filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close exit-clear-filter px-0 py-0 my-auto border-0"
                                    data-type="exit_filter_unit_id">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>

                        {{-- Vehicle License --}}
                        <div class="filters-applied-list ml-2 my-auto  exit-filter-type-list hide"
                            id="exit_license_filter" style="">
                            <div class="d-flex">
                                <span class="my-auto">Vehicle:
                                    <span class="exit-filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close exit-clear-filter px-0 py-0 my-auto border-0"
                                    data-type="exit_filter_license">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>

                        {{-- Entry date --}}
                        <div class="filters-applied-list ml-2 my-auto  exit-filter-type-list hide" id="exit_date_filter"
                            style="">
                            <div class="d-flex">
                                <span class="my-auto">Date:
                                    <span class="exit-filter-type-list-show mx-1"></span>
                                </span>
                                <button type="button" class="filter_close exit-clear-filter px-0 py-0 my-auto border-0"
                                    data-type="exit_date_filter">
                                    <img src="{{ asset('/assets/images/icons/close-filled.svg') }}" alt="close modal"
                                        width="18">
                                </button>
                            </div>
                        </div>
                    </div>
                    <table class="table vehicle-info-table" id="vehicle-exit-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th scope="col" class="p-3">Exit Date/Time</th>
                                <th scope="col" class="p-3">Vehicle License</th>
                                <th scope="col" class="p-3">Name</th>
                                <th scope="col" class="p-3">Estate Name</th>
                                <th scope="col" class="p-3">Mobile</th>
                                <th scope="col" class="p-3">Visiting Unit</th>
                                <th scope="col" class="p-3">License Plate Image</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @php

        $user_estate_id = null;
        if ($userType == 3 || $userType == 4) {
            $user_estate_id = App\Models\EstateStaffRelation::where('user_id', auth()->id())
                ->pluck('estate_id')
                ->first();
        }

    @endphp

    <input type="hidden" id="user_estate_id" value="{{ !empty($user_estate_id) ? $user_estate_id : '' }}">

    {{-- filter model for Entry Logs --}}
    <div class="modal fade" id="entryLogfilter" tabindex="-1" aria-labelledby="entryLogfilterLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="entryLogfilterLabel">Filter Entry Logs</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <label for="filter_estate_id" class="form-label">Estate</label>
                    <select name="filter_estate_id" id="filter_estate_id" class="form-control form-select rounded"
                        {{ $userType == 3 || $userType == 4 ? 'disabled' : '' }}>
                        <option value="">Select Estate</option>
                        @if (!empty($estate_name_list) && count($estate_name_list) > 0)
                            @foreach ($estate_name_list as $estate)
                                <option value="{{ $estate->value }}"
                                    {{ !empty($filter_estate_id) && $estate->value == $filter_estate_id ? 'selected' : ($userType == 3 || $userType == 4 ? (!empty($user_estate_id) && $user_estate_id == $estate->value ? 'selected' : '') : '') }}>
                                    {{ $estate->label }}</option>
                            @endforeach
                        @endif
                    </select>

                    <p class="text-danger required-label mb-1 hide">Please select estate</p>

                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="selected_estate_id" value="">
                        <input type="hidden" name="" id="selected_blk_no" value="">
                        <input type="hidden" name="" id="selected_unit_no" value="">
                        <input type="hidden" name="" id="selected_vehicle_id" value="">
                        <input type="hidden" name="" id="selected_start_date" value="">
                        <input type="hidden" name="" id="selected_end_date" value="">

                        <div class="w-50">
                            <label for="filter_blk_no" class="form-label">Blk No.</label>
                            <select name="filter_blk_no" id="filter_blk_no" class="form-control form-select rounded">
                                <option value="">Select Blk No</option>
                                {{-- @if (!empty($residents_blk_no_list) && count($residents_blk_no_list) > 0)
                                    @foreach ($residents_blk_no_list as $resident_blk_no)
                                        <option value="{{ $resident_blk_no->block_number }}"
                                            {{ !empty($filter_resident_blk_no) && $resident_blk_no->block_number == $filter_resident_blk_no ? 'selected' : '' }}>
                                            {{ $resident_blk_no->block_number }}</option>
                                    @endforeach
                                @endif --}}
                            </select>
                        </div>

                        <div class="w-50">
                            <label for="filter_unit_no" class="form-label">Unit No.</label>
                            <select name="filter_unit_no" id="filter_unit_no" class="form-control form-select rounded">
                                <option value="">Select Unit No</option>
                            </select>
                        </div>

                    </div>

                    <label for="filter_vehicle" class="form-label mt-2">Vehicle License</label>
                    <select name="filter_vehicle" id="filter_vehicle" class="form-control form-select rounded">
                        <option value="">Select Vehicle License</option>
                        {{-- @if (!empty($vehicle_list) && count($vehicle_list) > 0)
                            @foreach ($vehicle_list as $vehicle)
                                <option value="{{ $vehicle->value }}"
                                    {{ !empty($filter_vehicle) && $vehicle->value == $filter_vehicle ? 'selected' : '' }}>
                                    {{ $vehicle->label }}</option>
                            @endforeach
                        @endif --}}
                    </select>

                    <label for="entry_date" class="form-label pt-2">Date *</label>
                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name="entry_date"
                            id="entry_date">
                        <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" class="entry-img"
                            alt="" srcset="">
                    </div>
                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="selected_estate_id"
                            value="{{ $filter_estate_id ?? '' }}">

                        <input type="hidden" name="" id="selected_role_id" value="{{ $filter_role_id ?? '' }}">
                    </div>
                    <div class="modal-footer">
                        {{-- <button type="button" class="btn btn-success residence_filter_clear">Clear</button> --}}
                        <button type="button" class="btn form-cancel-btn" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn form-submit-btn" id="entry-filter-submit">Filter</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- filter model for Entry Logs --}}
    <div class="modal fade" id="exitLogfilter" tabindex="-1" aria-labelledby="exitLogfilterLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exitLogfilterLabel">Filter Exit Logs</h5>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                </div>
                <div class="modal-body">
                    <label for="exit_filter_estate_id" class="form-label">Estate</label>
                    <select name="exit_filter_estate_id" id="exit_filter_estate_id"
                        class="form-control form-select rounded" {{ $userType == 3 || $userType == 4 ? 'disabled' : '' }}>
                        <option value="">Select Estate</option>
                        @if (!empty($estate_name_list) && count($estate_name_list) > 0)
                            @foreach ($estate_name_list as $estate)
                                <option value="{{ $estate->value }}"
                                    {{ !empty($exit_filter_estate_id) && $estate->value == $exit_filter_estate_id ? 'selected' : ($userType == 3 || $userType == 4 ? (!empty($user_estate_id) && $user_estate_id == $estate->value ? 'selected' : '') : '') }}>
                                    {{ $estate->label }}</option>
                            @endforeach
                        @endif
                    </select>

                    <p class="text-danger required-label mb-1 hide">Please select estate</p>

                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="exit_selected_exit_estate_id" value="">
                        <input type="hidden" name="" id="exit_selected_exit_blk_no" value="">
                        <input type="hidden" name="" id="exit_selected_exit_unit_no" value="">
                        <input type="hidden" name="" id="exit_selected_exit_vehicle_id" value="">
                        <input type="hidden" name="" id="exit_selected_exit_start_date" value="">
                        <input type="hidden" name="" id="exit_selected_exit_end_date" value="">

                        <div class="w-50">
                            <label for="exit_filter_blk_no" class="form-label">Blk No.</label>
                            <select name="exit_filter_blk_no" id="exit_filter_blk_no"
                                class="form-control form-select rounded">
                                <option value="">Select Blk No</option>
                                {{-- @if (!empty($residents_blk_no_list) && count($residents_blk_no_list) > 0)
                                    @foreach ($residents_blk_no_list as $resident_blk_no)
                                        <option value="{{ $resident_blk_no->block_number }}"
                                            {{ !empty($filter_resident_blk_no) && $resident_blk_no->block_number == $filter_resident_blk_no ? 'selected' : '' }}>
                                            {{ $resident_blk_no->block_number }}</option>
                                    @endforeach
                                @endif --}}
                            </select>
                        </div>

                        <div class="w-50">
                            <label for="exit_filter_unit_no" class="form-label">Unit No.</label>
                            <select name="exit_filter_unit_no" id="exit_filter_unit_no"
                                class="form-control form-select rounded">
                                <option value="">Select Unit No</option>
                            </select>
                        </div>

                    </div>

                    <label for="exit_filter_vehicle" class="form-label mt-2">Vehicle License</label>
                    <select name="exit_filter_vehicle" id="exit_filter_vehicle" class="form-control form-select rounded">
                        <option value="">Select Vehicle License</option>
                        {{-- @if (!empty($vehicle_list) && count($vehicle_list) > 0)
                            @foreach ($vehicle_list as $vehicle)
                                <option value="{{ $vehicle->value }}"
                                    {{ !empty($filter_vehicle) && $vehicle->value == $filter_vehicle ? 'selected' : '' }}>
                                    {{ $vehicle->label }}</option>
                            @endforeach
                        @endif --}}
                    </select>

                    <label for="exit_date" class="form-label pt-2">Date *</label>
                    <div class="d-flex justify-content-between date-time-block">
                        <input type="text" class="form-control rounded date-time required" name="exit_date"
                            id="exit_date">
                        <img src="{{ asset('assets/images/icons/calendar-dots_outline.svg') }}" class="exit-img"
                            alt="" srcset="">
                    </div>
                    <div class="w-100 d-flex gap-2 mt-2">

                        <input type="hidden" name="" id="exit_selected_estate_id"
                            value="{{ $filter_estate_id ?? '' }}">

                        <input type="hidden" name="" id="exit_selected_role_id"
                            value="{{ $filter_role_id ?? '' }}">
                    </div>
                    <div class="modal-footer">
                        {{-- <button type="button" class="btn btn-success residence_filter_clear">Clear</button> --}}
                        <button type="button" class="btn form-cancel-btn" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn form-submit-btn" id="exit-filter-submit">Filter</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


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

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