@extends('layouts.app')

@section('title', 'All Listing 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="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 All Listings</h4>
        </x-slot:title>
        <div class="table-responsive">
            <table id="property-listing-table" class="display  m-0 w-100">
                <thead>
                    <tr>
                        <th>Listing ID</th>
                        <th>Image</th>
                        <th>Property Address</th>
                        <!-- <th></th> -->
                        <th>Property Type</th>
                        <th>Listing Price</th>
                        <th>Stage</th>
                        <th>Created By</th>
                        <th>Listing Date</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($properties['properties'] as $property)
                    <tr>
                        <td>
                            {{ $property['listing_id'] }}
                        </td>
                        <td>
                            <a href="https://picsum.photos/seed/picsum/400/400" data-lightbox="property-images">
                                <img src="https://picsum.photos/seed/picsum/40/40" alt="property image" class="img-preview img-fluid rounded">
                            </a>

                            {{-- <img  src="https://picsum.photos/seed/picsum/40/40" alt="property image" class="img-preview img-fluid rounded"> --}}
                        </td>
                        <td class="w-25">
                            {{ $property['addresses'][0]['street'] ?? '' }}
                            {{ isset($property['addresses'][0]['street']) ? ',' : '' }}
                            {{ $property['addresses'][0]['city'] ?? '' }}
                            {{ isset($property['addresses'][0]['city']) ? `<br>` : '' }}
                            {{ $property['addresses'][0]['state'] ?? '' }}
                            {{ $property['addresses'][0]['zip_code'] ?? '' }}
                        </td>

                        <td style="width: 17%; ">
                            {{ ucfirst(strtolower($property['property_Type'])) }} -
                            {{ str_replace('_', ' ', ucfirst($property['property_sub_type'])) }}
                        </td>
                        <td>${{ number_format($property['listing_price'], 0) }}</td>
                        {{-- <td>{{ $property['listing_price'] }}</td> --}}
                        <td>
                            <span class="badge badge-lg light badge-primary">
                                Pre Listing
                            </span>
                        </td>
                        <td>
                            <a href="javascript:void(0);">
                                <strong>{{ $property['created_by']['f_name'] }}
                                    {{ $property['created_by']['l_name'] }}</strong></a>
                        </td>
                        <td><a href="javascript:void(0);">{{ $property['date'] }}</a></td>
                        <td>
                            <div class="d-flex justify-content-center">
                                <a href="{{ route('pre-listings.show', ['pre_listing' => $property['id']]) }}"
                                    class="btn btn-warning shadow btn-xs sharp me-1"><i
                                        class="fa-solid fa-eye"></i></a>
                                <a href="{{ route('pre-listings.edit', ['pre_listing' => $property['id']]) }}"
                                    class="btn btn-primary shadow btn-xs sharp me-1"><i
                                        class="fa fa-pencil"></i></a>
                                <button
                                    data-url="{{ route('pre-listings.destroy', ['pre_listing' => $property['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>
<!-- Closing Property Listing's js -->
<script>
    // Common configuration object
    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-closeing-property-table').DataTable(commonConfig);
    $('#commercial-closeing-property-table').DataTable(commonConfig);
</script>
<script>
    $(document).on('click', '.deleteButton', function(event) {

        event.preventDefault();

        let url = $(this).data('url');

        // Show the SweetAlert2 confirmation dialog
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            // If user confirms deletion
            if (result.isConfirmed) {
                // Send an AJAX request to delete the user

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {


                        if (response.success) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'Closing Property has been deleted.',
                                icon: 'success',
                                showConfirmButton: true,
                                customClass: {
                                    confirmButton: 'btn btn-primary' // Set your desired CSS class here
                                }
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error! Unable to delete Pending Property!',
                                text: 'Unable to delete Pending Property.',
                                text: response.message,
                                icon: 'error',
                                showConfirmButton: true,
                                customClass: {
                                    confirmButton: 'btn btn-primary' // Set your desired CSS class here
                                }
                            });
                        }

                    },
                    error: function(xhr, status, error) {
                        console.log(error);
                    }
                });
            }
        });
    });
</script>
<!-- Pending Property Listing's 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>
<!-- Expire Properties js -->
<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