{{--
    Project Details — docs/wireframes-v12/view-project.html, rebuilt on the
    wireframe's own markup (CR-2b, spec §12).

    v12's layout, top to bottom:

      1. a header row: the three status pills on the left, Edit Project and
         Download Brochure on the right, both `.btn.btn-outline`;
      2. a card carrying the two-tab strip, Project Details | Unit Inventory;
      3. the Details panel — Project Overview + Location side by side as
         `.detail-grid` label/value pairs, the four unit tiles, the tower
         summary, and a Recent Activity timeline;
      4. the Inventory panel — one card, one `.data-table` of units.

    The project's name and code are NOT in the content: v12 puts them in the
    page title ("Navratna Gulmohar Park - PRJ-009"), which is where they are
    here too. That is where the old `@section('subtitle')` line went — it said
    the project's name, and the title says it now.

    ## What this screen has that v12 does not

    Three cards, all of them showing fields the project FORM collects and that
    v12's detail panels stop short of: Structure Details, Compliance & Legal
    and Marketing & Media. A detail screen that cannot show what its own form
    captures sends the reader to the edit page to read. They are titled with
    the form's own section names and drawn in the same `.detail-grid` language,
    so the two screens are read in the same order.

    The wireframe's "Tower Wise Summary" — four static tower cards with a sold
    bar — used to be a wings section here, reading and managing the project's
    wings and their floor plans. CR-5 §15.1 removed it with the tables behind
    it; the Structure Details card's "Towers" row is what is left, and it reads
    the project's own `towers_count` field rather than a live count.

    The wireframe's "Recent Activity" timeline is not carried over at all: the
    activity log it would read is per-model and gets its own screen.

    The Inventory tab's table carries three columns — Unit No., Carpet Area,
    Status — and no row actions. That is the whole of a unit since CR-5 §15.1:
    it is not editable anywhere, and the wing/floor/type/price columns it used
    to carry are gone with the modules that maintained them.

    `parking_slots` and `configurations` are deliberately absent. v12 has no
    field for either; the columns stay in the database (spec §3) and no screen
    reads them.

    ## RERA number

    v12 shows it twice — as a header pill and as the last row of the Location
    card — because it has nowhere else to put it. Here it is the header pill
    and a row of Compliance & Legal, which is where the rest of the RERA
    paperwork (valid-until, NA permission, certificates) already lives. One
    value, one detail row.
--}}
@extends('layouts.app')

@section('title', __('projects.show_title_for', ['name' => $project->name, 'code' => $project->code]))

@section('breadcrumbs')
    <x-breadcrumbs :items="[
        __('projects.title') => route('projects.index'),
        __('projects.show_title') => null,
    ]" />
@endsection

@section('content')
    @php
        // Rendered as a dash rather than an empty cell, so an unanswered row
        // still reads as a row. projects has no not-recorded key of its own —
        // the character is the whole string.
        $blank = '—';

        $brochureSlot = \App\Enums\ProjectFileSlot::Brochure;
    @endphp

    <!--begin::Header row-->
    <div class="d-flex justify-between align-center flex-wrap gap-3 mb-4">
        <div class="d-flex gap-2 align-center flex-wrap">
            <x-status-badge :status="$project->status?->value" />
            {{-- One pill holding the comma-joined labels since CR-5 §15.2.3,
                 for the same reason the listing's cell is one pill: v12 draws
                 a single badge here and a multi-typed project must not turn
                 the header strip into a second row of chips. --}}
            <span class="badge badge-primary">{{ $project->typeLabels() }}</span>
            @if (filled($project->rera_no))
                <span class="badge badge-info">{{ $project->rera_no }}</span>
            @endif
        </div>

        {{-- v12 puts Download Brochure beside Edit Project, both as outline
             buttons and in that order. It is not behind the same gate: editing
             needs the update policy, and downloading is a read, gated by
             ProjectPolicy@view like this page — so a sales user who cannot
             edit still gets the file. It renders only when the slot holds
             something. --}}
        <div class="d-flex gap-2">
            @can('update', $project)
                <a href="{{ route('projects.edit', $project) }}" class="btn btn-outline">
                    <i class="fa-solid fa-pen" aria-hidden="true"></i>{{ __('projects.actions.edit_project') }}
                </a>
            @endcan

            @if (filled($project->{$brochureSlot->pathColumn()}))
                <a href="{{ route('projects.files.download', [$project, $brochureSlot->value]) }}" class="btn btn-outline">
                    <i class="fa-solid fa-download" aria-hidden="true"></i>{{ __('projects.actions.download_brochure') }}
                </a>
            @endif
        </div>
    </div>
    <!--end::Header row-->

    {{-- v12's two-tab strip, in a card of its own with no bottom margin so the
         panel below reads as attached to it.

         The tabs are real links to the panels they reveal, not buttons with an
         inline onclick the way v12 writes them: nrems-tabs.js (pushed below)
         upgrades them in place, and with no Javascript at all both panels
         simply render one under the other — every unit and every detail still
         on the page, which is the right way for a read-only screen to fail.

         Avoiding the inline handler is a step toward the planned strict CSP,
         not arrival at it: this screen still emits `@push('scripts')` inline
         `<script>` blocks. That predates CR-2 and is out of its scope. --}}
    <div class="card" data-nrems-tabs>
        <nav class="tabs" aria-label="{{ __('projects.tabs.label') }}">
            <a href="#tab-details" class="tab-item active" data-nrems-tab="tab-details">
                <i class="fa-solid fa-city" aria-hidden="true"></i>{{ __('projects.tabs.details') }}
            </a>
            <a href="#tab-inventory" class="tab-item" data-nrems-tab="tab-inventory">
                <i class="fa-solid fa-building" aria-hidden="true"></i>{{ __('projects.tabs.inventory') }}
            </a>
        </nav>
    </div>

    <!--begin::Tab — Project Details-->
    <div id="tab-details" class="tab-content-panel">
        <div class="grid-2 mb-4">
            <x-card :title="__('projects.summary.information')" icon="fa-solid fa-city">
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.name') }}</span>
                        <span class="value">{{ $project->name }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.code') }}</span>
                        <span class="value">{{ $project->code }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.project_type') }}</span>
                        <span class="value">{{ $project->typeLabels() ?: $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.status') }}</span>
                        <span class="value"><x-status-badge :status="$project->status?->value" /></span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.launch_date') }}</span>
                        <span class="value">{{ $project->launch_date?->format(config('nrems.date_format')) ?? $blank }}</span>
                    </div>
                    {{-- "Promoter", not the form's "Developing Entity Name":
                         view-project.html labels this row with the short word.
                         Its own key, not the index column's — see
                         lang/en/projects.php. --}}
                    <div class="detail-item">
                        <span class="label">{{ __('projects.summary.promoter') }}</span>
                        <span class="value">{{ $project->promoter_name }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.promoter_contact') }}</span>
                        <span class="value">{{ $project->promoter_contact ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.total_units') }}</span>
                        <span class="value">{{ $project->total_units ?? $blank }}</span>
                    </div>
                    {{-- Not a v12 row. The form collects a description and a
                         detail screen should show it; it runs the width of the
                         grid because a paragraph in a half-column column is a
                         column of single words. --}}
                    <div class="detail-item detail-item-wide">
                        <span class="label">{{ __('projects.fields.description') }}</span>
                        <span class="value">{{ $project->description ?? $blank }}</span>
                    </div>
                </div>
            </x-card>

            <x-card :title="__('projects.sections.location')" icon="fa-solid fa-map-marker-alt">
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="label">{{ __('projects.summary.address') }}</span>
                        <span class="value">{{ collect([$project->address_line1, $project->address_line2])->filter()->implode(', ') }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.city') }}</span>
                        <span class="value">{{ $project->city }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.state') }}</span>
                        <span class="value">{{ $project->state }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.pincode') }}</span>
                        <span class="value">{{ $project->pincode }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.landmark') }}</span>
                        <span class="value">{{ $project->landmark ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.survey_number') }}</span>
                        <span class="value">{{ $project->survey_number ?? $blank }}</span>
                    </div>
                    <div class="detail-item detail-item-wide">
                        <span class="label">{{ __('projects.fields.google_maps_link') }}</span>
                        <span class="value"><x-external-link :url="$project->google_maps_link" /></span>
                    </div>
                </div>
            </x-card>
        </div>

        {{-- v12's four unit tiles, icons and tints included. --}}
        <div class="grid-4 mb-4">
            @foreach ([
                ['label' => __('projects.summary.total_units'), 'value' => $project->units_total, 'icon' => 'fa-building', 'tone' => 'blue', 'text' => ''],
                ['label' => __('projects.summary.available'), 'value' => $unitCounts['available'], 'icon' => 'fa-check-circle', 'tone' => 'green', 'text' => 'text-success'],
                ['label' => __('projects.summary.booked'), 'value' => $unitCounts['booked'], 'icon' => 'fa-file-contract', 'tone' => 'cyan', 'text' => 'text-info'],
                ['label' => __('projects.summary.on_hold'), 'value' => $unitCounts['hold'], 'icon' => 'fa-clock', 'tone' => 'yellow', 'text' => 'text-warning'],
            ] as $tile)
                <div class="stat-card">
                    <div class="stat-icon {{ $tile['tone'] }}"><i class="fa-solid {{ $tile['icon'] }}" aria-hidden="true"></i></div>
                    <div class="stat-value {{ $tile['text'] }}">{{ $tile['value'] }}</div>
                    <div class="stat-label">{{ $tile['label'] }}</div>
                </div>
            @endforeach
        </div>

        <div class="grid-2 mb-4">
            <x-card :title="__('projects.sections.structure')" icon="fa-solid fa-building">
                <div class="detail-grid">
                    <div class="detail-item">
                        {{-- The project's own field, not a count of wings:
                             the wings table is gone (CR-5 §15.1) and this is
                             the only figure left that answers the label. --}}
                        {{-- The `?? $blank` on these two stopped being
                             theoretical with CR-5 §15.2.4: both are optional
                             now and `towers_count` is nullable, so a project
                             saved with the fields left blank reads as "—"
                             here rather than as a 0 nobody typed. --}}
                        <span class="label">{{ __('projects.columns.towers') }}</span>
                        <span class="value">{{ $project->towers_count ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.floors_per_tower') }}</span>
                        <span class="value">{{ $project->floors_per_tower ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.total_land_area') }}</span>
                        <span class="value">{{ $project->total_land_area ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.built_up_area') }}</span>
                        <span class="value">{{ $project->built_up_area ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.open_space_pct') }}</span>
                        <span class="value">{{ $project->open_space_pct ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.construction_start_date') }}</span>
                        <span class="value">{{ $project->construction_start_date?->format(config('nrems.date_format')) ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.summary.possession') }}</span>
                        <span class="value">{{ $project->expected_completion_date?->format(config('nrems.date_format')) ?? $blank }}</span>
                    </div>
                </div>
            </x-card>

            <x-card :title="__('projects.sections.compliance')" icon="fa-solid fa-shield-halved">
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.rera_no') }}</span>
                        <span class="value">{{ $project->rera_no ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.rera_valid_until') }}</span>
                        <span class="value">{{ $project->rera_valid_until?->format(config('nrems.date_format')) ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.na_permission_number') }}</span>
                        <span class="value">{{ $project->na_permission_number ?? $blank }}</span>
                    </div>
                    {{-- Three-state, like the select that fills it: Yes, No,
                         and a dash for a project nobody has answered for. --}}
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.environmental_clearance') }}</span>
                        <span class="value">
                            @if ($project->environmental_clearance === null)
                                {{ $blank }}
                            @else
                                {{ $project->environmental_clearance ? __('projects.options.yes') : __('projects.options.no') }}
                            @endif
                        </span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.building_permission_number') }}</span>
                        <span class="value">{{ $project->building_permission_number ?? $blank }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">{{ __('projects.fields.commencement_certificate_number') }}</span>
                        <span class="value">{{ $project->commencement_certificate_number ?? $blank }}</span>
                    </div>
                </div>
            </x-card>
        </div>

        <div class="grid-2 mb-4">
            <x-card :title="__('projects.sections.marketing')" icon="fa-solid fa-image">
                <div class="detail-grid">
                    <div class="detail-item detail-item-wide">
                        <span class="label">{{ __('projects.fields.website_url') }}</span>
                        <span class="value"><x-external-link :url="$project->website_url" /></span>
                    </div>
                    <div class="detail-item detail-item-wide">
                        <span class="label">{{ __('projects.fields.youtube_link') }}</span>
                        <span class="value"><x-external-link :url="$project->youtube_link" /></span>
                    </div>
                </div>
            </x-card>

            {{-- Amenities, as v12's own `.amenity-check`: a `--success` tick
                 and a label per amenity.

                 That class is declared in view-project.html's own
                 `<head><style>` (lines 31-42) and rendered by no page in the
                 pack — this screen included. It is adopted anyway (CR-2b
                 review, major 2) over the grey `badge-secondary` chips that
                 stood here first: it is the wireframe's own answer for this
                 content and the only one it wrote, and the tick repeats the
                 checkbox that set the value, so this screen and the form say
                 the same thing the same way. The chips were invented here.

                 Two columns rather than v12's single flex row: it never had
                 sixteen amenities to place, and sixteen rows in a half-width
                 card is a 480px column beside a Marketing card half that tall.
                 The grid is in the app-additions tail, block 14b. --}}
            <x-card :title="__('projects.summary.amenities')" icon="fa-solid fa-star">
                @if (filled($project->amenities))
                    <div class="amenity-check-grid">
                        @foreach ($project->amenities as $amenity)
                            <div class="amenity-check">
                                <i class="fa-solid fa-circle-check" aria-hidden="true"></i>{{ $amenity }}
                            </div>
                        @endforeach
                    </div>
                @else
                    <span class="text-muted">{{ __('projects.summary.none') }}</span>
                @endif
            </x-card>
        </div>
    </div>
    <!--end::Tab — Project Details-->

    <!--begin::Tab — Unit Inventory-->
    <div id="tab-inventory" class="tab-content-panel">
        {{--
            v12's inventory card: a titled header with the unit count as a grey
            pill beside it, then the table. It is a plain server-rendered
            table, not a DataTable — there are no filters to drive and no
            second screen listing the same rows to keep a column list in step
            with.

            Three columns, no row actions and no Add Unit button (CR-5 §15.5).
            A unit is imported on the project form and read here; it is not
            editable anywhere, so a link out of this table would have nowhere
            to go. The six-column version that stood here — wing, floor, type
            and price alongside these three, grouped under an "Unassigned"
            header — described a unit that no longer exists.

            The rows are eager-loaded in ProjectController::show(), so the
            section is one query however many units the project has.
        --}}
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fa-solid fa-building" aria-hidden="true"></i>{{ __('projects.units.title') }}
                </h5>
                <div class="card-toolbar d-flex align-center gap-3">
                    <span class="badge badge-secondary">{{ __('units.count', ['count' => $project->units->count()]) }}</span>
                </div>
            </div>

            @if ($project->units->isEmpty())
                <div class="card-body">
                    <p class="text-muted mb-0">{{ __('units.empty') }}</p>
                </div>
            @else
                <div class="table-wrapper">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th scope="col">{{ __('units.columns.unit_number') }}</th>
                                <th scope="col">{{ __('units.columns.carpet_area') }}</th>
                                <th scope="col">{{ __('units.columns.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($project->units as $unit)
                                <tr>
                                    {{-- Plain text, not a link: there is no
                                         unit screen to link to any more. --}}
                                    <td class="fw-500">{{ $unit->unit_number }}</td>
                                    <td>{{ $unit->carpet_area === null ? __('units.not_recorded') : number_format((float) $unit->carpet_area, 2) }}</td>
                                    <td><x-status-badge :status="$unit->status?->value" /></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
    <!--end::Tab — Unit Inventory-->
@endsection

@push('scripts')
    {{-- The tab strip above. ES5, no dependencies, and it does nothing at all
         on a page without [data-nrems-tabs] — the same shape as the other
         nrems-*.js modules. --}}
    <script src="{{ asset('assets/js/nrems-tabs.js') }}" defer></script>
@endpush