@extends('layouts.app')
@section('title', 'My Deployments')
@section('page-title', 'My Deployments')

@section('content')
<div class="mt-4 space-y-4">

    {{-- Filter --}}
    <form method="GET" class="bg-white rounded-xl border border-gray-200 p-4 flex flex-wrap gap-3">
        <select name="status" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">All</option>
            @foreach(['pending','accepted','declined','completed','cancelled'] as $s)
                <option value="{{ $s }}" {{ request('status') === $s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button type="submit" class="px-4 py-2 bg-npp-blue text-white text-sm rounded-lg hover:bg-blue-800">Filter</button>
        <a href="{{ route('my-deployments') }}" class="px-4 py-2 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">All</a>
        <a href="{{ route('requests.self.create') }}" class="ml-auto px-4 py-2 bg-npp-red text-white text-sm rounded-lg hover:bg-red-700 font-medium">+ Self-Deploy Request</a>
    </form>

    @forelse($deployments as $d)
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5" x-data="{ showDecline: false }">
        <div class="flex items-start gap-4">
            <div class="flex-1">
                <div class="flex items-center gap-3 flex-wrap">
                    <h3 class="font-semibold text-gray-900">{{ $d->station->name }}</h3>
                    @if($d->programme)
                        <span class="text-xs text-gray-500">· {{ $d->programme->name }}</span>
                    @endif
                    <span class="text-xs px-2.5 py-0.5 rounded-full {{ $d->status_badge }} font-medium">{{ ucfirst(str_replace('_',' ',$d->status)) }}</span>
                </div>
                <div class="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-600">
                    <span>📅 {{ $d->deployment_date->format('l, d M Y') }}</span>
                    @if($d->start_time)<span>🕐 {{ date('g:i A', strtotime($d->start_time)) }}{{ $d->end_time ? ' – '.date('g:i A', strtotime($d->end_time)) : '' }}</span>@endif
                    @if($d->topic)<span>💬 {{ $d->topic }}</span>@endif
                </div>
                @if($d->notes)
                    <p class="mt-2 text-xs text-gray-500 italic">{{ $d->notes }}</p>
                @endif
            </div>

            {{-- Accept / Decline --}}
            @if($d->status === 'pending')
            <div class="flex gap-2 shrink-0">
                <form method="POST" action="{{ route('deployments.accept', $d) }}">
                    @csrf
                    <button type="submit" class="px-4 py-2 text-sm bg-green-600 text-white rounded-lg font-medium hover:bg-green-700">✓ Accept</button>
                </form>
                <button @click="showDecline = !showDecline"
                        class="px-4 py-2 text-sm bg-red-100 text-red-700 rounded-lg font-medium hover:bg-red-200">✕ Decline</button>
            </div>
            @endif
        </div>

        {{-- Decline form --}}
        @if($d->status === 'pending')
        <div x-show="showDecline" x-cloak class="mt-4 pt-4 border-t border-gray-100">
            <form method="POST" action="{{ route('deployments.decline', $d) }}" class="flex gap-2">
                @csrf
                <input type="text" name="decline_reason" placeholder="Reason for declining (optional)"
                       class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-red-400">
                <button type="submit" class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg font-medium hover:bg-red-700">Confirm Decline</button>
                <button type="button" @click="showDecline = false" class="px-4 py-2 text-sm text-gray-600 rounded-lg border border-gray-300">Cancel</button>
            </form>
        </div>
        @endif

        @if($d->decline_reason && $d->status === 'declined')
        <div class="mt-3 text-xs text-red-600 bg-red-50 rounded-lg px-3 py-2">
            Decline reason: {{ $d->decline_reason }}
        </div>
        @endif
    </div>
    @empty
    <div class="bg-white rounded-xl border border-gray-200 py-12 text-center text-gray-400">
        No deployments found. <a href="{{ route('requests.self.create') }}" class="text-blue-600 hover:underline">Make a self-deployment request</a>.
    </div>
    @endforelse

    @if($deployments->hasPages())
    <div>{{ $deployments->links() }}</div>
    @endif
</div>
@endsection