@extends('layouts.app')

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

@push('css')
<style>
     /* Apply background color to data tabl */
     #property-listing-table,
    #property-listing-table th,
    #property-listing-table td {
        border: 1px solid #ecedf1 !important;
        /* background-color: #ecedf1; Apply background color */
    }
    th {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }


/* If you want to specifically target DataTables padding */
/* #property-listing-table.dataTable tbody td {
    padding: 0.3rem 0.5rem !important;
} */

</style>
@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 Listings</h4>
                <div class="">
                    <form id="property-form" method="POST" action="{{ route('listings.create') }}">
                        @csrf
                        <input type="hidden" name="property_type" id="property_type">
                        <button type="button" class="btn btn-rounded btn-primary btn-sm"
                            onclick="submitForm('residential')">
                            New Residential Properties
                        </button>
                        <button type="button" class="btn btn-rounded btn-primary btn-sm"
                            onclick="submitForm('commercial')">
                            New Commercial Properties
                        </button>
                        <button type="button" class="btn btn-rounded btn-primary btn-sm"
                            onclick="submitForm('agriculture')">
                            New Agriculture Property
                        </button>
                    </form>

                    </script>
                </div>
            </x-slot:title>
            <div class="table-responsive">
                <table id="property-listing-table" class="table-bordered" data-module="sticky-table" style=" width: 100%;">
                    <thead>
                        <tr>
                            <th>Listing ID</th>
                            <th style="width: 8%;">Image</th>
                            <th>Adress</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Listing Price</th>
                            <th>created By</th>
                            <th>Listing Date</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($listings as $listing)
                            <tr>
                                <td> {{ $listing['id'] }}</td>
                                <td> <img src="https://picsum.photos/200"  class="img-fluid rounded-top " alt="property image" />
                                </td>
                                <td>
                                    {{ $listing['properties']['addresses'][0]['street'] ?? '' }},
                                    {{ $listing['properties']['addresses'][0]['city'] ?? '' }},
                                    {{ $listing['properties']['addresses'][0]['zip_code'] ?? '' }}
                                </td>
                                <td>{{ isset($listing['properties']) ? $listing['properties']['property_Type'] : 'N/A' }} ( {{ isset($listing['properties']) ? $listing['properties']['property_sub_type'] : 'N/A' }} )</td>
                                <td><span class="badge badge-lg light badge-primary">Listing</span></td>
                                <td>{{ isset($listing['properties']) && isset($listing['properties']['listing_price']) ? $listing['properties']['listing_price'] : 'N/A' }}</td>
                                <td><a href="javascript:void(0);">
                                        <strong>
                                            @if (isset($listing['created_by']['f_name']) && isset($listing['created_by']['l_name']))
                                                {{ $listing['created_by']['f_name'] }}
                                                {{ $listing['created_by']['l_name'] }}
                                            @else
                                                N/A
                                            @endif
                                        </strong>
                                    </a></td>
                                <td>
                                    <a href="javascript:void(0);">{{ \Carbon\Carbon::parse($listing['updated_at'])->format('Y/m/d') }}</a>
                                </td>
                                <td>
                                    <div class="d-flex justify-content-center">
                                        @isset($listing['properties'])
                                        <a href="{{ route('listings.edit', ['type' => $listing['properties']['property_Type'], 'listing' => $listing['id']]) }}"
                                            class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i>
                                        </a>
                                        @endisset

                                        <button data-url="{{ route('listings.destroy', ['listing' => $listing['id']]) }}"
                                            class="btn btn-danger deleteButton shadow btn-xs sharp me-1">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-row-card>
    </x-content-body>
@endsection


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