bildirchin/views/pages/checkout.php

<?php
$pageTitle = 'تکمیل سفارش و تسویه حساب';
require __DIR__ . '/../layout/header.php';
require __DIR__ . '/../layout/navbar.php';
?>

<div class="bg-stone-100/60 py-6 border-b border-stone-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl font-extrabold text-stone-900">تکمیل اطلاعات و ثبت سفارش</h1>
        <p class="text-xs text-stone-500 mt-1">مشخصات تحویل‌گیرنده و انتخاب نحوه ارسال و پرداخت</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <form action="/order/submit" method="POST">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <!-- Customer Info & Shipping -->
            <div class="lg:col-span-8 space-y-6">
                <!-- Section 1: Receiver Details -->
                <div class="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm space-y-4">
                    <h3 class="font-extrabold text-base text-stone-900 flex items-center gap-2 border-b pb-3">
                        <i class="fas fa-user-circle text-amber-600"></i> ۱. مشخصات خریدار / تحویل‌گیرنده
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">نام و نام‌خانوادگی *</label>
                            <input type="text" name="customer_name" required class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">شماره همراه تماس * (جهت دریافت کد رهگیری)</label>
                            <input type="tel" name="customer_phone" required placeholder="۰۹۱۲۳۴۵۶۷۸۹" class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">استان *</label>
                            <input type="text" name="province" required placeholder="مثال: تهران / خراسان رضوی" class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">شهر *</label>
                            <input type="text" name="city" required placeholder="مثال: تهران / مشهد" class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-stone-700 mb-1">کد پستی</label>
                            <input type="text" name="postal_code" placeholder="۱۰ رقمی (اختیاری)" class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-stone-700 mb-1">آدرس دقیق پستی / باربری مقصد *</label>
                        <textarea name="address" rows="3" required placeholder="خیابان، کوچه، پلاک، یا آدرس ترمینال/باربری تحویل‌گیرنده..." class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-stone-700 mb-1">یادداشت و هماهنگی خاص (اختیاری)</label>
                        <input type="text" name="notes" placeholder="مثال: تحویل عصر انجام شود یا هماهنگی باربری..." class="w-full bg-stone-50 border border-stone-300 rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
                    </div>
                </div>

                <!-- Section 2: Shipping Method -->
                <div class="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm space-y-4">
                    <h3 class="font-extrabold text-base text-stone-900 flex items-center gap-2 border-b pb-3">
                        <i class="fas fa-truck-fast text-amber-600"></i> ۲. روش ارسال
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <label class="border border-stone-200 rounded-xl p-3.5 flex items-start gap-3 cursor-pointer hover:border-amber-500 has-[:checked]:border-amber-600 has-[:checked]:bg-amber-50/50 transition">
                            <input type="radio" name="shipping_method" value="باربری و ترمینال (بین‌شهری)" checked class="mt-1 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="font-bold text-xs text-stone-900 block">باربری و اتوبوس</span>
                                <span class="text-[11px] text-stone-500">مناسب دان، تخم نطفه‌دار و بلدرچین زنده (پس‌کرایه)</span>
                            </div>
                        </label>

                        <label class="border border-stone-200 rounded-xl p-3.5 flex items-start gap-3 cursor-pointer hover:border-amber-500 has-[:checked]:border-amber-600 has-[:checked]:bg-amber-50/50 transition">
                            <input type="radio" name="shipping_method" value="وانت یخچال‌دار مزرعه" class="mt-1 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="font-bold text-xs text-stone-900 block">وانت یخچال‌دار</span>
                                <span class="text-[11px] text-stone-500">ویژه گوشت کشتار روز در تهران و حومه</span>
                            </div>
                        </label>

                        <label class="border border-stone-200 rounded-xl p-3.5 flex items-start gap-3 cursor-pointer hover:border-amber-500 has-[:checked]:border-amber-600 has-[:checked]:bg-amber-50/50 transition">
                            <input type="radio" name="shipping_method" value="تحویل حضوری در مزرعه" class="mt-1 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="font-bold text-xs text-stone-900 block">تحویل حضوری درب مزرعه</span>
                                <span class="text-[11px] text-stone-500">بارگیری مستقیم توسط خریدار در مزرعه</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Section 3: Payment Method -->
                <div class="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm space-y-4">
                    <h3 class="font-extrabold text-base text-stone-900 flex items-center gap-2 border-b pb-3">
                        <i class="fas fa-credit-card text-amber-600"></i> ۳. شیوه پرداخت
                    </h3>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <label class="border border-stone-200 rounded-xl p-4 flex items-start gap-3 cursor-pointer hover:border-amber-500 has-[:checked]:border-amber-600 has-[:checked]:bg-amber-50/50 transition">
                            <input type="radio" name="payment_method" value="کارت به کارت / فیش واریزی" checked class="mt-1 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="font-bold text-xs text-stone-900 block">واریز کارت به کارت / حواله پایا</span>
                                <span class="text-[11px] text-stone-500">شماره حساب و کارت مزرعه پس از ثبت نمایش داده می‌شود.</span>
                            </div>
                        </label>

                        <label class="border border-stone-200 rounded-xl p-4 flex items-start gap-3 cursor-pointer hover:border-amber-500 has-[:checked]:border-amber-600 has-[:checked]:bg-amber-50/50 transition">
                            <input type="radio" name="payment_method" value="تسویه در محل / زمان بارگیری" class="mt-1 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="font-bold text-xs text-stone-900 block">تسویه هنگام تحویل و بارگیری</span>
                                <span class="text-[11px] text-stone-500">ویژه مشتریان ثابت، تحویل حضوری یا تهران</span>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Order Review Sidebar -->
            <div class="lg:col-span-4 space-y-4 sticky top-24">
                <div class="bg-white rounded-2xl border border-stone-200 p-6 shadow-sm space-y-5">
                    <h3 class="font-extrabold text-base text-stone-900 border-b pb-3">اقلام فاکتور</h3>

                    <div class="max-h-60 overflow-y-auto space-y-3 pr-1 text-xs">
                        <?php foreach ($cartData['items'] as $it): ?>
                            <div class="flex items-center justify-between border-b border-stone-100 pb-2">
                                <div>
                                    <span class="font-bold text-stone-800 block"><?= htmlspecialchars($it['product']['name']) ?></span>
                                    <span class="text-stone-400"><?= \Bildirchin\Helpers::toPersianDigits($it['quantity']) ?> <?= $it['product']['unit'] ?> × <?= \Bildirchin\Helpers::formatPrice($it['unit_price']) ?></span>
                                </div>
                                <span class="font-black text-stone-900"><?= \Bildirchin\Helpers::formatPrice($it['total_price']) ?></span>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="pt-3 border-t space-y-2 text-xs">
                        <div class="flex justify-between">
                            <span>مجموع قیمت:</span>
                            <span><?= \Bildirchin\Helpers::formatPrice($cartData['total_retail']) ?></span>
                        </div>
                        <?php if ($cartData['total_savings'] > 0): ?>
                            <div class="flex justify-between text-emerald-600 font-bold">
                                <span>تخفیف عمده:</span>
                                <span><?= \Bildirchin\Helpers::formatPrice($cartData['total_savings']) ?>-</span>
                            </div>
                        <?php endif; ?>
                        <div class="flex justify-between font-black text-sm text-stone-900 pt-2 border-t">
                            <span>مبلغ نهایی سفارش:</span>
                            <span class="text-amber-800 text-base"><?= \Bildirchin\Helpers::formatPrice($cartData['total_final']) ?></span>
                        </div>
                    </div>

                    <button type="submit" class="w-full py-4 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-sm transition shadow-lg flex items-center justify-center gap-2">
                        <i class="fas fa-check-double"></i>
                        <span>ثبت نهایی و دریافت کد رهگیری</span>
                    </button>
                </div>

                <!-- Trust Guarantee Box on Checkout -->
                <div class="bg-gradient-to-br from-stone-900 to-stone-950 text-white p-5 rounded-2xl border border-stone-800 space-y-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-lg">
                            <i class="fas fa-shield-halved"></i>
                        </div>
                        <div>
                            <span class="text-xs font-bold text-white block">خرید تضمین‌شده و ایمن</span>
                            <span class="text-[10px] text-stone-400">دارای نماد اعتماد و پروانه دامپزشکی</span>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-2 pt-2 border-t border-stone-800 text-[11px] text-stone-300">
                        <div class="flex items-center gap-1.5"><i class="fas fa-check text-emerald-400 text-xs"></i> اینماد رسمی</div>
                        <div class="flex items-center gap-1.5"><i class="fas fa-check text-emerald-400 text-xs"></i> سلامت بهداشتی گله</div>
                        <div class="flex items-center gap-1.5"><i class="fas fa-check text-emerald-400 text-xs"></i> فاکتور معتبر</div>
                        <div class="flex items-center gap-1.5"><i class="fas fa-check text-emerald-400 text-xs"></i> پشتیبانی باربری</div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<?php
require __DIR__ . '/../layout/footer.php';
?>