@extends('admin.layouts.app')

@section('title', 'إدارة الرحلات')
@section('page-title', 'إدارة الرحلات')
@section('page-icon', 'fas fa-route')

@section('content')
{{-- إحصائيات --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon gold"><i class="fas fa-route"></i></div>
            <div class="stat-value">{{ $trips->total() }}</div>
            <div class="stat-label">إجمالي الرحلات</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon orange"><i class="fas fa-clock"></i></div>
            <div class="stat-value">{{ $trips->where('status', 'pending')->count() }}</div>
            <div class="stat-label">في الانتظار</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-car"></i></div>
            <div class="stat-value">{{ $trips->where('status', 'started')->count() }}</div>
            <div class="stat-label">قيد التنفيذ</div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-check-circle"></i></div>
            <div class="stat-value">{{ $trips->where('status', 'completed')->count() }}</div>
            <div class="stat-label">مكتملة</div>
        </div>
    </div>
</div>

{{-- فلاتر --}}
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="fas fa-filter"></i> البحث والفلترة</div>
            <div class="card-body">
                <form method="GET" action="{{ route('admin.trips') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="status" class="form-label">حالة الرحلة</label>
                    <select name="status" id="status" class="form-select">
                        <option value="">جميع الحالات</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>في الانتظار</option>
                        <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>مقبولة</option>
                        <option value="started" {{ request('status') == 'started' ? 'selected' : '' }}>قيد التنفيذ</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>مكتملة</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>ملغية</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="driver" class="form-label">السائق</label>
                    <input type="text" name="driver" id="driver" class="form-control"
                           placeholder="اسم السائق" value="{{ request('driver') }}">
                </div>
                <div class="col-md-3">
                    <label for="passenger" class="form-label">الراكب</label>
                    <input type="text" name="passenger" id="passenger" class="form-control"
                           placeholder="اسم الراكب" value="{{ request('passenger') }}">
                </div>
                <div class="col-md-3">
                    <label for="date" class="form-label">التاريخ</label>
                    <input type="date" name="date" id="date" class="form-control"
                           value="{{ request('date') }}">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> بحث
                    </button>
                    <a href="{{ route('admin.trips') }}" class="btn btn-secondary">
                        <i class="fas fa-undo"></i> إعادة تعيين
                    </a>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>

{{-- جدول الرحلات --}}
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div><i class="fas fa-list"></i> قائمة الرحلات</div>
                <span class="badge badge-info">{{ $trips->total() }} رحلة</span>
            </div>
        <div class="card-body">
                @if($trips->count() > 0)
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>السائق</th>
                                <th>الراكب</th>
                                <th>نقطة الانطلاق</th>
                                <th>نقطة الوصول</th>
                                <th>المسافة</th>
                                <th>السعر</th>
                                <th>الحالة</th>
                                <th>التاريخ</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($trips as $trip)
                                <tr>
                                    <td>{{ $trip->id }}</td>
                                    <td>
                                        @if($trip->driver)
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm me-2">
                                                    @if($trip->driver->profile_photo)
                                                        <img src="{{ asset('storage/' . $trip->driver->profile_photo) }}"
                                                             alt="صورة السائق" class="rounded-circle" width="32">
                                                    @else
                                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center"
                                                             style="width: 32px; height: 32px;">
                                                            <i class="fas fa-user text-white"></i>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div class="fw-bold">{{ $trip->driver->name }}</div>
                                                    <small class="text-muted">{{ $trip->driver->phone }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">غير محدد</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($trip->passenger)
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm me-2">
                                                    @if($trip->passenger->profile_photo)
                                                        <img src="{{ asset('storage/' . $trip->passenger->profile_photo) }}"
                                                             alt="صورة الراكب" class="rounded-circle" width="32">
                                                    @else
                                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center"
                                                             style="width: 32px; height: 32px;">
                                                            <i class="fas fa-user text-white"></i>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div class="fw-bold">{{ $trip->passenger->name }}</div>
                                                    <small class="text-muted">{{ $trip->passenger->phone }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">غير محدد</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="location-info">
                                            <div class="fw-bold">{{ Str::limit($trip->pickup_location, 30) }}</div>
                                            @if($trip->pickup_latitude && $trip->pickup_longitude)
                                                <small class="text-muted">
                                                    {{ number_format($trip->pickup_latitude, 6) }}, {{ number_format($trip->pickup_longitude, 6) }}
                                                </small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div class="location-info">
                                            <div class="fw-bold">{{ Str::limit($trip->dropoff_location, 30) }}</div>
                                            @if($trip->dropoff_latitude && $trip->dropoff_longitude)
                                                <small class="text-muted">
                                                    {{ number_format($trip->dropoff_latitude, 6) }}, {{ number_format($trip->dropoff_longitude, 6) }}
                                                </small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        @if($trip->distance)
                                            <span class="badge badge-info">{{ $trip->distance }} كم</span>
                                        @else
                                            <span style="color: var(--text-muted);">غير محدد</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($trip->fare)
                                            <span class="badge badge-success">{{ number_format($trip->fare, 0) }} د.ع</span>
                                        @else
                                            <span class="text-muted">غير محدد</span>
                                        @endif
                                    </td>
                                    <td>
                                        @switch($trip->status)
                                            @case('pending')
                                                <span class="badge badge-warning">في الانتظار</span>
                                                @break
                                            @case('accepted')
                                                <span class="badge badge-info">مقبولة</span>
                                                @break
                                            @case('started')
                                                <span class="badge badge-info">قيد التنفيذ</span>
                                                @break
                                            @case('completed')
                                                <span class="badge badge-success">مكتملة</span>
                                                @break
                                            @case('cancelled')
                                                <span class="badge badge-danger">ملغية</span>
                                                @break
                                            @default
                                                <span class="badge badge-secondary">{{ $trip->status }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <div class="date-info">
                                            <small style="color: var(--text-muted);">{{ $trip->created_at->format('Y-m-d') }}</small>
                                            <br><small style="color: var(--text-muted);">{{ $trip->created_at->format('H:i') }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.trips.show', $trip->id) }}" class="btn btn-info btn-sm" title="عرض">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <button type="button" class="btn btn-primary btn-sm" onclick="showTripDetails({{ $trip->id }})" title="تفاصيل">
                                                <i class="fas fa-info-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                    <div class="p-3 border-top" style="border-color: rgba(255,255,255,0.04) !important;">
                        {{ $trips->links('pagination::bootstrap-4') }}
                    </div>
                @else
                    <div class="empty-state">
                        <i class="fas fa-route d-block"></i>
                        لا توجد رحلات
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal لعرض تفاصيل الرحلة -->
<div class="modal fade" id="tripDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تفاصيل الرحلة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="tripDetailsContent">
                <!-- سيتم تحميل المحتوى هنا -->
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// تحديث حالة الرحلة
function updateTripStatus(tripId, status) {
    if (confirm('هل أنت متأكد من تحديث حالة الرحلة؟')) {
        fetch(`/admin/trips/${tripId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('حدث خطأ أثناء تحديث حالة الرحلة');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء تحديث حالة الرحلة');
        });
    }
}

// عرض تفاصيل الرحلة
function showTripDetails(tripId) {
    fetch(`/admin/trips/${tripId}/details`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('tripDetailsContent').innerHTML = data.html;
                new bootstrap.Modal(document.getElementById('tripDetailsModal')).show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ أثناء تحميل تفاصيل الرحلة');
        });
}

// تحديث الإحصائيات في الوقت الفعلي
function updateStats() {
    // يمكن إضافة تحديث للإحصائيات هنا
}

// تحديث كل 30 ثانية
setInterval(updateStats, 30000);
</script>

@endsection