编辑 checkout.blade.php - 文件管理器

✏️ 编辑：checkout.blade.php

路径：/home/boguraj1/resources/views/frontend/checkout.blade.php

大小：21.5 KB · 修改：2026-07-09 06:31:37 · 权限：0644 · 可写

@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;

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