@extends('layouts.navfot')

@section('title', 'Checkout - Pembayaran')

@section('content')
    <div class="container py-4">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>
                        Checkout
                    </h2>
                    <a href="{{ route('cart.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        Kembali ke Keranjang
                    </a>
                </div>



                <form action="{{ route('checkout.process') }}" method="POST">
                    @csrf
                    <div class="row">
                        <!-- Form Checkout -->
                        <div class="col-lg-8">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-user me-2"></i>
                                        Informasi Pembeli
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="customer_name" class="form-label">Nama Lengkap *</label>
                                            <input type="text"
                                                class="form-control @error('customer_name') is-invalid @enderror"
                                                id="customer_name" name="customer_name" value="{{ old('customer_name') }}"
                                                required>
                                            @error('customer_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="customer_email" class="form-label">Email *</label>
                                            <input type="email"
                                                class="form-control @error('customer_email') is-invalid @enderror"
                                                id="customer_email" name="customer_email"
                                                value="{{ old('customer_email', Auth::user()->email) }}" required readonly
                                                style="background-color: #f0f0f0;">
                                            @error('customer_email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>


                                    </div>
                                    <div class="mb-3">
                                        <label for="customer_phone" class="form-label">Nomor Telepon *</label>
                                        <input type="tel"
                                            class="form-control @error('customer_phone') is-invalid @enderror"
                                            id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}"
                                            placeholder="08xxxxxxxxxx" required>
                                        @error('customer_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label for="customer_address" class="form-label">Alamat Lengkap *</label>
                                        <textarea class="form-control @error('customer_address') is-invalid @enderror" id="customer_address"
                                            name="customer_address" rows="3" required>{{ old('customer_address') }}</textarea>
                                        @error('customer_address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <div class="form-text">Masukkan alamat lengkap termasuk kota, kode pos</div>
                                    </div>
                                </div>
                            </div>

                            <div class="card shadow-sm mb-4">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-credit-card me-2"></i>
                                        Metode Pembayaran
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="payment_method"
                                                    id="bank_transfer" value="bank_transfer"
                                                    {{ old('payment_method') == 'bank_transfer' ? 'checked' : '' }}
                                                    required>
                                                <label class="form-check-label" for="bank_transfer">
                                                    <i class="fas fa-university me-2"></i>
                                                    Transfer Bank
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                    @error('payment_method')
                                        <div class="text-danger small">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="card shadow-sm">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-sticky-note me-2"></i>
                                        Catatan (Opsional)
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <textarea class="form-control" name="notes" rows="3" placeholder="Tambahkan catatan untuk pesanan Anda...">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Ringkasan Pesanan -->
                       <div class="col-lg-4">
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
            <h5 class="mb-0">
                <i class="fas fa-shopping-bag me-2"></i>
                Ringkasan Pesanan
            </h5>
        </div>
        <div class="card-body p-0">
            @foreach ($cartItems as $item)
                <div class="border-bottom p-3">
                    <div class="d-flex">
                        <div class="me-3">
                            @if ($item['product']->image)
                                <img src="{{ asset('storage/' . $item['product']->image) }}"
                                    alt="{{ $item['product']->name }}" class="rounded"
                                    style="width: 60px; height: 60px; object-fit: cover;">
                            @else
                                <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                    style="width: 60px; height: 60px;">
                                    <i class="fas fa-image text-muted"></i>
                                </div>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">{{ $item['product']->name }}</h6>
                            <div class="text-muted small mb-1">
                                Rp {{ number_format($item['product']->price, 0, ',', '.') }} x
                                {{ $item['qty'] }}
                            </div>
                            <div class="fw-bold text-primary">
                                Rp {{ number_format($item['subtotal'], 0, ',', '.') }}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="card-footer bg-white">
            {{-- Definisi minimum pembelian untuk gratis ongkir --}}
            @php
                $minFreeShipping = 50000;
                $shippingCost = 15000;
                $isFreeShipping = $total >= $minFreeShipping;
                $finalTotal = $isFreeShipping ? $total : $total + $shippingCost;
            @endphp
            
            <div class="d-flex justify-content-between mb-2">
                <span>Subtotal:</span>
                <span>Rp {{ number_format($total, 0, ',', '.') }}</span>
            </div>
            
            {{-- Tampilkan ongkir sesuai kondisi --}}
            <div class="d-flex justify-content-between mb-2">
                <span>Ongkos Kirim:</span>
                @if ($isFreeShipping)
                    <span class="text-success">Gratis</span>
                @else
                    <span>Rp {{ number_format($shippingCost, 0, ',', '.') }}</span>
                @endif
            </div>
            
            {{-- Opsional: Tampilkan pesan berapa lagi untuk gratis ongkir jika belum memenuhi minimum --}}
            @if (!$isFreeShipping)
                <div class="alert alert-info py-2 px-3 mb-2 small">
                    <i class="fas fa-info-circle me-1"></i>
                    Belanja Rp {{ number_format($minFreeShipping - $total, 0, ',', '.') }} lagi untuk gratis ongkir!
                </div>
            @endif
            
            <hr>
            <div class="d-flex justify-content-between">
                <span class="fw-bold">Total:</span>
                <span class="fw-bold text-primary fs-5">Rp {{ number_format($finalTotal, 0, ',', '.') }}</span>
            </div>
        </div>
    </div>
</div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-check me-2"></i>
                                    Buat Pesanan
                                </button>
                            </div>

                            <div class="card mt-3">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <i class="fas fa-shield-alt me-2"></i>
                                        Keamanan Transaksi
                                    </h6>
                                    <small class="text-muted">
                                        <ul class="list-unstyled mb-0">
                                            <li>• Data Anda aman dan terenkripsi</li>
                                                                                    </ul>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection