@extends('network.layouts.app')

@section('title', 'Dashboard')

@section('content')
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- CKEditor Script -->
<script src="https://cdn.ckeditor.com/ckeditor5/35.3.0/classic/ckeditor.js"></script>

<style>
    /* .property-details {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    } */

    dt {
        font-weight: 600;
        color: #333;
    }

    dd {
        margin-bottom: 1rem;
        font-size: 1.1rem;
        color: #555;
    }

    /* .card-header {
        background-color: #343a40;
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
    } */

    .alert-dismissible {
        margin-bottom: 20px;
    }

    .property-details a {
        color: #007bff;
        text-decoration: none;
    }

    .property-details a:hover {
        text-decoration: underline;
    }

    .property-details dt,
    .property-details dd {
        margin-bottom: 0.5rem;
    }

    .row {
        margin-top: 20px;
    }

    .card {
        margin-top: 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }

    .property-info .card-header {
        font-size: 1.25rem;
        font-weight: 600;
        /* color: #fff; */
        color:#000;
        /* background-color: #000000; */
    }

    .property-info dl {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-gap: 15px;
        margin: 0;
    }

    .property-info dt {
        font-weight: 500;
        color: #333;
    }

    .property-info dd {
        font-size: 1rem;
        color: #555;
        margin-bottom: 0;
    }

    .property-info .property-url {
        font-size: 0.95rem;
        color: #007bff;
    }

    .property-info .property-url:hover {
        text-decoration: underline;
    }

    .property-info .pdf-link i {
        font-size: 1.2rem;
        color: red;
    }

    .property-info .pdf-link {
        font-size: 1rem;
        color: #007bff;
    }

    .property-info .pdf-link:hover {
        text-decoration: underline;
    }
</style>

<div class="p-4">
    <div class="card mb-4">
        <div class="card-body">
            @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
            @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
            <div class="property-info">
                <div class="d-flex justify-content-between">
                    <div></div>
                    <h2 class="mb-4 text-center">{{$listing->title}}</h2>
                    <div><a class="btn btn-dark" href="{{ route('network.listing.list.edit', $listing->id) }}">Edit</a></div>

                </div>
                <div class="row">
                    <!-- Agent Info & Location Info in Vertical Layout -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">Agent Info</div>
                            <div class="card-body">
                                <dl>
                                    <dt>Assigned to</dt>
                                    <dd>{{ $listing->agent->full_name ?? ''}}</dd>
                                    <dt>Status</dt>
                                    <dd>{{ $listing->status }}</dd>
                                    <dt>Sale Type</dt>
                                    <dd>{{ $listing->sale_type }}</dd>
                                    <dt>MLS #</dt>
                                    <dd>{{ $listing->mls_id }}</dd>
                                    <dt>Price</dt>
                                    <dd>${{ number_format($listing->price, 2) }}</dd>
                                    <dt>Price Reduced</dt>
                                    <dd>{{ $listing->price_reduced ? 'Yes' : 'No' }}</dd>
                                    <dt>Listing Rep.</dt>
                                    <dd>{{ $listing->agent->full_name ?? '' }}</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">Location Info</div>
                            <div class="card-body">
                                <dl>
                                    <dt>Address</dt>
                                    <dd>{{ $listing->address }} {{ $listing->address2 ? ', ' . $listing->address2 : '' }}</dd>
                                    <dt>City</dt>
                                    <dd>{{ $listing->city }}</dd>
                                    <dt>State</dt>
                                    <dd>{{ $listing->state }}</dd>
                                    <dt>Zip Code</dt>
                                    <dd>{{ $listing->zip }}</dd>
                                    <dt>County</dt>
                                    <dd>{{ $listing->county }}</dd>
                                    <dt>Latitude</dt>
                                    <dd>{{ $listing->latitude }}</dd>
                                    <dt>Longitude</dt>
                                    <dd>{{ $listing->longitude }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <!-- Lead History Section -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <span>
                                    <i class="fa-solid fa-calendar-check icon"></i> Lead History
                                </span>
                            </div>
                            <div class="card-body" style="overflow-y:scroll;height:648px">
                                @foreach($leadhistory as $month => $contactsInMonth)
                                <h5 class="mb-3 text-primary">{{ $month }}</h5>
                                @foreach($contactsInMonth as $contact)
                                <div class="card shadow-sm p-3 mb-3">
                                    <div class="d-flex justify-content-between">
                                        <h6>
                                            <i class="fas fa-info-circle text-info"></i>
                                            <b>Lead: {{ $contact->conversion }}</b>
                                        </h6>
                                        <div>
                                            <a href="{{ route('network.contact.edit', $contact->id) }}" class="text-secondary fs-5 me-2">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <p class="mb-1">
                                        <small><b>Assigned to : </b>{{ $contact->agent->full_name ?? 'N/A' }}</small>
                                    </p>
                                    <p class="mb-1">
                                        <small><b>Contact : </b> {{ $contact->full_name ?? 'N/A' }}</small>
                                    </p>
                                    <ul class="list-unstyled mb-0">
                                        <li> First Name: {{ $contact->fname }}</li>
                                        <li> Last Name: {{ $contact->lname }}</li>
                                        <li> Listing : {{ $contact->listing->title }}</li>
                                    </ul>
                                </div>
                                @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">Property Resources</div>
                            <div class="card-body">
                                <dl>
                                    <dt>Aerial Map</dt>
                                    <dd>
                                        @if(!empty($listing->aerial_map_url))
                                        <a class="pdf-link" href="{{ $listing->aerial_map_url }}" target="_blank">
                                            View PDF Document <i class="fa fa-file-pdf-o"></i>
                                        </a>
                                        @else
                                        <span>Not Available</span>
                                        @endif
                                    </dd>

                                    <dt>Locator Map</dt>
                                    <dd>
                                        @if(!empty($listing->locator_map_url))
                                        <a class="pdf-link" href="{{ $listing->locator_map_url }}" target="_blank">
                                            View PDF Document <i class="fa fa-file-pdf-o"></i>
                                        </a>
                                        @else
                                        <span>Not Available</span>
                                        @endif
                                    </dd>

                                    <dt>Topo Map</dt>
                                    <dd>
                                        @if(!empty($listing->topo_map_url))
                                        <a class="pdf-link" href="{{ $listing->topo_map_url }}" target="_blank">
                                            View PDF Document <i class="fa fa-file-pdf-o"></i>
                                        </a>
                                        @else
                                        <span>Not Available</span>
                                        @endif
                                    </dd>

                                    <dt>Brochure</dt>
                                    <dd>
                                        @if(!empty($listing->brochure_url))
                                        <a class="pdf-link" href="{{ $listing->brochure_url }}" target="_blank">
                                            View Brochure <i class="fa fa-file-pdf-o"></i>
                                        </a>
                                        @else
                                        <span>Not Available</span>
                                        @endif
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">Dates & Status</div>
                            <div class="card-body">
                                <dl>
                                    <dt>Listed Date</dt>
                                    <dd>{{ $listing->listed_date }}</dd>

                                    <dt>Expiration Date</dt>
                                    <dd>{{ $listing->expiration_date }}</dd>

                                    <dt>Created</dt>
                                    <dd>{{ $listing->created_at }}</dd>

                                    <dt>Modified</dt>
                                    <dd>{{ $listing->updated_at }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">Property Features</div>
                            <div class="card-body">
                                <dl>
                                    <dt>Bedrooms</dt>
                                    <dd>{{ $listing->bedroom }}</dd>

                                    <dt>Bathrooms</dt>
                                    <dd>{{ $listing->bathroom }}</dd>

                                    <dt>Dwelling Sq Ft</dt>
                                    <dd>{{ $listing->dwelling }}</dd>

                                    <dt>HOA Annually</dt>
                                    <dd>{{ $listing->hoa_annually }}</dd>

                                    <dt>Taxes Annually</dt>
                                    <dd>{{ $listing->taxes_annually }}</dd>

                                    <dt>Types</dt>
                                    <dd>{{ $listing->types }}</dd>

                                    <dt>Tags</dt>
                                    <dd>{{ $listing->tags }}</dd>

                                    <dt>About</dt>
                                    <dd>{!! $listing->description !!}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- First Column (Left Side) -->
                <div class="row">
                    <div class="col-md-12">
                        @if(!empty($listing->map_embed))
                        <div class="property-info">
                            <div class="card-header">Location Map</div>
                            <div class="card-body">
                                <iframe src="{{ $listing->map_embed }}" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        </div>
                        @endif

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        @if(!empty($listing->video_embed_primary))
                        <div class="property-info">
                            <div class="card-header">Video Tour</div>
                            <div class="card-body">
                                <iframe src="{{ $listing->video_embed_primary }}" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        @if(!empty($listing->vr_tours))
                        <div class="property-info">
                            <div class="card-header">Virtual Tour</div>
                            <div class="card-body">
                                <iframe src="{{ $listing->vr_tours }}" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
               <div class="row">
               <div class="property-info mt-4">
                    <div class="card-header">Contacts</div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Inquiry</th>
                                    <th>Created</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($contacts as $contact)
                                <tr>
                                    <td>{{ $contact->id }}</td>
                                    <td>{{ $contact->full_name }}</td>
                                    <td>{{ $contact->email }}</td>
                                    <td>{{ $contact->phone }}</td>
                                    <td>{{ $contact->inquiry }}</td>
                                    <td>{{ $contact->created_at->format('Y-m-d') }}</td> <!-- Display only date -->
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center">No Contact found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
               </div>
                
            </div>
        </div>
    </div>
</div>
</div>

@endsection