@extends('layouts.app')

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

@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/property-pre-listing.css') }}">
@endpush

@section('content')
<x-content-body>
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Manage Pre Listings</h4>
            <a type="button" href="{{ route('pre-listings.create') }}" class="btn btn-rounded btn-primary btn-sm">Add New
                Property</a>
        </x-slot:title>

        <div class="table-responsive">
            <table id="property-pre-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>Status</th>
                        <th>Created By</th>
                        <th>Listing Date</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse (array_reverse($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>
                            @if ($property['is_this_part_of_portfolio'] === 'yes')
                            @if (!empty($property['portfolio']))
                            <div class="dropdown">
                                <button class=" btn-outline-success rounded-circle dropdown-toggle px-1"
                                    type="button" id="dropdownMenuButton" aria-expanded="false">p
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end"
                                    aria-labelledby="dropdownMenuButton">
                                    <li><a class="dropdown-item" href="#">
                                            {{ $property['portfolio']['portfolio_name'] }}</a></li>
                                </ul>
                            </div>
                            @endif
                            @endif
                        </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">
                                {{ ucfirst(trim(str_replace('for_', ' ', $property['transaction_type']))) }}
                            </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>
        </div>
    </x-row-card>
</x-content-body>
@endsection

@push('js')
<script src="{{ asset('assets/js/custom/property/pre-listing/pre-listing.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
    $(document).ready(function() {
        const additionalImages = [
            "https://picsum.photos/seed/picsum/400/400",
            "https://picsum.photos/seed/picsum/401/400",
            "https://picsum.photos/seed/picsum/402/400"
        ];

        additionalImages.forEach((image) => {
            $('body').append(
                `<a href="${image}" data-lightbox="property-images" style="display:none;"></a>`
            );
        });
    });
</script>
@endpush