@extends('layout.temp')

@section('content')
<div class="container py-5" style="margin-top: 80px;">
    <div class="row justify-content-center">
        <div class="col-lg-7">
            <a href="{{ route('orders.history') }}" class="btn btn-sm btn-light border rounded-pill mb-4">
                <i class="fas fa-arrow-left me-1"></i> Kembali ke Riwayat
            </a>

            {{-- Status Banner --}}
            @php
                $bannerColor = match($order->status) {
                    'menunggu'   => '#ffc107',
                    'diproses'   => '#0d6efd',
                    'dikirim'    => '#0dcaf0',
                    'selesai'    => '#198754',
                    'dibatalkan' => '#dc3545',
                    default      => '#6c757d'
                };
                $statusIcon = match($order->status) {
                    'menunggu'   => 'fa-clock',
                    'diproses'   => 'fa-cog fa-spin',
                    'dikirim'    => 'fa-truck',
                    'selesai'    => 'fa-check-circle',
                    'dibatalkan' => 'fa-times-circle',
                    default      => 'fa-circle'
                };
            @endphp
            <div class="rounded-4 p-4 mb-4 text-white text-center shadow-lg" style="background: {{ $bannerColor }};">
                <i class="fas {{ $statusIcon }} fa-2x mb-2"></i>
                <h5 class="fw-bold mb-1">{{ strtoupper($order->status) }}</h5>
                <small class="opacity-75">Order #{{ $order->id }} • {{ $order->created_at->format('d M Y, H:i') }}</small>
                
                @if($order->status === 'dibatalkan' && $order->cancel_reason)
                <div class="mt-3 p-3 rounded-3 bg-white bg-opacity-10 small">
                    <i class="fas fa-info-circle me-1"></i> Alasan: <strong>{{ $order->cancel_reason }}</strong>
                </div>
                @endif
            </div>

            @if($order->status === 'menunggu' || $order->status === 'diproses')
            {{-- Tombol Batalkan di Atas --}}
            <div class="mb-4">
                <button class="btn btn-outline-danger w-100 rounded-pill py-2 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalBatalDetail">
                    <i class="fas fa-times me-1"></i> Batalkan Pesanan Ini
                </button>
            </div>
            @endif

            {{-- Detail Pesanan --}}
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-muted text-uppercase mb-3" style="font-size:0.75rem; letter-spacing:1px;">Produk Dipesan</h6>
                    @foreach($order->items as $item)
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <img src="{{ asset('storage/'.$item->product->image) }}" width="60" height="60" class="rounded-3 border" style="object-fit:cover;">
                        <div class="flex-grow-1">
                            <div class="fw-bold">{{ $item->product->name }}</div>
                            <div class="small text-muted">{{ $item->jumlah }} x Rp {{ number_format($item->harga, 0, ',', '.') }}</div>
                        </div>
                        <div class="fw-bold">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</div>
                    </div>
                    @endforeach
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span class="fw-bold">Total Bayar</span>
                        <span class="fw-bold text-success fs-5">Rp {{ number_format($order->total_harga, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

            {{-- Alamat --}}
            @if($order->address)
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-muted text-uppercase mb-3" style="font-size:0.75rem; letter-spacing:1px;">Alamat Pengiriman</h6>
                    <div class="fw-bold">{{ $order->address->nama_penerima }}</div>
                    <div class="small text-muted">{{ $order->address->no_hp }}</div>
                    <div class="small text-muted mt-1">{{ $order->address->alamat_lengkap }}</div>
                </div>
            </div>
            @endif

            {{-- Info Pembayaran --}}
            @if($order->payment)
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-muted text-uppercase mb-3" style="font-size:0.75rem; letter-spacing:1px;">Info Pembayaran</h6>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted small">Metode</span>
                        <span class="fw-bold small">{{ strtoupper($order->payment->metode) }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted small">Status</span>
                        <span class="badge {{ $order->payment->status === 'lunas' ? 'bg-success' : 'bg-warning text-dark' }}">
                            {{ ucfirst($order->payment->status) }}
                        </span>
                    </div>
                </div>
            </div>
            @endif

        </div>
    </div>
</div>

@if($order->status === 'menunggu' || $order->status === 'diproses')
{{-- Modal Batalkan --}}
<div class="modal fade" id="modalBatalDetail" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Batalkan Pesanan #{{ $order->id }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('orders.cancel', $order->id) }}" method="POST">
                @csrf
                <div class="modal-body py-4">
                    <div class="alert alert-warning small border-0 bg-warning bg-opacity-10 mb-4">
                        <i class="fas fa-exclamation-triangle me-2"></i> 
                        Aksi ini tidak dapat dibatalkan. Dana yang sudah terbayar akan diproses pengembaliannya.
                    </div>
                    <label class="small fw-bold mb-2">Alasan Pembatalan</label>
                    <select name="cancel_reason" class="form-select border-0 bg-light rounded-3 py-2" required>
                        <option value="">Pilih Alasan...</option>
                        <option value="Ingin mengubah alamat pengiriman">Ingin mengubah alamat pengiriman</option>
                        <option value="Ingin mengubah rincian pesanan">Ingin mengubah rincian pesanan</option>
                        <option value="Menemukan harga yang lebih murah">Menemukan harga yang lebih murah</option>
                        <option value="Tidak jadi membeli">Tidak jadi membeli</option>
                        <option value="Metode pembayaran tidak tersedia">Metode pembayaran tidak tersedia</option>
                        <option value="Lainnya">Lainnya</option>
                    </select>
                </div>
                <div class="modal-footer border-0 pt-0 flex-column">
                    <button type="submit" class="btn btn-danger w-100 rounded-pill py-2 fw-bold shadow">KONFIRMASI BATALKAN</button>
                    <button type="button" class="btn btn-light w-100 rounded-pill py-2 text-muted fw-bold mt-2" data-bs-dismiss="modal">KEMBALI</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection