@extends('layouts.app')

@section('title', $requirement->title . ' — Requirement')

@section('content')

@php
    $lead          = $requirement->lead;
    $currentStage  = $lead ? $lead->currentStage : null;
    $isActive      = $requirement->isActive();
    $allStages     = \App\Models\LeadStage::active()->ordered()->get();
@endphp

{{-- Header --}}
<div class="d-flex align-items-start justify-content-between mb-4">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('admin.client.show', $client) }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <div class="text-muted small mb-1">
                <a href="{{ route('admin.client.show', $client) }}" class="text-decoration-none text-muted">
                    {{ $client->full_name }}
                </a>
                <i class="bi bi-chevron-right small mx-1"></i>
                Requirements
            </div>
            <h4 class="fw-bold mb-0">{{ $requirement->title }}</h4>
        </div>
    </div>
    @if($isActive)
    <button class="btn btn-outline-danger btn-sm"
            data-bs-toggle="modal" data-bs-target="#closeReqModal">
        <i class="bi bi-x-circle me-1"></i>Close Requirement
    </button>
    @else
    <span class="badge bg-secondary px-3 py-2">Closed</span>
    @endif
</div>

{{-- Lead pipeline stepper --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        @if($lead && $lead->currentStage)
        <div class="d-flex align-items-center" style="overflow-x:auto; gap:0">
            @foreach($allStages as $s)
            @php
                $isCurrent  = $currentStage && $currentStage->id === $s->id;
                $isDone     = $currentStage && !$currentStage->isClosedStage() && !$s->isClosedStage() && $s->order < $currentStage->order;
            @endphp
            @if(!$s->isClosedStage() || ($currentStage && $currentStage->id === $s->id))
            <div class="d-flex align-items-center {{ !$loop->first ? 'flex-grow-1' : '' }}">
                @if(!$loop->first)
                <div class="flex-grow-1 border-top mx-2"
                     style="min-width:20px; border-color:{{ $isDone || $isCurrent ? $s->color : '#dee2e6' }} !important"></div>
                @endif
                <div class="d-flex flex-column align-items-center" style="min-width:80px">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-1"
                         style="width:30px;height:30px;font-size:0.72rem;
                         background:{{ $isCurrent ? $s->color : ($isDone ? $s->color : '#e9ecef') }};
                         opacity:{{ $isDone ? '0.7' : '1' }};
                         color:{{ ($isCurrent || $isDone) ? '#fff' : '#6c757d' }}">
                        @if($isDone)
                            <i class="bi bi-check-lg"></i>
                        @elseif($s->is_closed_won)
                            <i class="bi bi-trophy"></i>
                        @elseif($s->is_closed_lost)
                            <i class="bi bi-x-lg"></i>
                        @else
                            {{ $loop->index + 1 }}
                        @endif
                    </div>
                    <div class="text-center" style="font-size:0.68rem;
                         color:{{ $isCurrent ? $s->color : ($isDone ? '#198754' : '#6c757d') }};
                         font-weight:{{ $isCurrent ? '600' : 'normal' }}">
                        {{ $s->name }}
                    </div>
                </div>
            </div>
            @endif
            @endforeach
        </div>
        <div class="mt-2 d-flex align-items-center gap-2">
            @if($lead)
            <a href="{{ route('admin.leads.show', $lead) }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-funnel me-1"></i>View Lead
            </a>
            @endif
        </div>
        @else
        <div class="text-muted small">No active lead pipeline.</div>
        @endif
    </div>
</div>

<div class="row g-4">

    {{-- Requirement details --}}
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold mb-0"><i class="bi bi-sliders me-2 text-primary"></i>Requirement Details</h6>
            </div>
            <div class="card-body">
                <dl class="row mb-0 small">
                    <dt class="col-5 text-muted fw-normal">Interest</dt>
                    <dd class="col-7 fw-medium">
                        {{ \App\Models\ClientRequirement::INTEREST_TYPES[$requirement->interest_type] ?? $requirement->interest_type }}
                    </dd>

                    <dt class="col-5 text-muted fw-normal">Property Type</dt>
                    <dd class="col-7">
                        {{ \App\Models\ClientRequirement::PROPERTY_TYPES[$requirement->property_type ?? 'any'] ?? 'Any Type' }}
                    </dd>

                    <dt class="col-5 text-muted fw-normal">Budget</dt>
                    <dd class="col-7">
                        {{ \App\Services\ClientRequirementService::formatBudget($requirement->min_budget, $requirement->max_budget) }}
                    </dd>

                    <dt class="col-5 text-muted fw-normal">Size</dt>
                    <dd class="col-7">
                        {{ \App\Services\ClientRequirementService::formatSize($requirement->min_size, $requirement->max_size) }}
                    </dd>

                    <dt class="col-5 text-muted fw-normal">Location</dt>
                    <dd class="col-7">{{ $requirement->preferred_location ?: 'Any Location' }}</dd>

                    @if($requirement->notes)
                    <dt class="col-5 text-muted fw-normal">Notes</dt>
                    <dd class="col-7">{{ $requirement->notes }}</dd>
                    @endif

                    <dt class="col-5 text-muted fw-normal">Added by</dt>
                    <dd class="col-7">{{ optional($requirement->createdBy)->name ?? '—' }}</dd>

                    <dt class="col-5 text-muted fw-normal">Added on</dt>
                    <dd class="col-7">{{ $requirement->created_at->format('d M Y') }}</dd>

                    @if(!$isActive)
                    <dt class="col-5 text-muted fw-normal">Closed on</dt>
                    <dd class="col-7">{{ optional($requirement->closed_at)->format('d M Y') ?? '—' }}</dd>

                    <dt class="col-5 text-muted fw-normal">Closed by</dt>
                    <dd class="col-7">{{ optional($requirement->closedBy)->name ?? '—' }}</dd>
                    @endif
                </dl>
            </div>
        </div>
    </div>

    {{-- Right column: Shortlisted Properties + Site Visits placeholders --}}
    <div class="col-lg-7 d-flex flex-column gap-4">

        @php $shortlistCount = $lead ? $lead->shortlistedProperties->count() : 0; @endphp
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-bookmark-star me-2 text-primary"></i>Shortlisted Properties
                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $shortlistCount }}</span>
                </h6>
                @if($lead)
                <a href="{{ route('admin.leads.show', $lead) }}#shortlisted" class="btn btn-sm btn-outline-primary">
                    <i class="bi bi-arrow-right me-1"></i>Manage
                </a>
                @endif
            </div>
            <div class="card-body py-3 small">
                @if(!$lead)
                <div class="text-center text-muted py-2">
                    <i class="bi bi-bookmark d-block fs-3 mb-2 text-secondary"></i>
                    No active lead pipeline for this requirement.
                </div>
                @elseif($shortlistCount === 0)
                <div class="text-center text-muted py-2">
                    <i class="bi bi-bookmark d-block fs-3 mb-2 text-secondary"></i>
                    No properties shortlisted yet.
                    <div class="mt-2">
                        <a href="{{ route('admin.leads.show', $lead) }}#shortlisted" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-search me-1"></i>Search &amp; Shortlist
                        </a>
                    </div>
                </div>
                @else
                <ul class="list-unstyled mb-0">
                    @foreach($lead->shortlistedProperties->take(5) as $sl)
                    <li class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-bookmark-check text-primary"></i>
                        <a href="{{ route('admin.property.show', $sl->property) }}" class="text-decoration-none text-dark small fw-medium">
                            {{ $sl->property->title }}
                        </a>
                        <span class="text-muted ms-auto" style="font-size:0.7rem">{{ $sl->property->formattedPrice() }}</span>
                    </li>
                    @endforeach
                    @if($shortlistCount > 5)
                    <li class="text-muted" style="font-size:0.75rem">
                        +{{ $shortlistCount - 5 }} more —
                        <a href="{{ route('admin.leads.show', $lead) }}#shortlisted">View all</a>
                    </li>
                    @endif
                </ul>
                @endif
            </div>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-map me-2 text-primary"></i>Site Visits
                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">0</span>
                </h6>
            </div>
            <div class="card-body text-center text-muted py-4 small">
                <i class="bi bi-signpost-2 d-block fs-3 mb-2 text-secondary"></i>
                Site visits will be trackable in the CRM module.
            </div>
        </div>

    </div>
</div>

<!-- Close Requirement Modal -->
<div class="modal fade" id="closeReqModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">Close Requirement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.client.requirement.close', [$client, $requirement]) }}" method="POST">
                @csrf
                @method('PATCH')
                <div class="modal-body pt-2">
                    <p class="text-muted small mb-3">Closing: "{{ $requirement->title }}"</p>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Outcome <span class="text-danger">*</span></label>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="close_reason"
                                       id="close-won" value="won" required>
                                <label class="form-check-label" for="close-won">
                                    <span class="text-success fw-medium">Won</span>
                                    <div class="text-muted" style="font-size:0.75rem">Client found a property</div>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="close_reason"
                                       id="close-lost" value="lost">
                                <label class="form-check-label" for="close-lost">
                                    <span class="text-danger fw-medium">Lost</span>
                                    <div class="text-muted" style="font-size:0.75rem">Client dropped / no longer interested</div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="form-label fw-medium">Notes (optional)</label>
                        <textarea name="notes" rows="2" class="form-control"
                                  placeholder="Any context about the closure…"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Close Requirement</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection