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

@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>
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="text-xs px-2.5 py-1 rounded-full font-semibold {{ $request->type === 'self' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700' }}">
                        {{ $request->type === 'self' ? 'Self-Deployment Request' : 'Producer Request' }}
                    </span>
                    <span class="text-xs px-2.5 py-1 rounded-full font-semibold {{ $request->status_badge }}">{{ ucfirst($request->status) }}</span>
                </div>
                <div class="mt-2 text-sm text-gray-500">Submitted by <strong>{{ $request->requestedBy->name }}</strong> · #{{ $request->id }}</div>
            </div>
        </div>

        {{-- Details --}}
        <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">Communicator</div>
                    <div class="text-gray-900 font-medium">{{ $request->communicator?->name ?? '—' }}</div>
                    @if($request->communicator)
                    <div class="text-xs text-gray-400">{{ $request->communicator->region?->name }} · {{ $request->communicator->tier?->name }}</div>
                    @endif
                </div>
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Station</div>
                    <div class="text-gray-900">{{ $request->station?->name ?? '—' }}</div>
                    @if($request->station)<div class="text-xs text-gray-400">{{ $request->station->type }}</div>@endif
                </div>
                @if($request->programme)
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Programme</div>
                    <div class="text-gray-900">{{ $request->programme->name }}</div>
                </div>
                @endif
            </div>
            <div class="space-y-3">
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Requested Date</div>
                    <div class="text-gray-900 font-medium">{{ $request->requested_date?->format('l, d M Y') }}</div>
                </div>
                @if($request->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($request->start_time)) }}</div>
                </div>
                @endif
                @if($request->topic)
                <div>
                    <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Topic</div>
                    <div class="text-gray-900">{{ $request->topic }}</div>
                </div>
                @endif
            </div>
        </div>

        @if($request->reason)
        <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-700">
            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Reason / Notes</div>
            {{ $request->reason }}
        </div>
        @endif

        {{-- Review info (if already reviewed) --}}
        @if($request->status !== 'pending' && $request->reviewedBy)
        <div class="bg-gray-50 rounded-lg p-4 text-sm">
            <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Review Decision</div>
            <div class="font-medium {{ $request->status === 'approved' ? 'text-green-700' : 'text-red-700' }}">
                {{ ucfirst($request->status) }} by {{ $request->reviewedBy->name }} on {{ $request->reviewed_at?->format('d M Y H:i') }}
            </div>
            @if($request->review_notes)
            <div class="mt-1 text-gray-600">{{ $request->review_notes }}</div>
            @endif
            @if($request->deployment)
            <div class="mt-2">
                <a href="{{ route('deployments.show', $request->deployment) }}" class="text-blue-600 hover:underline text-xs">View linked deployment →</a>
            </div>
            @endif
        </div>
        @endif

        {{-- Approve / Reject actions (admin/supervisor only, pending only) --}}
        @if($request->status === 'pending' && Auth::user()->hasRole(['admin','supervisor']))
        <div class="border-t border-gray-100 pt-5 space-y-4" x-data="{ action: '' }">
            <h4 class="text-sm font-semibold text-gray-900">Review this request</h4>

            <div class="flex gap-3">
                <button @click="action = 'approve'" :class="action === 'approve' ? 'ring-2 ring-green-500' : ''"
                        class="flex-1 px-4 py-2.5 text-sm font-semibold bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100">
                    ✓ Approve — Create Deployment
                </button>
                <button @click="action = 'reject'" :class="action === 'reject' ? 'ring-2 ring-red-500' : ''"
                        class="flex-1 px-4 py-2.5 text-sm font-semibold bg-red-50 text-red-700 border border-red-200 rounded-lg hover:bg-red-100">
                    ✕ Decline Request
                </button>
            </div>

            <div x-show="action === 'approve'" x-cloak>
                <form method="POST" action="{{ route('requests.approve', $request) }}">
                    @csrf
                    <textarea name="review_notes" rows="2" placeholder="Optional note to requester…"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 resize-none"></textarea>
                    <button type="submit" class="mt-2 px-5 py-2.5 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700">
                        Confirm Approval & Create Deployment
                    </button>
                </form>
            </div>

            <div x-show="action === 'reject'" x-cloak>
                <form method="POST" action="{{ route('requests.reject', $request) }}">
                    @csrf
                    <textarea name="review_notes" rows="2" required placeholder="Reason for declining (required)…"
                              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 resize-none"></textarea>
                    <button type="submit" class="mt-2 px-5 py-2.5 bg-red-600 text-white text-sm font-semibold rounded-lg hover:bg-red-700">
                        Confirm Decline
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>

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