@extends('layouts.app')

@section('title', 'All Listing Properties')

@push('css')
<!-- <link rel="stylesheet" href="{{ asset('assets/css/custom/task.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="lead-create.php" 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 Pending Properties</h4>
            <div class="btn-group">
                <form id="property-pending-form" method="POST" action="{{ route('pending.create') }}">
                    @csrf
                    <input type="hidden" name="property_type" id="property_type">
                    <x-button class="btn-primary" onclick="submitForm('residential')">Sell Residential</x-button>
                    <x-button class="btn-primary me-2" onclick="submitForm('commercial')">Sell Commercial</x-button>
                </form>
                <a type="button" href="{{ route('buyer-lender-process.create') }}"
                    class="btn btn-rounded btn-primary btn-sm">Buyer Lender Process</a>
            </div>
        </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-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#residential-pending-property" type="button" role="tab"
                    aria-controls="residential-pending-property" aria-selected="true">Residential</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="commercial-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#commercial-pending-property" type="button" role="tab"
                    aria-controls="commercial-pending-property" aria-selected="false">Commercial</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="buyerLender-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#buyerLender-pending-property" type="button" role="tab"
                    aria-controls="buyer-lender-process-property" aria-selected="false">Buyer Lender Process</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">

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


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

                @if ( $loop->iteration
                <= 2)
                    <x-pending.commercial-residential-table :properties="$properties" :tableId="$tab .'-pending-property-table'" />

                @elseif ($loop->iteration == 3 )

                <x-pending.buyer-lender-process-table :buyerLenderProcess="$properties"
                    :tableId="$tab .'-pending-property-table'" />

                @endif
            </div>
            @endforeach
        </div>





    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    function submitForm(type) {
        document.getElementById('property_type').value = type;
        document.getElementById('property-pending-form').submit();
    }
</script>
<script src="{{ asset('assets/js/custom/property/pending.js') }}"></script>
@endpush