@extends('layouts.admin.app')

@section('title', 'Quản lý tuyến và điểm đón/trả')

@section('content')
    <h1 class="text-2xl font-bold mb-4">Quản lý tuyến và điểm đón/trả</h1>

    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-100 text-green-800 px-4 py-2">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 text-red-800 px-4 py-2">
            <ul class="list-disc ml-4">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
        <form method="GET" class="grid md:grid-cols-4 gap-3">
            <input name="search" value="{{ $filters['search'] ?? '' }}" class="border rounded-lg px-3 py-2"
                placeholder="Tìm mã tuyến/điểm đi/đến">
            <select name="is_active" class="border rounded-lg px-3 py-2">
                <option value="">Tất cả trạng thái</option>
                <option value="1" @selected(($filters['is_active'] ?? '') === '1')>Đang dùng</option>
                <option value="0" @selected(($filters['is_active'] ?? '') === '0')>Tạm dừng</option>
            </select>
            <button class=" text-white rounded-lg px-4 py-2" style="background:#117FD4">Lọc dữ liệu</button>
            <a href="{{ route('admin.booking-routes.index') }}" class="border rounded-lg px-4 py-2 text-center">Xóa lọc</a>
        </form>
    </div>

    <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
        <h2 class="font-semibold mb-3">Thêm tuyến mới</h2>
        <form method="POST" action="{{ route('admin.booking-routes.store') }}" class="grid md:grid-cols-2 gap-3">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Mã tuyến <span
                        class="text-red-500">*</span></label>
                <input name="code" class="border rounded-lg px-3 py-2 w-full" placeholder="Nhập mã tuyến" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Quãng đường (km) <span
                        class="text-red-500">*</span></label>
                <input type="number" name="distance_km" class="border rounded-lg px-3 py-2 w-full"
                    placeholder="Nhập quãng đường">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Điểm đi <span
                        class="text-red-500">*</span></label>
                <select name="from_station_id" class="border rounded-lg px-3 py-2 w-full" required>
                    <option value="">-- Chọn điểm đi --</option>
                    @foreach ($stations as $station)
                        <option value="{{ $station->id }}">{{ $station->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Điểm đến <span
                        class="text-red-500">*</span></label>
                <select name="to_station_id" class="border rounded-lg px-3 py-2 w-full" required>
                    <option value="">-- Chọn điểm đến --</option>
                    @foreach ($stations as $station)
                        <option value="{{ $station->id }}">{{ $station->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Thời gian dự kiến <span
                        class="text-red-500">*</span></label>
                <input type="number" name="duration_min" class="border rounded-lg px-3 py-2 w-full"
                    placeholder="Nhập thời gian dự kiến">
            </div>
            <div class="flex items-end">
                <label class="flex items-center gap-2"><input type="checkbox" name="is_active" value="1" checked> Kích
                    hoạt</label>
            </div>

            <div class="md:col-span-2">
                <p class="font-medium mb-2">Điểm đón <span class="text-red-500">*</span></p>
                <div class="grid md:grid-cols-3 gap-2">
                    @foreach ($stations as $station)
                        <label class="flex items-center gap-2 border rounded px-2 py-1">
                            <input type="checkbox" name="pickup_points[]" value="{{ $station->id }}"> {{ $station->name }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="md:col-span-2">
                <p class="font-medium mb-2">Điểm trả <span class="text-red-500">*</span></p>
                <div class="grid md:grid-cols-3 gap-2">
                    @foreach ($stations as $station)
                        <label class="flex items-center gap-2 border rounded px-2 py-1">
                            <input type="checkbox" name="dropoff_points[]" value="{{ $station->id }}">
                            {{ $station->name }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="justify-center mt-4 md:mt-0">
                <button class="text-white rounded-lg px-4 py-2 font-semibold" style="background:#117FD4">
                    Lưu tuyến
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-lg p-4 shadow-sm">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b">
                    <th class="text-left py-2">Mã</th>
                    <th class="text-left py-2">Điểm đi</th>
                    <th class="text-left py-2">Điểm đến</th>
                    <th class="text-left py-2">Điểm đón/trả</th>
                    <th class="text-left py-2">Trạng thái</th>
                    <th class="text-left py-2">Tác vụ</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($items as $item)
                    @php
                        $pickupIds = $item->points->where('point_type', 'pickup')->pluck('station_id')->all();
                        $dropoffIds = $item->points->where('point_type', 'dropoff')->pluck('station_id')->all();
                    @endphp
                    <tr class="border-b align-top">
                        <td class="py-2">{{ $item->code }}</td>
                        <td class="py-2">{{ $item->fromStation?->name }}</td>
                        <td class="py-2">{{ $item->toStation?->name }}</td>
                        <td class="py-2">
                            <div><strong>Đón:</strong>
                                {{ $item->points->where('point_type', 'pickup')->pluck('station.name')->implode(', ') }}
                            </div>
                            <div><strong>Trả:</strong>
                                {{ $item->points->where('point_type', 'dropoff')->pluck('station.name')->implode(', ') }}
                            </div>
                        </td>
                        <td class="py-2">{{ $item->is_active ? 'Đang dùng' : 'Tạm dừng' }}</td>
                        <td class="py-2 space-y-2">
                            <details>
                                <summary class="cursor-pointer text-blue-600">Sửa</summary>
                                <form method="POST" action="{{ route('admin.booking-routes.update', $item->id) }}"
                                    class="mt-2 grid md:grid-cols-2 gap-2">
                                    @csrf
                                    @method('PUT')
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Mã tuyến</label>
                                        <input name="code" value="{{ $item->code }}"
                                            class="border rounded px-2 py-1 w-full" required>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Quãng đường
                                            (km)
                                        </label>
                                        <input type="number" name="distance_km" value="{{ $item->distance_km }}"
                                            class="border rounded px-2 py-1 w-full">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Điểm đi</label>
                                        <select name="from_station_id" class="border rounded px-2 py-1 w-full" required>
                                            @foreach ($stations as $station)
                                                <option value="{{ $station->id }}" @selected($station->id == $item->from_station_id)>
                                                    {{ $station->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Điểm đến</label>
                                        <select name="to_station_id" class="border rounded px-2 py-1 w-full" required>
                                            @foreach ($stations as $station)
                                                <option value="{{ $station->id }}" @selected($station->id == $item->to_station_id)>
                                                    {{ $station->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Thời gian dự kiến
                                            (phút)
                                        </label>
                                        <input type="number" name="duration_min" value="{{ $item->duration_min }}"
                                            class="border rounded px-2 py-1 w-full">
                                    </div>
                                    <div class="flex items-end">
                                        <label class="flex items-center gap-2"><input type="checkbox" name="is_active"
                                                value="1" @checked($item->is_active)> Kích hoạt</label>
                                    </div>
                                    <div class="md:col-span-2 border rounded p-2">
                                        <p class="font-medium mb-1">Điểm đón</p>
                                        <div class="grid md:grid-cols-3 gap-2">
                                            @foreach ($stations as $station)
                                                <label class="flex items-center gap-2 border rounded px-2 py-1"><input
                                                        type="checkbox" name="pickup_points[]"
                                                        value="{{ $station->id }}" @checked(in_array($station->id, $pickupIds))>
                                                    {{ $station->name }}</label>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="md:col-span-2 border rounded p-2">
                                        <p class="font-medium mb-1">Điểm trả</p>
                                        <div class="grid md:grid-cols-3 gap-2">
                                            @foreach ($stations as $station)
                                                <label class="flex items-center gap-2 border rounded px-2 py-1"><input
                                                        type="checkbox" name="dropoff_points[]"
                                                        value="{{ $station->id }}" @checked(in_array($station->id, $dropoffIds))>
                                                    {{ $station->name }}</label>
                                            @endforeach
                                        </div>
                                    </div>
                                    <button class=" text-white rounded px-3 py-1 md:col-span-2"
                                        style="background:#117FD4">Cập
                                        nhật</button>
                                </form>
                            </details>
                            <form method="POST" action="{{ route('admin.booking-routes.destroy', $item->id) }}"
                                onsubmit="return confirm('Xóa tuyến này?')">
                                @csrf
                                @method('DELETE')
                                <button class="text-red-600">Xóa</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="py-4 text-center text-gray-500">Không có dữ liệu</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        <div class="mt-4">{{ $items->withQueryString()->links() }}</div>
    </div>
@endsection