@extends('layouts.app')
@section('title', 'Deployment #'.$deployment->id)
@section('page-title', 'Deployment Detail')

@section('content')
<div class="mt-4 space-y-5 max-w-2xl">

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6 space-y-5">
        {{-- Header --}}
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-lg font-bold text-gray-900">{{ $deployment->communicator->name }}</h2>
                <div class="text-sm text-gray-500 mt-0.5">{{ $deployment->communicator->region?->name }} · {{ $deployment->communicator->tier?->name }}</div>
            </div>
            <span class="text-sm px-3 py-1 rounded-full {{ $deployment->status_badge }} font-semibold">{{ ucfirst(str_replace('_',' ',$deployment->status)) }}</span>
        </div>

        <div class="grid sm:grid-cols-2 gap-4 text-sm">
            <div class="space-y-3">
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Station</div>
                    <div class="text-gray-900 font-medium">{{ $deployment->station->name }}</div>
                </div>
                @if($deployment->programme)
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Programme</div>
                    <div class="text-gray-900">{{ $deployment->programme->name }}</div>
                </div>
                @endif
                @if($deployment->topic)
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Topic</div>
                    <div class="text-gray-900">{{ $deployment->topic }}</div>
                </div>
                @endif
            </div>
            <div class="space-y-3">
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Date</div>
                    <div class="text-gray-900 font-medium">{{ $deployment->deployment_date->format('l, d M Y') }}</div>
                </div>
                @if($deployment->start_time)
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Time</div>
                    <div class="text-gray-900">{{ date('g:i A', strtotime($deployment->start_time)) }}{{ $deployment->end_time ? ' – '.date('g:i A', strtotime($deployment->end_time)) : '' }}</div>
                </div>
                @endif
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Assigned By</div>
                    <div class="text-gray-900">{{ $deployment->assignedBy->name }}</div>
                </div>
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">SMS Sent</div>
                    <div class="text-gray-900">{{ $deployment->sms_sent ? 'Yes — '.($deployment->sms_sent_at?->format('d M Y H:i') ?? '') : 'No' }}</div>
                </div>
            </div>
        </div>

        @if($deployment->accepted_at || $deployment->declined_at)
        <div class="bg-gray-50 rounded-lg p-4 text-sm">
            @if($deployment->accepted_at)
                <div class="text-green-700 font-medium">Accepted on {{ $deployment->accepted_at->format('d M Y H:i') }}</div>
            @endif
            @if($deployment->declined_at)
                <div class="text-red-700 font-medium">Declined on {{ $deployment->declined_at->format('d M Y H:i') }}</div>
                @if($deployment->decline_reason)
                <div class="text-gray-600 mt-1">Reason: {{ $deployment->decline_reason }}</div>
                @endif
            @endif
        </div>
        @endif

        @if($deployment->notes)
        <div class="text-sm text-gray-600 bg-gray-50 rounded-lg p-3">
            <strong>Notes:</strong> {{ $deployment->notes }}
        </div>
        @endif

        {{-- Linked request --}}
        @if($deployment->deploymentRequest)
        <div class="border-t border-gray-100 pt-4">
            <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Linked Request</h4>
            <div class="text-sm text-gray-700">
                Request #{{ $deployment->deploymentRequest->id }} ({{ ucfirst($deployment->deploymentRequest->type) }})
                by {{ $deployment->deploymentRequest->requestedBy->name }}
            </div>
        </div>
        @endif

        {{-- Actions --}}
        @if(in_array($deployment->status, ['pending','accepted']))
        <div class="flex gap-2 pt-4 border-t border-gray-100">
            @if($deployment->status === 'accepted')
                <form method="POST" action="{{ route('deployments.complete', $deployment) }}">
                    @csrf
                    <button type="submit" class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">Mark Completed</button>
                </form>
            @endif
            <form method="POST" action="{{ route('deployments.no-show', $deployment) }}">
                @csrf
                <button type="submit" class="px-4 py-2 text-sm bg-orange-100 text-orange-700 rounded-lg hover:bg-orange-200 font-medium">No-Show</button>
            </form>
            <form method="POST" action="{{ route('deployments.cancel', $deployment) }}">
                @csrf
                <button type="submit" class="px-4 py-2 text-sm bg-red-100 text-red-700 rounded-lg hover:bg-red-200 font-medium"
                        onclick="return confirm('Cancel this deployment?')">Cancel</button>
            </form>
        </div>
        @endif
    </div>

    <a href="{{ route('deployments.index') }}" class="inline-flex items-center gap-1.5 text-sm text-blue-600 hover:underline">
        ← Back to Deployments
    </a>
</div>
@endsection