@extends('layouts.app')
@section('title', 'Checkout')
@section('content')
<div class="container py-5">
<h2 class="section-title">Checkout</h2>
<form action="{{ route('checkout.store') }}" method="POST" id="checkoutForm">
@csrf
<div class="row g-4">
{{-- BILLING DETAILS --}}
<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 @error('name') is-invalid @enderror"
placeholder="আপনার পূর্ণ নাম লিখুন" value="{{ old('name') }}" required>
@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
</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 @error('mobile') is-invalid @enderror"
placeholder="01XXXXXXXXX" value="{{ old('mobile') }}" required>
</div>
@error('mobile')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
</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 @error('address') is-invalid @enderror"
placeholder="বাড়ি নং, রাস্তা, এলাকা, জেলা..." required>{{ old('address') }}</textarea>
@error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
</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="কোনো বিশেষ নির্দেশনা থাকলে লিখুন...">{{ old('note') }}</textarea>
</div>
</div>
</div>
{{-- PAYMENT METHOD --}}
<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>
@error('payment_method')
<div class="alert alert-danger py-2">{{ $message }}</div>
@enderror
<div class="row g-3">
<div class="col-6 col-md-3">
<label class="payment-card {{ old('payment_method','cod') == 'cod' ? 'selected' : '' }}" id="pay-cod">
<input type="radio" name="payment_method" value="cod"
{{ 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 {{ old('payment_method') == 'bkash' ? 'selected' : '' }}" id="pay-bkash">
<input type="radio" name="payment_method" value="bkash"
{{ old('payment_method') == 'bkash' ? 'checked' : '' }}
onchange="selectPayment(this)" class="d-none">
<div class="text-center py-2">
<img src="{{ 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 {{ old('payment_method') == 'rocket' ? 'selected' : '' }}" id="pay-rocket">
<input type="radio" name="payment_method" value="rocket"
{{ old('payment_method') == 'rocket' ? 'checked' : '' }}
onchange="selectPayment(this)" class="d-none">
<div class="text-center py-2">
<img src="{{ 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 {{ old('payment_method') == 'nagad' ? 'selected' : '' }}" id="pay-nagad">
<input type="radio" name="payment_method" value="nagad"
{{ old('payment_method') == 'nagad' ? 'checked' : '' }}
onchange="selectPayment(this)" class="d-none">
<div class="text-center py-2">
<img src="{{ 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>
{{-- MFS payment fields (show when bkash/rocket/nagad selected) --}}
<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 @error('payment_phone') is-invalid @enderror"
placeholder="01XXXXXXXXX"
value="{{ old('payment_phone') }}">
</div>
@error('payment_phone')
<div class="text-danger mt-1" style="font-size:13px">{{ $message }}</div>
@enderror
</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 @error('payment_trx_id') is-invalid @enderror"
placeholder="8A3K2F..."
value="{{ old('payment_trx_id') }}">
</div>
@error('payment_trx_id')
<div class="text-danger mt-1" style="font-size:13px">{{ $message }}</div>
@enderror
</div>
</div>
</div>
</div>
</div>
{{-- SHIPPING AREA SELECTION --}}
<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>
@error('shipping_area')
<div class="alert alert-danger py-2">{{ $message }}</div>
@enderror
<div class="row g-3">
<div class="col-sm-6">
<label class="shipping-option-card {{ old('shipping_area','inside_dhaka') == 'inside_dhaka' ? 'selected' : '' }}" id="card-inside">
<input type="radio" name="shipping_area" value="inside_dhaka"
{{ 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">
{{ $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 {{ old('shipping_area') == 'outside_dhaka' ? 'selected' : '' }}" id="card-outside">
<input type="radio" name="shipping_area" value="outside_dhaka"
{{ 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">
{{ $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>
{{-- ORDER SUMMARY --}}
<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>
@foreach($cartItems as $item)
@php $price = $item->product->current_price + ($item->variation?->price_adjustment ?? 0); @endphp
<div class="d-flex align-items-center gap-3 mb-3 pb-3 border-bottom">
<img src="{{ $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">{{ $item->product->name }}</div>
@if($item->variation)
<div class="text-muted" style="font-size:12px">{{ $item->variation->label }}</div>
@endif
<div class="text-muted" style="font-size:12px">Qty: {{ $item->quantity }}</div>
</div>
<div class="fw-bold" style="color:var(--primary)">৳{{ number_format($price * $item->quantity, 0) }}</div>
</div>
@endforeach
<div class="d-flex justify-content-between mb-2 mt-3">
<span class="text-muted">Subtotal</span>
<span>৳{{ 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)">
{{ $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)">
৳{{ 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>
@endsection
@section('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>
@endsection
@section('scripts')
<script>
const subtotal = {{ $subtotal }};
const insideCharge = {{ $insideCharge }};
const outsideCharge= {{ $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: '{!! addslashes($settings["bkash_number"] ?? "") !!}', instruction: '{!! addslashes($settings["bkash_instruction"] ?? "bKash নম্বরে Send Money করুন:") !!}' },
rocket: { text: 'Rocket', name: 'Rocket', number: '{!! addslashes($settings["rocket_number"] ?? "") !!}', instruction: '{!! addslashes($settings["rocket_instruction"] ?? "Rocket নম্বরে Send Money করুন:") !!}' },
nagad: { text: 'Nagad', name: 'Nagad', number: '{!! addslashes($settings["nagad_number"] ?? "") !!}', instruction: '{!! 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);
@if(!empty($settings['facebook_pixel_id']))
{{-- Meta Pixel: InitiateCheckout (eventID matches server CAPI) --}}
fbq('track', 'InitiateCheckout', {
value: {{ $subtotal }},
currency: 'BDT',
num_items: {{ $cartItems->sum('quantity') }}
}, { eventID: '{{ $pixelEventId ?? "" }}' });
@endif
});
</script>
@endsection