@extends('admin.layouts.app')

@section('title', 'مدیریت رانندگان')

@include('admin.partials.iran-plate', ['loadStylesOnly' => true])


@section('content')
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <h3 class="mb-0">{{ number_format($onlineDrivers ?? 0) }}</h3>
                <p class="mb-0">رانندگان آنلاین</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <h3 class="mb-0">{{ number_format($busyDrivers ?? 0) }}</h3>
                <p class="mb-0">رانندگان مشغول</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-secondary text-white">
            <div class="card-body">
                <h3 class="mb-0">{{ number_format($offlineDrivers ?? 0) }}</h3>
                <p class="mb-0">رانندگان آفلاین</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <h3 class="mb-0">{{ number_format($totalDrivers ?? 0) }}</h3>
                <p class="mb-0">کل رانندگان</p>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">لیست رانندگان</h5>
        <a href="{{ route('admin.map') }}" class="btn btn-primary">
            <i class="fas fa-map-marked-alt me-2"></i>
            نمایش روی نقشه
        </a>
    </div>

    <div class="card-body">
        <form method="GET" action="{{ route('admin.drivers.index') }}" class="mb-4">
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" name="search" class="form-control"
                               placeholder="جستجو (نام، موبایل، پلاک)"
                               value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-2">
                    <select name="status" class="form-select">
                        <option value="">همه وضعیت‌ها</option>
                        <option value="online"  {{ request('status') === 'online'  ? 'selected' : '' }}>آنلاین</option>
                        <option value="busy"    {{ request('status') === 'busy'    ? 'selected' : '' }}>مشغول</option>
                        <option value="offline" {{ request('status') === 'offline' ? 'selected' : '' }}>آفلاین</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="vehicle_type" class="form-select">
                        <option value="">همه خودروها</option>
                        <option value="van"     {{ request('vehicle_type') === 'van'     ? 'selected' : '' }}>ون</option>
                        <option value="truck"   {{ request('vehicle_type') === 'truck'   ? 'selected' : '' }}>کامیون</option>
                        <option value="trailer" {{ request('vehicle_type') === 'trailer' ? 'selected' : '' }}>تریلر</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="per_page" class="form-select">
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10 مورد</option>
                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25 مورد</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 مورد</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-filter me-2"></i> فیلتر
                    </button>
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <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>
                    @forelse($drivers as $driver)
                    <tr>
                        <td>#{{ $driver->id }}</td>

                        <td>
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center me-2"
                                     style="width:35px;height:35px;font-size:0.875rem;">
                                    {{ mb_substr($driver->name, 0, 1) }}
                                </div>
                                <strong>{{ $driver->name }}</strong>
                            </div>
                        </td>

                        <td class="font-monospace">{{ $driver->phone }}</td>

                        <td>
                            @if($driver->vehicle_type === 'van')
                                <i class="fas fa-shuttle-van me-1"></i> ون
                            @elseif($driver->vehicle_type === 'truck')
                                <i class="fas fa-truck me-1"></i> کامیون
                            @elseif($driver->vehicle_type === 'trailer')
                                <i class="fas fa-truck-moving me-1"></i> تریلر
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>

                        {{-- پلاک ایران --}}
                        <td class="p-2">
                            @include('admin.partials.iran-plate', ['plate' => $driver->vehicle_plate])
                        </td>

                        <td>
                            @if($driver->driver_status === 'online')
                                <span class="badge bg-success"><i class="fas fa-circle"></i> آنلاین</span>
                            @elseif($driver->driver_status === 'busy')
                                <span class="badge bg-warning"><i class="fas fa-circle"></i> مشغول</span>
                            @else
                                <span class="badge bg-secondary"><i class="fas fa-circle"></i> آفلاین</span>
                            @endif
                        </td>

                        <td><strong>{{ $driver->completed_loads_count ?? 0 }}</strong></td>

                        <td>
                            @php $rating = $driver->rating ?? 0; @endphp
                            <div class="d-flex align-items-center gap-1">
                                <span>{{ number_format($rating, 1) }}</span>
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="{{ $i <= $rating ? 'fas' : 'far' }} fa-star text-warning"
                                       style="font-size:0.75rem;"></i>
                                @endfor
                            </div>
                        </td>

                        <td>
                            <small class="text-muted">
                                {{ $driver->last_activity
                                    ? \Morilog\Jalali\Jalalian::fromDateTime($driver->last_activity)->ago()
                                    : 'نامشخص' }}
                            </small>
                        </td>

                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('admin.drivers.show', $driver->id) }}"
                                   class="btn btn-outline-info" title="مشاهده">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.users.edit', $driver->id) }}"
                                   class="btn btn-outline-primary" title="ویرایش">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-outline-warning btn-rmto-inquiry" title="استعلام RMTO"
                                   data-driver-id="{{ $driver->id }}" data-driver-name="{{ $driver->name }}"
                                   data-bs-toggle="modal" data-bs-target="#rmtoInquiryModal">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center text-muted py-5">
                            <i class="fas fa-id-card fa-3x mb-3 d-block"></i>
                            <p class="mb-0">هیچ راننده‌ای یافت نشد</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($drivers->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $drivers->links() }}
        </div>
        @endif
    </div>
</div>

<!-- RMTO Driver Inquiry Modal -->
<div class="modal fade" id="rmtoInquiryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">استعلام اطلاعات راننده از RMTO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="rmtoInquiryForm">
                    <div class="mb-3">
                        <label class="form-label">نوع استعلام</label>
                        <div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="inquiry_type" id="byNationalId" value="national_id" checked>
                                <label class="form-check-label" for="byNationalId">کد ملی</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="inquiry_type" id="bySmartCard" value="smart_card">
                                <label class="form-check-label" for="bySmartCard">کارت هوشمند</label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="inquiryValue" class="form-label">مقدار</label>
                        <input type="text" class="form-control" id="inquiryValue" placeholder="کد ملی یا شماره کارت هوشمند" required>
                    </div>
                    <div id="rmtoResults" style="display: none;">
                        <div class="alert alert-info">
                            <h6>نتایج استعلام:</h6>
                            <div id="resultsContent"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary" id="submitInquiry">استعلام</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('rmtoInquiryModal');
    const form = document.getElementById('rmtoInquiryForm');
    const submitBtn = document.getElementById('submitInquiry');
    const resultsDiv = document.getElementById('rmtoResults');
    const resultsContent = document.getElementById('resultsContent');

    document.querySelectorAll('.btn-rmto-inquiry').forEach(btn => {
        btn.addEventListener('click', function() {
            const driverId = this.dataset.driverId;
            const driverName = this.dataset.driverName;

            document.querySelector('.modal-header .modal-title').textContent =
                `استعلام اطلاعات ${driverName} از RMTO`;
        });
    });

    submitBtn.addEventListener('click', async function() {
        const inquiryType = document.querySelector('input[name="inquiry_type"]:checked').value;
        const inquiryValue = document.getElementById('inquiryValue').value;

        if (!inquiryValue) {
            alert('لطفا مقدار استعلام را وارد کنید');
            return;
        }

        try {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>درحال جستجو...';

            const response = await fetch('{{ route("admin.rmto.driver-info") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    inquiry_type: inquiryType,
                    national_code: inquiryType === 'national_id' ? inquiryValue : '',
                    card_number: inquiryType === 'smart_card' ? inquiryValue : ''
                })
            });

            const data = await response.json();

            if (data.success && data.data) {
                const driver = data.data;
                let html = '<table class="table table-sm"><tbody>';
                html += `<tr><th>نام</th><td>${driver.Name || '-'}</td></tr>`;
                html += `<tr><th>کد ملی</th><td>${driver.NationalId || '-'}</td></tr>`;
                html += `<tr><th>شماره کارت</th><td>${driver.CardNumber || '-'}</td></tr>`;
                html += `<tr><th>شماره گواهینامه</th><td>${driver.LicenseNumber || '-'}</td></tr>`;
                html += `<tr><th>وضعیت</th><td>${driver.Status || '-'}</td></tr>`;
                html += '</tbody></table>';
                resultsContent.innerHTML = html;
                resultsDiv.style.display = 'block';
            } else {
                alert('خطا: ' + (data.message || 'استعلام ناموفق بود'));
                resultsDiv.style.display = 'none';
            }
        } catch (error) {
            console.error('Error:', error);
            alert('خطا در برقراری ارتباط');
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'استعلام';
        }
    });
});
</script>
@endpush
@endsection