@extends('layouts.app')
@section('title', 'BusGo | Trip Management')

@section('content')
<style>
    [x-cloak] { display: none !important; }
   
    /* Trip badge styling */
    .trip-badge {
        background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
        border-left: 3px solid #4f46e5;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-family: 'Courier New', monospace;
        font-weight: 600;
        letter-spacing: 0.3px;
        display: inline-block;
    }
   
    /* Status badge styles */
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
   
    .status-scheduled { background-color: #dbeafe; color: #2563eb; }
    .status-ongoing { background-color: #fef3c7; color: #d97706; }
    .status-completed { background-color: #d1fae5; color: #059669; }
    .status-cancelled { background-color: #fee2e2; color: #dc2626; }
   
    .info-row {
        display: flex;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
   
    .info-label {
        width: 140px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
    }
   
    .info-value {
        flex: 1;
        font-size: 0.875rem;
        color: #1e293b;
        font-weight: 500;
    }
</style>

<div x-data="{
    baseUrl: '/tripmanager/public',
    showCancelModal: false,
    showViewModal: false,
    selectedTripId: null
}" x-init="console.log('Trips Alpine.js initialized')">
   
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Trips</h1>
            <p class="text-slate-500 font-medium">Manage and track all bus trips.</p>
        </div>
        <a href="{{ route('trips.create') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded font-bold text-xs transition flex items-center gap-2 shadow-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            New Trip
        </a>
    </div>

    <!-- Stats Cards -->
    @php
        $totalTrips     = $trips->count();
        $scheduledCount = $trips->where('status', 'Scheduled')->count();
        $ongoingCount   = $trips->where('status', 'Ongoing')->count();
        $completedCount = $trips->where('status', 'Completed')->count();
        $cancelledCount = $trips->where('status', 'Cancelled')->count();
    @endphp
   
    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Total Trips</p>
                    <p class="text-2xl font-black text-slate-900 mt-1">{{ $totalTrips }}</p>
                </div>
                <div class="bg-indigo-100 rounded-full p-3">
                    <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"></path>
                    </svg>
                </div>
            </div>
        </div>
       
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Scheduled</p>
                    <p class="text-2xl font-black text-slate-900 mt-1">{{ $scheduledCount }}</p>
                </div>
                <div class="bg-blue-100 rounded-full p-3">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>
        </div>
       
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Ongoing</p>
                    <p class="text-2xl font-black text-slate-900 mt-1">{{ $ongoingCount }}</p>
                </div>
                <div class="bg-yellow-100 rounded-full p-3">
                    <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
       
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Completed</p>
                    <p class="text-2xl font-black text-slate-900 mt-1">{{ $completedCount }}</p>
                </div>
                <div class="bg-green-100 rounded-full p-3">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
       
        <div class="bg-white rounded-lg border border-slate-200 shadow-sm p-5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Cancelled</p>
                    <p class="text-2xl font-black text-slate-900 mt-1">{{ $cancelledCount }}</p>
                </div>
                <div class="bg-red-100 rounded-full p-3">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
            <h3 class="font-bold text-slate-700">Trip Schedule</h3>
            <div class="flex gap-2">
                <form method="GET" action="{{ route('trips.index') }}" class="flex gap-2">
                    <select name="status" class="text-xs rounded-lg border-slate-200 bg-white px-3 py-1.5">
                        <option value="">All Status</option>
                        <option value="Scheduled" {{ request('status') == 'Scheduled' ? 'selected' : '' }}>Scheduled</option>
                        <option value="Ongoing" {{ request('status') == 'Ongoing' ? 'selected' : '' }}>Ongoing</option>
                        <option value="Completed" {{ request('status') == 'Completed' ? 'selected' : '' }}>Completed</option>
                        <option value="Cancelled" {{ request('status') == 'Cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                    <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 rounded text-xs font-bold transition">Filter</button>
                    <a href="{{ route('trips.index') }}" class="border border-slate-300 text-slate-600 hover:bg-slate-50 px-3 py-1.5 rounded text-xs font-bold transition">Reset</a>
                </form>
            </div>
        </div>
       
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="text-slate-400 text-[11px] uppercase tracking-wider border-b border-slate-100">
                        <th class="px-6 py-3 font-bold">Trip ID</th>
                        <th class="px-6 py-3 font-bold">Route</th>
                        <th class="px-6 py-3 font-bold">Bus</th>
                        <th class="px-6 py-3 font-bold">Driver</th>
                        <th class="px-6 py-3 font-bold">Departure</th>
                        <th class="px-6 py-3 font-bold">Fare</th>
                        <th class="px-6 py-3 font-bold">Status</th>
                        <th class="px-6 py-3 font-bold text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-slate-600 text-[13px] divide-y divide-slate-50">
                    @forelse($trips as $trip)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="px-6 py-4">
                            <span class="trip-badge inline-block text-indigo-700 text-xs font-mono">
                                #{{ str_pad($trip->id, 6, '0', STR_PAD_LEFT) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-medium text-slate-900">{{ $trip->from_station ?? 'N/A' }} → {{ $trip->to_station ?? 'N/A' }}</div>
                            <div class="text-xs text-slate-400">{{ $trip->duration ?? '—' }} hours</div>
                        </td>
                        <td class="px-6 py-4">
                            <div>{{ $trip->bus->name ?? 'N/A' }}</div>
                            <div class="text-xs text-slate-400">{{ $trip->bus->number_plate ?? 'N/A' }}</div>
                        </td>
                        <td class="px-6 py-4">{{ $trip->driver->name ?? 'N/A' }}</td>
                        <td class="px-6 py-4">
                            <div>{{ \Carbon\Carbon::parse($trip->start_date)->format('d M Y') }}</div>
                            <div class="text-xs text-slate-400">{{ $trip->start_time }}</div>
                        </td>
                        <td class="px-6 py-4 font-mono font-semibold text-slate-700">ZMW {{ number_format($trip->bus_fare, 2) }}</td>
                        <td class="px-6 py-4">
                            <span class="status-badge status-{{ strtolower($trip->status) }}">
                                {{ ucfirst($trip->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <button @click="showViewModal = true; viewTrip({{ $trip->id }})" class="text-indigo-600 hover:text-indigo-900 font-bold px-2 text-xs transition">View</button>
                           
                            @if($trip->isScheduled())
                            <form action="{{ route('trips.start', $trip->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="text-green-600 hover:text-green-900 font-bold px-2 text-xs transition ml-2" onclick="return confirm('Start this trip?')">Start</button>
                            </form>
                            @endif
                           
                            @if($trip->isOngoing())
                            <form action="{{ route('trips.complete', $trip->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="text-blue-600 hover:text-blue-900 font-bold px-2 text-xs transition ml-2" onclick="return confirm('Complete this trip?')">Complete</button>
                            </form>
                            @endif
                           
                            @if($trip->canBeCancelled())
                            <button @click="showCancelModal = true; selectedTripId = '{{ $trip->id }}'" class="text-red-600 hover:text-red-900 font-bold px-2 text-xs transition ml-2">Cancel</button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center justify-center text-slate-400">
                                <svg class="w-16 h-16 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7"></path>
                                </svg>
                                <p class="font-medium">No trips found</p>
                                <p class="text-sm">Click "New Trip" to schedule your first trip.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Cancel Trip Modal -->
    <div x-show="showCancelModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showCancelModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-md overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-red-600 to-red-700">
                <h5 class="modal-title font-black text-white text-sm tracking-wide">CANCEL TRIP</h5>
                <button @click="showCancelModal = false" class="text-white hover:text-slate-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <form :action="baseUrl + '/trips/' + selectedTripId + '/cancel'" method="POST" class="p-6">
                @csrf
                <div class="mb-4">
                    <label class="block text-[11px] font-bold text-slate-500 uppercase mb-1 tracking-wide">Cancellation Reason *</label>
                    <textarea name="reason" required rows="3" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition" placeholder="Please provide a reason for cancellation..."></textarea>
                </div>
                <div class="flex justify-center gap-3 mt-6">
                    <button type="button" @click="showCancelModal = false" class="flex-1 px-4 py-2 border border-slate-300 text-slate-600 rounded-lg font-bold text-xs hover:bg-slate-50 transition">Cancel</button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-bold text-xs hover:bg-red-700 transition shadow-md">Cancel Trip</button>
                </div>
            </form>
        </div>
    </div>

    <!-- View Trip Modal -->
    <div x-show="showViewModal" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm overflow-y-auto" style="display: none;">
        <div @click.away="showViewModal = false" class="bg-white rounded-lg shadow-2xl w-full max-w-2xl overflow-hidden my-8">
            <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-indigo-600 to-indigo-700">
                <h5 class="modal-title font-black text-white text-sm tracking-wide">TRIP DETAILS</h5>
                <button @click="showViewModal = false" class="text-white hover:text-slate-200">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <div class="p-6" id="tripDetails">
                <div class="text-center py-8">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
                    <p class="mt-3 text-slate-500">Loading trip details...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function viewTrip(tripId) {
    document.getElementById('tripDetails').innerHTML = `
        <div class="text-center py-8">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
            <p class="mt-3 text-slate-500">Loading trip details...</p>
        </div>
    `;
   
    fetch('/tripmanager/public/trips/' + tripId)
        .then(response => response.json())
        .then(data => {
            document.getElementById('tripDetails').innerHTML = `
                <div class="space-y-4">
                    <div class="info-row">
                        <div class="info-label">Trip ID</div>
                        <div class="info-value font-mono">#${String(data.id).padStart(6, '0')}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Route</div>
                        <div class="info-value">${data.from_station || 'N/A'} → ${data.to_station || 'N/A'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Bus</div>
                        <div class="info-value">${data.bus?.name || 'N/A'} (${data.bus?.number_plate || 'N/A'})</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Driver</div>
                        <div class="info-value">${data.driver?.name || 'N/A'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Conductor</div>
                        <div class="info-value">${data.conductor?.name || 'N/A'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Sales Personnel</div>
                        <div class="info-value">${data.sales_personnel?.name || 'N/A'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Departure</div>
                        <div class="info-value">${data.start_date} at ${data.start_time}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Duration</div>
                        <div class="info-value">${data.duration || '—'} hours</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Available Seats</div>
                        <div class="info-value">${data.available_seats_count || '—'}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Fare</div>
                        <div class="info-value font-bold text-indigo-600">ZMW ${parseFloat(data.bus_fare).toFixed(2)}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            <span class="status-badge status-${data.status ? data.status.toLowerCase() : ''}">${data.status ? data.status.charAt(0).toUpperCase() + data.status.slice(1) : 'N/A'}</span>
                        </div>
                    </div>
                    ${data.cancelled_at ? `
                    <div class="info-row">
                        <div class="info-label">Cancelled At</div>
                        <div class="info-value">${new Date(data.cancelled_at).toLocaleString()}</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Cancellation Reason</div>
                        <div class="info-value">${data.cancellation_reason || '—'}</div>
                    </div>
                    ` : ''}
                </div>
            `;
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('tripDetails').innerHTML = `
                <div class="text-center py-8 text-red-600">
                    <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p>Error loading trip details</p>
                </div>
            `;
        });
}


// Auto-hide flash messages after 3 seconds
setTimeout(function() {
    var alerts = document.querySelectorAll('.bg-green-100, .bg-red-100');
    alerts.forEach(function(alert) {
        alert.style.transition = 'opacity 0.5s';
        alert.style.opacity = '0';
        setTimeout(function() {
            if(alert && alert.remove) alert.remove();
        }, 500);
    });
}, 3000);
</script>

<style>
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-spin {
        animation: spin 1s linear infinite;
    }
</style>
@endsection