@extends('layouts.app')


@section('title', 'Expire Properties')

@push('css')
@endpush

@section('content')


<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-filter id="propertyFilter">
        <div class="row g-3">
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Middle Initial')" />
                <x-text-input placeholder="Enter Middle Initial" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Last Name')" />
                <x-text-input placeholder="Enter Last Name" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Company')" />
                <x-text-input placeholder="Enter Company" />
            </div>
        </div>
        <div class="text-end mt-2">
            <a href="#" class="btn btn-sm btn-primary"><i class="fas fa-calendar me-3"></i>Search</a>
        </div>
    </x-filter>



    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Expired Properties</h4>
        </x-slot:title>
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="residential-expire-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#residential-expire-property" type="button" role="tab"
                    aria-controls="residential-expire-property" aria-selected="true">Residential</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="commercial-expire-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#commercial-expire-property" type="button" role="tab"
                    aria-controls="commercial-expire-property" aria-selected="false">Commercial</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="agriculture-expire-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#agriculture-expire-property" type="button" role="tab"
                    aria-controls="agriculture-process-property" aria-selected="false">Agriculture</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">

            @foreach (['residential' => $residential, 'commercial' => $commercial, 'agriculture' => $agriculture] as $tab => $properties)

            <div class="tab-pane fade @if ($loop->first) show active @endif" id="{{ $tab }}-expire-property"
                role="tabpanel" aria-labelledby="{{ $tab }}-expire-property-tab-btn">

                @if ($loop->iteration <= 3)
                <x-expire.table :properties="$properties"  :tableId="$tab . '-expire-property-table'" />
                @endif
            </div>
            @endforeach
        </div>
    </x-row-card>
</x-content-body>
@endsection


@push('js')

<script src="{{ asset('assets/js/custom/property/pre-listing/pre-listing.js') }}"></script>
<script src="{{ asset('assets/js/custom/property/pending.js') }}"></script>
<script>
    var commonConfig = {
        searching: true,
        paging: true,
        select: true,
        info: false,
        lengthChange: true,
        language: {
            paginate: {
                next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
            }
        }
    };

    // Initialize DataTables
    $('#residential-expire-property-table').DataTable(commonConfig);
    $('#commercial-expire-property-table').DataTable(commonConfig);
    $('#agriculture-expire-property-table').DataTable(commonConfig);
</script>
@endpush