<?php $__env->startSection('title', 'Checkout'); ?>

<?php $__env->startSection('content'); ?>
<div class="container py-5">
    <h2 class="section-title">Checkout</h2>

    <form action="<?php echo e(route('checkout.store')); ?>" method="POST" id="checkoutForm">
        <?php echo csrf_field(); ?>
        <div class="row g-4">
            
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4" style="color:var(--dark)">
                            <i class="bi bi-person-lines-fill me-2" style="color:var(--primary)"></i>Delivery Information
                        </h5>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                placeholder="আপনার পূর্ণ নাম লিখুন" value="<?php echo e(old('name')); ?>" required>
                            <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Mobile Number <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">+880</span>
                                <input type="text" name="mobile" class="form-control <?php $__errorArgs = ['mobile'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                    placeholder="01XXXXXXXXX" value="<?php echo e(old('mobile')); ?>" required>
                            </div>
                            <?php $__errorArgs = ['mobile'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback d-block"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Full Address <span class="text-danger">*</span></label>
                            <textarea name="address" rows="3" class="form-control <?php $__errorArgs = ['address'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                placeholder="বাড়ি নং, রাস্তা, এলাকা, জেলা..." required><?php echo e(old('address')); ?></textarea>
                            <?php $__errorArgs = ['address'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><div class="invalid-feedback"><?php echo e($message); ?></div><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Order Note <small class="text-muted">(Optional)</small></label>
                            <textarea name="note" rows="2" class="form-control" placeholder="কোনো বিশেষ নির্দেশনা থাকলে লিখুন..."><?php echo e(old('note')); ?></textarea>
                        </div>
                    </div>
                </div>

                
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3" style="color:var(--dark)">
                            <i class="bi bi-credit-card me-2" style="color:var(--primary)"></i>Payment Method
                        </h5>
                        <?php $__errorArgs = ['payment_method'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="alert alert-danger py-2"><?php echo e($message); ?></div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        <div class="row g-3">
                            <div class="col-6 col-md-3">
                                <label class="payment-card <?php echo e(old('payment_method','cod') == 'cod' ? 'selected' : ''); ?>" id="pay-cod">
                                    <input type="radio" name="payment_method" value="cod"
                                        <?php echo e(old('payment_method','cod') == 'cod' ? 'checked' : ''); ?>

                                        onchange="selectPayment(this)" class="d-none">
                                    <div class="text-center py-2">
                                        <i class="bi bi-cash-stack" style="font-size:28px;color:#2e7d32"></i>
                                        <div class="fw-semibold mt-1" style="font-size:13px">Cash on Delivery</div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="payment-card <?php echo e(old('payment_method') == 'bkash' ? 'selected' : ''); ?>" id="pay-bkash">
                                    <input type="radio" name="payment_method" value="bkash"
                                        <?php echo e(old('payment_method') == 'bkash' ? 'checked' : ''); ?>

                                        onchange="selectPayment(this)" class="d-none">
                                    <div class="text-center py-2">
                                        <img src="<?php echo e(asset('images/bkash.png')); ?>" style="height:32px;object-fit:contain" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                        <span style="display:none;font-size:22px">💳</span>
                                        <div class="fw-semibold mt-1" style="font-size:13px;color:#e2136e">bKash</div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="payment-card <?php echo e(old('payment_method') == 'rocket' ? 'selected' : ''); ?>" id="pay-rocket">
                                    <input type="radio" name="payment_method" value="rocket"
                                        <?php echo e(old('payment_method') == 'rocket' ? 'checked' : ''); ?>

                                        onchange="selectPayment(this)" class="d-none">
                                    <div class="text-center py-2">
                                        <img src="<?php echo e(asset('images/rocket.png')); ?>" style="height:32px;object-fit:contain" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                        <span style="display:none;font-size:22px">💳</span>
                                        <div class="fw-semibold mt-1" style="font-size:13px;color:#8b22be">Rocket</div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="payment-card <?php echo e(old('payment_method') == 'nagad' ? 'selected' : ''); ?>" id="pay-nagad">
                                    <input type="radio" name="payment_method" value="nagad"
                                        <?php echo e(old('payment_method') == 'nagad' ? 'checked' : ''); ?>

                                        onchange="selectPayment(this)" class="d-none">
                                    <div class="text-center py-2">
                                        <img src="<?php echo e(asset('images/nagad.png')); ?>" style="height:32px;object-fit:contain" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                        <span style="display:none;font-size:22px">💳</span>
                                        <div class="fw-semibold mt-1" style="font-size:13px;color:#f6821f">Nagad</div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        
                        <div id="mfs-fields" style="display:none" class="mt-3 p-3 rounded" style="background:#fff8e1">
                            <div id="mfs-instruction" class="alert alert-warning py-2 mb-3" style="font-size:13px;display:none">
                                <i class="bi bi-info-circle me-1"></i>
                                <span id="mfs-instruction-text"></span>
                                <strong id="mfs-number" style="font-size:15px;color:#e63946"></strong>
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label class="form-label fw-semibold">
                                        <span id="mfs-phone-label">bKash</span> নম্বর <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-phone"></i></span>
                                        <input type="text" name="payment_phone" id="payment_phone"
                                            class="form-control <?php $__errorArgs = ['payment_phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                            placeholder="01XXXXXXXXX"
                                            value="<?php echo e(old('payment_phone')); ?>">
                                    </div>
                                    <?php $__errorArgs = ['payment_phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <div class="text-danger mt-1" style="font-size:13px"><?php echo e($message); ?></div>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label fw-semibold">
                                        Transaction ID (TRX ID) <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="bi bi-hash"></i></span>
                                        <input type="text" name="payment_trx_id" id="payment_trx_id"
                                            class="form-control <?php $__errorArgs = ['payment_trx_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                            placeholder="8A3K2F..."
                                            value="<?php echo e(old('payment_trx_id')); ?>">
                                    </div>
                                    <?php $__errorArgs = ['payment_trx_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <div class="text-danger mt-1" style="font-size:13px"><?php echo e($message); ?></div>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3" style="color:var(--dark)">
                            <i class="bi bi-truck me-2" style="color:var(--primary)"></i>Delivery Area
                        </h5>
                        <?php $__errorArgs = ['shipping_area'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                        <div class="alert alert-danger py-2"><?php echo e($message); ?></div>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>

                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label class="shipping-option-card <?php echo e(old('shipping_area','inside_dhaka') == 'inside_dhaka' ? 'selected' : ''); ?>" id="card-inside">
                                    <input type="radio" name="shipping_area" value="inside_dhaka"
                                        <?php echo e(old('shipping_area','inside_dhaka') == 'inside_dhaka' ? 'checked' : ''); ?>

                                        onchange="updateShipping()" class="d-none">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="shipping-icon" style="background:#e8f5e9">
                                            <i class="bi bi-geo-alt-fill" style="color:#2e7d32;font-size:22px"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold" style="color:var(--dark)">ঢাকার ভেতরে</div>
                                            <div class="fw-bold" style="color:var(--primary);font-size:18px">
                                                <?php echo e($insideCharge == 0 ? 'Free' : '৳'.number_format($insideCharge, 0)); ?>

                                            </div>
                                            <div class="text-muted" style="font-size:12px">Inside Dhaka</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-sm-6">
                                <label class="shipping-option-card <?php echo e(old('shipping_area') == 'outside_dhaka' ? 'selected' : ''); ?>" id="card-outside">
                                    <input type="radio" name="shipping_area" value="outside_dhaka"
                                        <?php echo e(old('shipping_area') == 'outside_dhaka' ? 'checked' : ''); ?>

                                        onchange="updateShipping()" class="d-none">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="shipping-icon" style="background:#fce4ec">
                                            <i class="bi bi-geo-alt" style="color:#c62828;font-size:22px"></i>
                                        </div>
                                        <div>
                                            <div class="fw-bold" style="color:var(--dark)">ঢাকার বাইরে</div>
                                            <div class="fw-bold" style="color:var(--primary);font-size:18px">
                                                <?php echo e($outsideCharge == 0 ? 'Free' : '৳'.number_format($outsideCharge, 0)); ?>

                                            </div>
                                            <div class="text-muted" style="font-size:12px">Outside Dhaka</div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm sticky-top" style="top:80px">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4" style="color:var(--dark)">
                            <i class="bi bi-receipt me-2" style="color:var(--primary)"></i>Your Order
                        </h5>

                        <?php $__currentLoopData = $cartItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php $price = $item->product->current_price + ($item->variation?->price_adjustment ?? 0); ?>
                        <div class="d-flex align-items-center gap-3 mb-3 pb-3 border-bottom">
                            <img src="<?php echo e($item->product->thumbnail_url); ?>" style="width:55px;height:55px;object-fit:cover;border-radius:8px" alt="">
                            <div class="flex-grow-1">
                                <div class="fw-semibold" style="font-size:14px"><?php echo e($item->product->name); ?></div>
                                <?php if($item->variation): ?>
                                <div class="text-muted" style="font-size:12px"><?php echo e($item->variation->label); ?></div>
                                <?php endif; ?>
                                <div class="text-muted" style="font-size:12px">Qty: <?php echo e($item->quantity); ?></div>
                            </div>
                            <div class="fw-bold" style="color:var(--primary)">৳<?php echo e(number_format($price * $item->quantity, 0)); ?></div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        <div class="d-flex justify-content-between mb-2 mt-3">
                            <span class="text-muted">Subtotal</span>
                            <span>৳<?php echo e(number_format($subtotal, 0)); ?></span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Delivery Charge</span>
                            <span class="fw-semibold" id="shippingDisplay" style="color:var(--primary)">
                                <?php echo e($insideCharge == 0 ? 'Free' : '৳'.number_format($insideCharge, 0)); ?>

                            </span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between mb-4">
                            <span class="fw-bold fs-5">Total</span>
                            <span class="fw-bold fs-5" id="totalDisplay" style="color:var(--primary)">
                                ৳<?php echo e(number_format($subtotal + $insideCharge, 0)); ?>

                            </span>
                        </div>

                        <div class="alert alert-info py-2 mb-3" style="font-size:13px" id="paymentSummary">
                            <i class="bi bi-cash-coin me-1"></i> <span id="paymentSummaryText">Cash on Delivery (ক্যাশ অন ডেলিভারি)</span>
                        </div>

                        <button type="submit" class="btn btn-danger w-100 py-3 fw-bold fs-5">
                            <i class="bi bi-check-circle me-2"></i>Confirm Order
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extra-styles'); ?>
<style>
.shipping-option-card, .payment-card {
    display: block;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
    user-select: none;
    height: 100%;
}
.shipping-option-card:hover, .payment-card:hover {
    border-color: var(--primary);
    background: #fff5f5;
}
.shipping-option-card.selected, .payment-card.selected {
    border-color: var(--primary);
    background: #fff5f5;
    box-shadow: 0 0 0 3px rgba(230,57,70,.15);
}
.shipping-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
const subtotal     = <?php echo e($subtotal); ?>;
const insideCharge = <?php echo e($insideCharge); ?>;
const outsideCharge= <?php echo e($outsideCharge); ?>;

function formatCharge(charge) {
    return charge === 0 ? 'Free' : '৳' + charge.toLocaleString('en-BD');
}

function updateShipping() {
    const area   = document.querySelector('input[name="shipping_area"]:checked')?.value;
    const charge = area === 'outside_dhaka' ? outsideCharge : insideCharge;
    const total  = subtotal + charge;

    document.getElementById('shippingDisplay').textContent = formatCharge(charge);
    document.getElementById('totalDisplay').textContent    = '৳' + total.toLocaleString('en-BD');

    document.getElementById('card-inside').classList.toggle('selected',  area === 'inside_dhaka');
    document.getElementById('card-outside').classList.toggle('selected', area === 'outside_dhaka');
}

const paymentLabels = {
    cod:    { text: 'Cash on Delivery (ক্যাশ অন ডেলিভারি)', name: null, number: null },
    bkash:  { text: 'bKash', name: 'bKash', number: '<?php echo addslashes($settings["bkash_number"] ?? ""); ?>', instruction: '<?php echo addslashes($settings["bkash_instruction"] ?? "bKash নম্বরে Send Money করুন:"); ?>' },
    rocket: { text: 'Rocket', name: 'Rocket', number: '<?php echo addslashes($settings["rocket_number"] ?? ""); ?>', instruction: '<?php echo addslashes($settings["rocket_instruction"] ?? "Rocket নম্বরে Send Money করুন:"); ?>' },
    nagad:  { text: 'Nagad', name: 'Nagad', number: '<?php echo addslashes($settings["nagad_number"] ?? ""); ?>', instruction: '<?php echo addslashes($settings["nagad_instruction"] ?? "Nagad নম্বরে Send Money করুন:"); ?>' },
};

function selectPayment(radio) {
    document.querySelectorAll('.payment-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('pay-' + radio.value).classList.add('selected');

    const p = paymentLabels[radio.value];
    document.getElementById('paymentSummaryText').textContent = p.text;

    const fields = document.getElementById('mfs-fields');
    const instrBox = document.getElementById('mfs-instruction');
    if (p.name) {
        document.getElementById('mfs-phone-label').textContent = p.name;
        if (p.number) {
            document.getElementById('mfs-instruction-text').textContent = p.instruction + ' ';
            document.getElementById('mfs-number').textContent = p.number;
            instrBox.style.display = 'block';
        } else {
            instrBox.style.display = 'none';
        }
        fields.style.display = 'block';
        document.getElementById('payment_phone').setAttribute('placeholder', p.name + ' নম্বর দিন');
    } else {
        fields.style.display = 'none';
        document.getElementById('payment_phone').value = '';
        document.getElementById('payment_trx_id').value = '';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    updateShipping();
    const checked = document.querySelector('input[name="payment_method"]:checked');
    if (checked) selectPayment(checked);

    <?php if(!empty($settings['facebook_pixel_id'])): ?>
    
    fbq('track', 'InitiateCheckout', {
        value:     <?php echo e($subtotal); ?>,
        currency:  'BDT',
        num_items: <?php echo e($cartItems->sum('quantity')); ?>

    }, { eventID: '<?php echo e($pixelEventId ?? ""); ?>' });
    <?php endif; ?>
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/boguraj1/public_html/udoktaecom/resources/views/frontend/checkout.blade.php ENDPATH**/ ?>