@extends('mainlayout.layout')

@section('title', config('app.name') . ' | ' . $property->name)
@section('topbar-search', 'enabled')

@section('content')
<main class="portal-workspace portal-light-type">
    <header class="portal-page-header">
        <div>
            @if($property->propertyowner)
                <a class="portal-back-link" href="{{ route('support.property-owners.show', $property->propertyowner) }}"><i class="bx bx-left-arrow-alt"></i> {{ $property->propertyowner->name }}</a>
            @else
                <a class="portal-back-link" href="{{ url('/dashboard') }}"><i class="bx bx-left-arrow-alt"></i> Dashboard</a>
            @endif
            <span class="portal-eyebrow">Project</span>
            <h1>{{ $property->name }}</h1>
            <p>Read-only project, inventory, order, and visitation information.</p>
        </div>
        <span class="portal-status {{ $property->visible ? 'portal-status--success' : 'portal-status--neutral' }}">{{ $property->status_label }}</span>
    </header>

    <section class="portal-kpi-grid portal-kpi-grid--four" aria-label="Project summary">
        @foreach([
            ['Total plots', $metrics['plots'], 'bx-grid-alt'],
            ['Available plots', $metrics['available_plots'], 'bx-check-circle'],
            ['Orders', $metrics['orders'], 'bx-cart'],
            ['Open cases', $metrics['open_cases'], 'bx-support'],
        ] as [$label, $value, $icon])
            <article class="portal-kpi-card"><span class="portal-kpi-icon"><i class="bx {{ $icon }}"></i></span><span class="portal-kpi-label">{{ $label }}</span><strong>{{ number_format($value) }}</strong></article>
        @endforeach
    </section>

    <div class="portal-detail-grid">
        <section>
            <article class="portal-card portal-readonly-copy">
                <header class="portal-card-header"><div><h2>Project overview</h2><p>Customer-facing description and location.</p></div></header>
                <p>{{ strip_tags($property->description_mini_en ?: ($property->description_en ?: 'No project description is available.')) }}</p>
            </article>

            <article class="portal-card">
                <header class="portal-card-header"><div><h2>Plot inventory</h2><p>Current plots and their availability.</p></div><span class="portal-status portal-status--neutral">{{ $plots->total() }} total</span></header>
                <div class="table-responsive"><table class="table portal-table"><thead><tr><th>Plot</th><th>Area</th><th>Land use</th><th>Listed amount</th><th>Status</th></tr></thead><tbody>
                @forelse($plots as $plot)
                    <tr><td>{{ $plot->plotnumber ?: ($plot->name ?: 'Not specified') }}</td><td>{{ $plot->area_size ? number_format((float) $plot->area_size) . ' SQM' : 'Not available' }}</td><td>{{ optional($plot->landuse)->use_en ?: 'Not specified' }}</td><td>{{ $plot->amount ? 'TZS ' . number_format((int) $plot->amount) : 'Not available' }}</td><td><span class="portal-status {{ (int) $plot->status === 1 ? 'portal-status--success' : 'portal-status--neutral' }}">{{ $plot->status_description ?: 'Unknown' }}</span></td></tr>
                @empty<tr><td colspan="5"><div class="portal-empty portal-empty--muted compact">No plots are recorded for this project.</div></td></tr>@endforelse
                </tbody></table></div>
                @if($plots->hasPages())<div class="portal-pagination">{{ $plots->links() }}</div>@endif
            </article>

            <article class="portal-card">
                <header class="portal-card-header"><div><h2>Recent orders</h2><p>The 25 most recent orders for this project.</p></div><span class="portal-status portal-status--neutral">{{ $metrics['orders'] }} total</span></header>
                <div class="table-responsive"><table class="table portal-table"><thead><tr><th>Order</th><th>Customer</th><th>Plot</th><th>Payment plan</th><th>Amount</th><th>Status</th></tr></thead><tbody>
                @forelse($orders as $order)
                    @php
                        $customerName = trim(optional($order->user)->first_name . ' ' . optional($order->user)->middle_name . ' ' . optional($order->user)->last_name);
                    @endphp
                    <tr class="portal-clickable-row" data-href="{{ route('support.orders.show', $order) }}" tabindex="0" role="link" aria-label="View order {{ $order->referenceid ?: $order->id }}">
                        <td><a href="{{ route('support.orders.show', $order) }}">{{ $order->referenceid ?: $order->id }}</a><small>{{ optional($order->created_at)->format('d M Y') }}</small></td>
                        <td>{{ $customerName ?: 'Unknown customer' }}<small>{{ optional($order->user)->phone ?: 'Phone not available' }}</small></td>
                        <td>{{ optional($order->plot)->plotnumber ?: 'Not selected' }}</td>
                        <td>{{ ucfirst($order->order_type ?: 'Not specified') }}</td>
                        <td>TZS {{ number_format((int) $order->amount) }}</td>
                        <td><span class="portal-status">{{ $order->status_description ?: 'Status unavailable' }}</span></td>
                    </tr>
                @empty<tr><td colspan="6"><div class="portal-empty portal-empty--muted compact">No orders are recorded for this project.</div></td></tr>@endforelse
                </tbody></table></div>
            </article>

            <article class="portal-card">
                <header class="portal-card-header"><div><h2>Recent visit bookings</h2><p>Customer site-visit selections and payment status.</p></div><span class="portal-status portal-status--neutral">{{ $metrics['bookings'] }} total</span></header>
                <div class="table-responsive"><table class="table portal-table"><thead><tr><th>Customer</th><th>Plot</th><th>Visit date</th><th>Location</th><th>Payment</th><th>Status</th></tr></thead><tbody>
                @forelse($bookings as $booking)
                    @php
                        $visitPayment = $booking->visitPayments->sortByDesc('created_at')->first();
                        $customerName = trim(optional($booking->user)->first_name . ' ' . optional($booking->user)->middle_name . ' ' . optional($booking->user)->last_name);
                    @endphp
                    <tr>
                        <td>@if($booking->user)<a href="{{ route('support.customers.show', $booking->user) }}">{{ $customerName ?: 'Customer #' . $booking->userid }}</a>@else Unknown customer @endif<small>{{ optional($booking->user)->phone }}</small></td>
                        <td>{{ optional($booking->plot)->plotnumber ?: 'Not selected' }}</td>
                        <td>{{ $booking->booked_date_time ?: ($booking->booked_date ?: 'Not selected') }}</td>
                        <td>{{ $booking->location ?: 'Not specified' }}</td>
                        <td>{{ $visitPayment ? strtoupper($visitPayment->payment_option ?: 'Recorded') . ' · TZS ' . number_format((int) $visitPayment->amount) : ((int) $booking->amount > 0 ? 'Not recorded' : 'Free') }}</td>
                        <td><span class="portal-status">{{ ucfirst($visitPayment?->status_description ?: ($booking->status ?: 'Pending')) }}</span></td>
                    </tr>
                @empty<tr><td colspan="6"><div class="portal-empty portal-empty--muted compact">No visit bookings are recorded for this project.</div></td></tr>@endforelse
                </tbody></table></div>
            </article>
        </section>

        <aside>
            <article class="portal-card portal-facts">
                <header class="portal-facts-header"><h2>Management firm</h2>@if($property->propertyowner)<a href="{{ route('support.property-owners.show', $property->propertyowner) }}">View firm <i class="bx bx-right-arrow-alt"></i></a>@endif</header>
                <dl>
                    <div><dt>Company</dt><dd>{{ optional($property->propertyowner)->name ?: 'Not assigned' }}</dd></div>
                    <div><dt>Phone</dt><dd>{{ optional($property->propertyowner)->mobilenumber ?: 'Not available' }}</dd></div>
                    <div><dt>Email</dt><dd>{{ optional($property->propertyowner)->email ?: 'Not available' }}</dd></div>
                </dl>
            </article>
            <article class="portal-card portal-facts">
                <h2>Project details</h2>
                <dl>
                    <div><dt>Project ID</dt><dd>{{ $property->property_plotid ?: $property->id }}</dd></div>
                    <div><dt>Region</dt><dd>{{ optional($property->regionDetails)->name ?: ($property->region ?: 'Not available') }}</dd></div>
                    <div><dt>District</dt><dd>{{ optional($property->districtDetails)->name ?: ($property->district ?: 'Not available') }}</dd></div>
                    <div><dt>Address</dt><dd>{{ $property->address ?: 'Not available' }}</dd></div>
                    <div><dt>Area</dt><dd>{{ $property->area_size ? number_format((float) $property->area_size) . ' SQM' : 'Not available' }}</dd></div>
                    <div><dt>Launch date</dt><dd>{{ optional($property->livedate)->format('d M Y') ?: 'Not available' }}</dd></div>
                </dl>
            </article>
            <article class="portal-card portal-facts">
                <h2>Payment overview</h2>
                <dl>
                    <div><dt>Order value</dt><dd>TZS {{ number_format($metrics['order_value']) }}</dd></div>
                    <div><dt>Payments recorded</dt><dd>TZS {{ number_format($metrics['payments']) }}</dd></div>
                </dl>
            </article>
            <article class="portal-card">
                <header class="portal-card-header"><div><h2>Visit options</h2><p>Configured site-visit availability.</p></div></header>
                @forelse($visitOptions as $option)
                    <div class="portal-readonly-list-item"><strong>{{ ucfirst($option->bookingday ?: 'Day not set') }} · {{ $option->visit_times ?: 'Time not set' }}</strong><small>{{ $option->location ?: 'Location not set' }} · {{ $option->charge ?: 'Free' }}{{ $option->amount ? ' · TZS ' . number_format((int) $option->amount) : '' }}</small></div>
                @empty<div class="portal-empty portal-empty--muted compact">No visit options are configured.</div>@endforelse
            </article>
        </aside>
    </div>
</main>
@endsection

@push('scripts')
<script>
(function () {
    document.querySelectorAll('.portal-clickable-row[data-href]').forEach(function (row) {
        function openRecord() { window.location.assign(row.dataset.href); }
        row.addEventListener('click', function (event) { if (!event.target.closest('a, button')) openRecord(); });
        row.addEventListener('keydown', function (event) {
            if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openRecord(); }
        });
    });
})();
</script>
@endpush