@extends('portal._layout')

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

@section('body')
<div id="authScreen" class="auth-bg">
    <div class="auth-card">
        <div class="text-center mb-6">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-blue-600 text-white flex items-center justify-center text-2xl font-extrabold mb-3">سبک</div>
            <h1 class="text-xl font-extrabold">پنل صاحبین بار</h1>
            <p class="text-sm text-zinc-500 mt-1">ورود با شماره موبایل و کد تایید</p>
        </div>

        <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 pattern="09[0-9]{9}" placeholder="09xxxxxxxxx">
            </div>
            <button type="submit" class="btn btn-primary w-full"><i class="fa-solid fa-paper-plane"></i> دریافت کد تایید</button>
        </form>

        <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 btn-primary w-full"><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>

        <form id="registerForm" class="space-y-3 auth-step hidden" data-step="register">
            <div class="text-xs text-zinc-600 text-center bg-blue-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 btn-primary w-full"><i class="fa-solid fa-user-plus"></i> ادامه ثبت‌نام</button>
        </form>

        <form id="profileForm" class="space-y-3 auth-step hidden" data-step="profile">
            <div class="text-xs text-zinc-600 text-center bg-blue-50 rounded-xl p-2">تکمیل پروفایل جهت بهره‌برداری از سامانه</div>
            <div class="grid grid-cols-2 gap-2">
                <div><label class="label">کد ملی</label><input class="input" name="national_code" required maxlength="10" pattern="[0-9]{10}"></div>
                <div><label class="label">کد پستی</label><input class="input" name="postal_code" maxlength="10" pattern="[0-9]{10}"></div>
                <div class="col-span-2"><label class="label">آدرس</label><input class="input" name="address" required></div>
            </div>
            <button type="submit" class="btn btn-primary w-full"><i class="fa-solid fa-save"></i> ثبت و ورود</button>
        </form>
    </div>
</div>

<div id="appScreen" class="app-shell hidden">
    <header class="app-header flex items-center justify-between">
        <div>
            <div class="text-xs opacity-80">پنل صاحب بار</div>
            <h1 id="hdrName">سلام، کاربر</h1>
            <p id="hdrSub">آماده ثبت درخواست جدید</p>
        </div>
        <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>
    </header>

    <div id="paneHome" class="pane active">
        <div class="card mb-4">
            <div class="flex items-center justify-between mb-3">
                <div class="font-extrabold">اقدام سریع</div>
                <span class="step-pill"><i class="fa-solid fa-bolt"></i> آماده ثبت</span>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <button data-go="newLoad" class="btn btn-primary"><i class="fa-solid fa-box"></i> ثبت بار جدید</button>
                <button data-go="loads" class="btn btn-soft"><i class="fa-solid fa-list-ul"></i> بارهای من</button>
            </div>
        </div>
        <div class="card mb-4">
            <div class="flex items-center justify-between mb-2">
                <div class="font-extrabold">بارهای من</div>
                <button class="text-blue-600 text-sm" data-go="loads">همه</button>
            </div>
            <div id="recentLoads" class="space-y-2"><div class="text-sm text-zinc-500 text-center py-4">در حال بارگذاری...</div></div>
        </div>
    </div>

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

    <div id="paneNewLoad" class="pane">
        <div class="card">
            <div class="font-extrabold mb-2">ثبت بار جدید</div>
            <p class="text-sm text-zinc-500">برای ثبت بار جدید با تیم پشتیبانی تماس بگیرید یا از فرم کامل ثبت بار در صفحه پنل دسکتاپی استفاده کنید.</p>
        </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-blue-500 to-blue-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="profPhone">-</div>
            <div class="mt-2"><span class="badge badge-blue">صاحب بار</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="profNc" class="font-mono">-</span></div>
                <div class="flex justify-between"><span class="text-zinc-500">آدرس</span><span id="profAddr" class="text-left">-</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="newLoad"><i class="fa-solid fa-plus-circle"></i> ثبت بار</button>
        <button data-go="loads"><i class="fa-solid fa-box-archive"></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_user_token';
let state = { user: null, phone: '', loads: [] };

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();
    state.phone = e.target.phone.value.trim();
    try {
        const res = await SabokApi('/auth/send-otp', { method: 'POST', body: { phone: state.phone, login_type: 'customer' } });
        document.getElementById('otpPhoneLabel').textContent = state.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: 'customer' } });
        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: 'customer' } });
        await handleAuthResponse(res);
    } catch (err) { 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-customer-profile', { method: 'POST', body: payload });
        state.user = res.user || state.user;
        await enterApp();
    } catch (err) { SabokToast(err.message, 'error'); }
});

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 '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;
    }
    showApp();
    document.getElementById('hdrName').textContent = 'سلام، ' + (state.user.name || 'کاربر');
    document.getElementById('profName').textContent = state.user.name || '-';
    document.getElementById('profPhone').textContent = state.user.phone || '-';
    document.getElementById('profNc').textContent = state.user.national_code || '-';
    document.getElementById('profAddr').textContent = state.user.address || '-';
    document.getElementById('profAvatar').textContent = (state.user.name || 'ک').charAt(0);
    await loadMyLoads();
}

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 tab = document.querySelector('.tabbar [data-go="' + pane + '"]'); if (tab) tab.classList.add('active');
    if (pane === 'loads') loadMyLoads();
}
document.body.addEventListener('click', e => {
    const btn = e.target.closest('[data-go]');
    if (btn) go(btn.dataset.go);
});

async function loadMyLoads() {
    const list = document.getElementById('loadsList');
    list.innerHTML = '<div class="text-center text-zinc-500 py-4">در حال بارگذاری...</div>';
    try {
        const res = await SabokApi('/customer/loads');
        state.loads = res.data?.data || [];
        if (!state.loads.length) {
            list.innerHTML = '<div class="card text-center text-zinc-500 py-8"><i class="fa-solid fa-box-open text-3xl text-zinc-300 mb-2 block"></i>هنوز باری ثبت نکرده‌اید</div>';
            document.getElementById('recentLoads').innerHTML = '<div class="text-sm text-zinc-500 text-center py-4">هنوز باری ثبت نکرده‌اید</div>';
        } else {
            list.innerHTML = state.loads.map(loadCard).join('');
            document.getElementById('recentLoads').innerHTML = state.loads.slice(0, 3).map(loadCard).join('');
        }
    } catch (err) {
        list.innerHTML = '<div class="text-center text-rose-600 py-4">خطا: ' + err.message + '</div>';
    }
}
function loadCard(l) {
    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>
    </div>`;
}

document.getElementById('reloadLoadsBtn').addEventListener('click', loadMyLoads);

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);
    state.user = null; state.phone = '';
    showAuth(); showStep('phone');
}

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 !== 'requester' && state.user.role !== 'admin') {
            localStorage.removeItem(window.SABOK_TOKEN_KEY); return;
        }
        if (!state.user.profile_completed) {
            state.phone = state.user.phone || '';
            showStep('profile'); return;
        }
        await enterApp();
    } catch (err) {
        localStorage.removeItem(window.SABOK_TOKEN_KEY);
    }
}

bootstrap();
</script>
@endsection