@extends('portal._layout')

@section('title', 'سبک بار | پنل راننده')

@section('body')
<div id="authScreen" class="auth-bg" style="background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #10b981 100%);">
    <div class="auth-card">
        <div class="text-center mb-6">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-emerald-600 text-white flex items-center justify-center text-2xl mb-3"><i class="fa-solid fa-truck"></i></div>
            <h1 class="text-xl font-extrabold">پنل راننده سبک بار</h1>
            <p class="text-sm text-zinc-500 mt-1" id="authSubtitle">با شماره موبایل خود وارد شوید</p>
        </div>

        {{-- Step 1: phone --}}
        <form id="phoneForm" class="space-y-3 auth-step" data-step="phone">
            <div>
                <label class="label">شماره موبایل</label>
                <input class="input" type="tel" name="phone" required placeholder="09xxxxxxxxx" pattern="09[0-9]{9}">
            </div>
            <button type="submit" class="btn w-full" style="background:#047857;color:#fff;">
                <i class="fa-solid fa-paper-plane"></i> دریافت کد تایید
            </button>
        </form>

        {{-- Step 2: OTP --}}
        <form id="otpForm" class="space-y-3 auth-step hidden" data-step="otp">
            <div class="text-xs text-zinc-500 text-center">کد تایید پنج رقمی برای شماره <span id="otpPhoneLabel" class="font-mono"></span> ارسال شد</div>
            <div>
                <label class="label">کد تایید</label>
                <input class="input text-center text-2xl tracking-widest" type="text" name="otp" required maxlength="6" inputmode="numeric" placeholder="-----">
            </div>
            <button type="submit" class="btn w-full" style="background:#047857;color:#fff;">
                <i class="fa-solid fa-right-to-bracket"></i> تایید و ورود
            </button>
            <button type="button" class="btn btn-soft w-full text-sm" data-back="phone">تغییر شماره</button>
        </form>

        {{-- Step 3: register (new user) --}}
        <form id="registerForm" class="space-y-3 auth-step hidden" data-step="register">
            <div class="text-xs text-zinc-600 text-center bg-emerald-50 rounded-xl p-2">این شماره ثبت‌نام نشده. برای ادامه نام خود را وارد کنید.</div>
            <div>
                <label class="label">نام و نام خانوادگی</label>
                <input class="input" type="text" name="name" required placeholder="علی محمدی">
            </div>
            <button type="submit" class="btn w-full" style="background:#047857;color:#fff;">
                <i class="fa-solid fa-user-plus"></i> ادامه ثبت‌نام
            </button>
        </form>

        {{-- Step 4: profile completion (driver) --}}
        <form id="profileForm" class="space-y-3 auth-step hidden" data-step="profile">
            <div class="text-xs text-zinc-600 text-center bg-emerald-50 rounded-xl p-2">تکمیل اطلاعات راننده و خودرو برای تایید ادمین</div>
            <div class="grid grid-cols-2 gap-2">
                <div><label class="label">کد ملی</label><input class="input" id="rmtoNcField" name="national_code" required maxlength="10" pattern="[0-9]{10}" placeholder="۰۰۱۰۰۰۰۰۰۰"></div>
                <div><label class="label">کد پستی</label><input class="input" name="postal_code" required maxlength="10" pattern="[0-9]{10}" placeholder="1234567890"></div>
                <div><label class="label">شماره گواهی‌نامه</label><input class="input" name="license_number" required placeholder="LIC-..."></div>
                <div><label class="label">شماره کارت هوشمند</label><input class="input" id="rmtoScField" name="smart_card_number" required placeholder="SC-..."></div>
                <div class="col-span-2">
                    <button type="button" id="rmtoLookupBtn" class="btn btn-soft w-full text-sm">
                        <i class="fa-solid fa-id-card"></i> استعلام از سامانه راهداری (RMTO)
                    </button>
                    <div id="rmtoLookupHint" class="text-xs text-zinc-500 mt-1 text-center">با وارد کردن کد ملی یا شماره هوشمند، اطلاعات راننده از RMTO پر می‌شود.</div>
                </div>
                <div>
                    <label class="label">نوع ناوگان</label>
                    <select class="select" name="vehicle_type" required>
                        <option value="truck">کامیون</option>
                        <option value="trailer">تریلی</option>
                        <option value="van">وانت / ون</option>
                    </select>
                </div>
                <div><label class="label">پلاک خودرو</label><input class="input" name="vehicle_plate" required placeholder="۱۲ ب ۳۴۵ ایران ۱۱"></div>
                <div class="col-span-2"><label class="label">ظرفیت خودرو (تن)</label><input class="input" type="number" step="0.1" name="vehicle_capacity" required placeholder="25"></div>
                <div class="col-span-2"><label class="label">آدرس</label><input class="input" name="address" required></div>
            </div>
            <button type="submit" class="btn w-full" style="background:#047857;color:#fff;">
                <i class="fa-solid fa-save"></i> ثبت پروفایل
            </button>
        </form>

        {{-- Step 5: pending --}}
        <div id="pendingScreen" class="auth-step hidden text-center space-y-4" data-step="pending">
            <div class="w-16 h-16 mx-auto rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-3xl">
                <i class="fa-solid fa-hourglass-half"></i>
            </div>
            <div class="font-extrabold text-lg">در انتظار تایید ادمین</div>
            <div class="text-sm text-zinc-600">پروفایل شما برای تایید به پنل مدیریت ارسال شد. پس از تایید، با همین شماره وارد سیستم شده و امکان دریافت بار برای شما فعال می‌شود.</div>
            <button id="pendingRefresh" class="btn btn-soft w-full">
                <i class="fa-solid fa-rotate"></i> بررسی وضعیت
            </button>
            <button id="pendingLogout" class="btn btn-ghost w-full text-rose-600 text-sm">خروج</button>
        </div>
    </div>
</div>

<div id="appScreen" class="app-shell hidden">
    <header class="app-header flex items-center justify-between" style="background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%); box-shadow: 0 12px 30px rgba(4,120,87,.25);">
        <div>
            <div class="text-xs opacity-80">پنل راننده</div>
            <h1 id="hdrName">سلام</h1>
            <p id="hdrSub">آماده دریافت بار</p>
        </div>
        <div class="flex items-center gap-2">
            <button id="onlineToggle" class="bg-white/15 hover:bg-white/25 rounded-2xl px-3 py-2 text-xs font-bold">
                <i class="fa-solid fa-power-off"></i> <span id="onlineText">آفلاین</span>
            </button>
            <button id="logoutBtn" class="bg-white/15 hover:bg-white/25 rounded-2xl px-3 py-2 text-sm">
                <i class="fa-solid fa-arrow-right-from-bracket"></i>
            </button>
        </div>
    </header>

    <div id="paneHome" class="pane active">
        <div class="card mb-3">
            <div class="grid grid-cols-3 gap-2 text-center">
                <div class="bg-emerald-50 rounded-xl p-3"><div class="font-extrabold text-xl" id="kpiAvail">0</div><div class="text-xs text-zinc-500">قابل دریافت</div></div>
                <div class="bg-blue-50 rounded-xl p-3"><div class="font-extrabold text-xl" id="kpiActive">0</div><div class="text-xs text-zinc-500">در حال انجام</div></div>
                <div class="bg-amber-50 rounded-xl p-3"><div class="font-extrabold text-xl" id="kpiDone">0</div><div class="text-xs text-zinc-500">تحویل‌شده</div></div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="flex items-center justify-between mb-2">
                <div class="font-extrabold">موقعیت من</div>
                <button id="sendLocBtn" class="btn btn-soft text-xs"><i class="fa-solid fa-location-crosshairs"></i> ارسال موقعیت</button>
            </div>
            <div id="driverMap" class="map-frame"></div>
        </div>

        <div class="card">
            <div class="flex items-center justify-between mb-2">
                <div class="font-extrabold">بارهای فعال من</div>
                <button class="text-emerald-700 text-sm" data-go="active">همه</button>
            </div>
            <div id="activeListHome" class="space-y-2"><div class="text-sm text-zinc-500 text-center py-4">هیچ بار فعالی ندارید</div></div>
        </div>
    </div>

    <div id="paneAvailable" class="pane">
        <div class="card mb-3 flex items-center justify-between">
            <div class="font-extrabold">بارهای آماده</div>
            <button id="reloadAvailBtn" class="text-blue-600 text-sm"><i class="fa-solid fa-rotate"></i></button>
        </div>
        <div id="availableList" class="space-y-2"></div>
    </div>

    <div id="paneActive" class="pane">
        <div class="card mb-3 flex items-center justify-between">
            <div class="font-extrabold">بارهای من</div>
            <button id="reloadHistBtn" class="text-blue-600 text-sm"><i class="fa-solid fa-rotate"></i></button>
        </div>
        <div id="historyList" class="space-y-2"></div>
    </div>

    <div id="paneProfile" class="pane">
        <div class="card text-center mb-3">
            <div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-emerald-500 to-emerald-700 text-white flex items-center justify-center text-3xl font-extrabold mb-3" id="profAvatar">ر</div>
            <div class="font-extrabold text-lg" id="profName">-</div>
            <div class="text-sm text-zinc-500" id="profPhoneLbl">-</div>
            <div class="mt-2"><span class="badge badge-green">راننده</span></div>
        </div>
        <div class="card mb-3">
            <div class="font-extrabold mb-3">ناوگان</div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-zinc-500">پلاک</span><span id="profPlate" class="font-mono">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">نوع</span><span id="profType">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">ظرفیت</span><span id="profCap">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">کارت هوشمند</span><span id="profCard" class="font-mono">-</span></div>
            </div>
        </div>
        <div class="card mb-3">
            <div class="font-extrabold mb-3">اطلاعات تماس</div>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-zinc-500">موبایل</span><span id="profPhone" class="font-mono">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">کد ملی</span><span id="profNc" class="font-mono">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">گواهینامه</span><span id="profLic" class="font-mono">-</span></div>
            </div>
        </div>
        <button id="logoutBtn2" class="btn btn-danger w-full"><i class="fa-solid fa-arrow-right-from-bracket"></i> خروج</button>
    </div>

    <nav class="tabbar">
        <button data-go="home" class="active"><i class="fa-solid fa-house"></i> خانه</button>
        <button data-go="available"><i class="fa-solid fa-truck-loading"></i> بارها</button>
        <button data-go="active"><i class="fa-solid fa-clipboard-list"></i> سفرها</button>
        <button data-go="profile"><i class="fa-solid fa-user"></i> پروفایل</button>
    </nav>
</div>
@endsection

@section('scripts')
<script>
window.SABOK_TOKEN_KEY = 'sabok_driver_token';
const PHONE_KEY = 'sabok_driver_phone';
const TEHRAN_FALLBACK = { lat: 35.7006, lng: 51.3373 };

let state = { user: null, isOnline: false, available: [], history: [], map: null, mapLibre: null, phone: '' };

function showStep(step) {
    document.querySelectorAll('.auth-step').forEach(el => el.classList.add('hidden'));
    const el = document.querySelector('[data-step="' + step + '"]');
    if (el) el.classList.remove('hidden');
}
function showAuth()  { document.getElementById('authScreen').classList.remove('hidden'); document.getElementById('appScreen').classList.add('hidden'); }
function showApp()   { document.getElementById('authScreen').classList.add('hidden'); document.getElementById('appScreen').classList.remove('hidden'); }

document.querySelectorAll('[data-back]').forEach(b => b.addEventListener('click', () => showStep(b.dataset.back)));

document.getElementById('phoneForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const phone = e.target.phone.value.trim();
    try {
        const res = await SabokApi('/auth/send-otp', { method: 'POST', body: { phone, login_type: 'driver' } });
        state.phone = phone;
        localStorage.setItem(PHONE_KEY, phone);
        document.getElementById('otpPhoneLabel').textContent = phone;
        if (res.debug_otp) SabokToast('کد تست (debug): ' + res.debug_otp, 'success');
        else SabokToast('کد تایید ارسال شد', 'success');
        showStep('otp');
    } catch (err) { SabokToast(err.message, 'error'); }
});

document.getElementById('otpForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const otp = e.target.otp.value.trim();
    try {
        const res = await SabokApi('/auth/verify-otp', { method: 'POST', body: { mobile: state.phone, otp, login_type: 'driver' } });
        await handleAuthResponse(res);
    } catch (err) { SabokToast(err.message, 'error'); }
});

document.getElementById('registerForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = e.target.name.value.trim();
    const otp = document.getElementById('otpForm').otp.value.trim();
    try {
        const res = await SabokApi('/auth/register-mobile', { method: 'POST', body: { mobile: state.phone, otp, name, role: 'driver' } });
        await handleAuthResponse(res);
    } catch (err) { SabokToast(err.message, 'error'); }
});

// RMTO pre-fill — calls /auth/driver/rmto-lookup with whichever ID the driver has typed
// and fills the authoritative fields so the user can review before saving.
document.getElementById('rmtoLookupBtn').addEventListener('click', async () => {
    const form = document.getElementById('profileForm');
    const body = {};
    const nc = form.national_code.value.trim();
    const sc = form.smart_card_number.value.trim();
    if (nc.length === 10) body.national_code = nc;
    if (sc.length > 0) body.smart_card_number = sc;
    if (!body.national_code && !body.smart_card_number) {
        SabokToast('کد ملی یا شماره هوشمند را وارد کنید', 'error');
        return;
    }
    const hint = document.getElementById('rmtoLookupHint');
    hint.textContent = 'در حال استعلام از RMTO...';
    try {
        const res = await SabokApi('/auth/driver/rmto-lookup', { method: 'POST', body });
        const d = res.data || {};
        if (d.name)              form.querySelector('input[name=national_code]').value = d.national_code || nc;
        if (d.smart_card_number) form.smart_card_number.value = d.smart_card_number;
        if (d.license_number)    form.license_number.value = d.license_number;
        const note = [];
        if (d.name) note.push('نام: ' + d.name);
        if (d.is_active === false) note.push('⚠️ کارت غیرفعال');
        hint.textContent = note.length ? note.join(' • ') : 'اطلاعات از RMTO دریافت شد';
        SabokToast('اطلاعات RMTO دریافت شد', 'success');
    } catch (err) {
        hint.textContent = err.message || 'استعلام ناموفق بود';
        SabokToast(err.message || 'استعلام ناموفق بود', 'error');
    }
});

document.getElementById('profileForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const payload = Object.fromEntries(new FormData(e.target).entries());
    payload.name = state.user?.name || (document.getElementById('registerForm').name?.value || '');
    try {
        const res = await SabokApi('/auth/complete-driver-profile', { method: 'POST', body: payload });
        state.user = res.user || state.user;
        if (res.code === 'pending_admin_approval') {
            showStep('pending');
        } else {
            await enterApp();
        }
    } catch (err) { SabokToast(err.message, 'error'); }
});

document.getElementById('pendingRefresh').addEventListener('click', async () => {
    try {
        const res = await SabokApi('/auth/me');
        state.user = res.data;
        if (state.user.is_approved) {
            await enterApp();
        } else {
            SabokToast('هنوز تایید نشده است', 'info');
        }
    } catch (err) { SabokToast(err.message, 'error'); }
});

document.getElementById('pendingLogout').addEventListener('click', logout);

async function handleAuthResponse(res) {
    if (res.access_token) {
        localStorage.setItem(window.SABOK_TOKEN_KEY, res.access_token);
    }
    state.user = res.user || null;
    switch (res.code) {
        case 'requires_registration':
            showStep('register');
            return;
        case 'requires_profile_completion':
            showStep('profile');
            return;
        case 'pending_admin_approval':
            showStep('pending');
            return;
        case 'authenticated':
            await enterApp();
            return;
        default:
            if (res.success && state.user) await enterApp();
            else if (res.message) SabokToast(res.message, 'error');
    }
}

async function enterApp() {
    if (!state.user) {
        const me = await SabokApi('/auth/me');
        state.user = me.data;
    }
    if (!state.user.is_approved) { showStep('pending'); return; }
    showApp();
    document.getElementById('hdrName').textContent = 'سلام، ' + (state.user.name || 'راننده');
    document.getElementById('profName').textContent = state.user.name || '-';
    document.getElementById('profPhone').textContent = state.user.phone || '-';
    document.getElementById('profPhoneLbl').textContent = state.user.phone || '-';
    document.getElementById('profNc').textContent = state.user.national_code || '-';
    document.getElementById('profLic').textContent = state.user.license_number || '-';
    document.getElementById('profPlate').textContent = state.user.vehicle_plate || '-';
    document.getElementById('profType').textContent = state.user.vehicle_type || '-';
    document.getElementById('profCap').textContent = (state.user.vehicle_capacity || 0) + ' تن';
    document.getElementById('profCard').textContent = state.user.smart_card_number || '-';
    document.getElementById('profAvatar').textContent = (state.user.name || 'ر').charAt(0);
    state.isOnline = state.user.driver_status === 'online';
    updateOnlineUi();
    initDriverMap();
    await Promise.all([loadAvailable(), loadHistory()]);
}

function updateOnlineUi() {
    document.getElementById('onlineText').textContent = state.isOnline ? 'آنلاین' : 'آفلاین';
    document.getElementById('hdrSub').textContent = state.isOnline ? 'در دسترس برای دریافت بار' : 'در حال حاضر آفلاین هستید';
}

document.getElementById('onlineToggle').addEventListener('click', async () => {
    try {
        if (state.isOnline) {
            await SabokApi('/driver/offline', { method: 'POST' });
            state.isOnline = false;
            SabokToast('آفلاین شدید');
        } else {
            const pos = await getPosition();
            await SabokApi('/driver/online', { method: 'POST', body: { latitude: pos.lat, longitude: pos.lng } });
            state.isOnline = true;
            SabokToast('آنلاین شدید', 'success');
            updateMeMarker(pos);
        }
        updateOnlineUi();
    } catch (err) { SabokToast(err.message, 'error'); }
});

function getPosition() {
    return new Promise(resolve => {
        if (!navigator.geolocation) return resolve(TEHRAN_FALLBACK);
        navigator.geolocation.getCurrentPosition(
            p => resolve({ lat: p.coords.latitude, lng: p.coords.longitude }),
            () => resolve(TEHRAN_FALLBACK),
            { timeout: 4000 }
        );
    });
}

document.getElementById('sendLocBtn').addEventListener('click', async () => {
    try {
        const pos = await getPosition();
        await SabokApi('/driver/location', { method: 'POST', body: { latitude: pos.lat, longitude: pos.lng, speed: 0, bearing: 0 } });
        SabokToast('موقعیت ارسال شد', 'success');
        updateMeMarker(pos);
    } catch (err) { SabokToast(err.message, 'error'); }
});

function go(pane) {
    document.querySelectorAll('.pane').forEach(el => el.classList.remove('active'));
    document.getElementById('pane' + pane.charAt(0).toUpperCase() + pane.slice(1)).classList.add('active');
    document.querySelectorAll('.tabbar button').forEach(b => b.classList.remove('active'));
    const t = document.querySelector('.tabbar [data-go="' + pane + '"]'); if (t) t.classList.add('active');
    if (pane === 'available') loadAvailable();
    if (pane === 'active') loadHistory();
}
document.body.addEventListener('click', e => {
    const btn = e.target.closest('[data-go]');
    if (btn) go(btn.dataset.go);
});

document.getElementById('logoutBtn').addEventListener('click', logout);
document.getElementById('logoutBtn2').addEventListener('click', logout);
async function logout() {
    try { await SabokApi('/auth/logout', { method: 'POST' }); } catch (_) {}
    localStorage.removeItem(window.SABOK_TOKEN_KEY);
    localStorage.removeItem(PHONE_KEY);
    state.user = null;
    state.phone = '';
    showAuth();
    showStep('phone');
}

async function initDriverMap() {
    if (state.map) { state.mapLibre.resize(); return; }
    try {
        const { wrapper, map } = await SabokCreateMap('driverMap', { center: window.SABOK_CFG.tehranCenter, zoom: 11 });
        state.map = wrapper; state.mapLibre = map;
        map.addSource('me', { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
        map.addLayer({ id: 'me-halo', type: 'circle', source: 'me', paint: { 'circle-radius': 22, 'circle-color': '#10b981', 'circle-opacity': 0.25 } });
        map.addLayer({ id: 'me-dot', type: 'circle', source: 'me', paint: { 'circle-radius': 10, 'circle-color': '#10b981', 'circle-stroke-color': '#fff', 'circle-stroke-width': 2 } });
        const lat = state.user?.location?.latitude || TEHRAN_FALLBACK.lat;
        const lng = state.user?.location?.longitude || TEHRAN_FALLBACK.lng;
        updateMeMarker({ lat: +lat, lng: +lng });
    } catch (err) { /* silent */ }
}
function updateMeMarker(pos) {
    if (!state.mapLibre) return;
    state.mapLibre.getSource('me').setData({ type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [pos.lng, pos.lat] }, properties: {} }] });
    state.mapLibre.flyTo({ center: [pos.lng, pos.lat], zoom: 12 });
}

async function loadAvailable() {
    try {
        const res = await SabokApi('/driver/orders/available');
        state.available = res.data?.data || [];
        document.getElementById('kpiAvail').textContent = state.available.length.toLocaleString('fa-IR');
        const el = document.getElementById('availableList');
        if (!state.available.length) {
            el.innerHTML = '<div class="card text-center text-zinc-500 py-8"><i class="fa-solid fa-truck text-3xl text-zinc-300 mb-2 block"></i>بار قابل دریافتی وجود ندارد</div>';
        } else {
            el.innerHTML = state.available.map(l => loadCard(l, true)).join('');
        }
    } catch (err) { /* silent */ }
}
async function loadHistory() {
    try {
        const res = await SabokApi('/driver/orders/history');
        state.history = res.data?.data || [];
        const active = state.history.filter(l => l.driver_order_status && !['DELIVERED', 'CONFIRMED', 'SETTLED'].includes(l.driver_order_status)).length;
        const done = state.history.filter(l => ['DELIVERED', 'CONFIRMED', 'SETTLED'].includes(l.driver_order_status)).length;
        document.getElementById('kpiActive').textContent = active.toLocaleString('fa-IR');
        document.getElementById('kpiDone').textContent = done.toLocaleString('fa-IR');
        const el = document.getElementById('historyList');
        const home = document.getElementById('activeListHome');
        if (!state.history.length) {
            el.innerHTML = '<div class="card text-center text-zinc-500 py-8"><i class="fa-solid fa-clipboard text-3xl text-zinc-300 mb-2 block"></i>هیچ سفری ندارید</div>';
            home.innerHTML = '<div class="text-sm text-zinc-500 text-center py-4">هیچ بار فعالی ندارید</div>';
        } else {
            el.innerHTML = state.history.map(l => loadCard(l, false)).join('');
            const activeRows = state.history.filter(l => !['DELIVERED', 'CONFIRMED', 'SETTLED'].includes(l.driver_order_status)).slice(0, 3);
            home.innerHTML = activeRows.length ? activeRows.map(l => loadCard(l, false)).join('') : '<div class="text-sm text-zinc-500 text-center py-4">بار فعالی ندارید</div>';
        }
    } catch (err) { /* silent */ }
}
function loadCard(l, available) {
    return `<div class="order-card">
        <div class="flex items-center justify-between">
            <div class="font-extrabold">#${l.id} - ${l.title || ''}</div>
        </div>
        <div class="order-route">
            <div class="city"><div class="label">مبدا</div><div class="name">${l.origin_city || '-'}</div></div>
            <div class="arrow"><i class="fa-solid fa-arrow-left"></i></div>
            <div class="city text-left"><div class="label">مقصد</div><div class="name">${l.destination_city || '-'}</div></div>
        </div>
        <div class="flex justify-between text-xs text-zinc-500">
            <span><i class="fa-solid fa-weight-hanging"></i> ${l.weight || 0} تن</span>
            <span><i class="fa-solid fa-route"></i> ${l.distance_km || 0} km</span>
            <span><i class="fa-solid fa-money-bill-wave"></i> ${SabokFmtMoney(l.final_price || l.price || 0)}</span>
        </div>
        ${available ? '<div class="mt-3"><button class="btn btn-success w-full text-sm" data-accept="' + l.id + '"><i class="fa-solid fa-check"></i> قبول بار</button></div>' : ''}
    </div>`;
}

document.body.addEventListener('click', async (e) => {
    const accept = e.target.closest('[data-accept]');
    if (!accept) return;
    try {
        await SabokApi('/driver/orders/' + accept.dataset.accept + '/accept', { method: 'POST' });
        SabokToast('بار پذیرفته شد', 'success');
        await Promise.all([loadAvailable(), loadHistory()]);
    } catch (err) { SabokToast(err.message, 'error'); }
});

async function bootstrap() {
    showAuth();
    showStep('phone');
    if (!localStorage.getItem(window.SABOK_TOKEN_KEY)) return;
    try {
        const me = await SabokApi('/auth/me');
        state.user = me.data;
        if (state.user.role !== 'driver') {
            localStorage.removeItem(window.SABOK_TOKEN_KEY);
            return;
        }
        if (state.user.needsProfileCompletion ?? (!state.user.profile_completed)) {
            state.phone = state.user.phone || '';
            showStep('profile');
            return;
        }
        if (!state.user.is_approved) {
            showStep('pending');
            return;
        }
        await enterApp();
    } catch (err) {
        localStorage.removeItem(window.SABOK_TOKEN_KEY);
    }
}

bootstrap();
</script>
@endsection