@extends('layouts.navfot')

@section('title', 'Detail Pesanan #' . $order->order_number)

@section('content')
    <div class="container py-4">

        {{-- Upload Bukti Pembayaran --}}
        @if ($order->payment_status === 'pending' || $order->payment_status === 'waiting_confirmation')
            <div class="mb-4 card">
                <div class="card-header">
                    <strong>Upload Bukti Pembayaran</strong>
                </div>
                <div class="card-body">


                    <form action="{{ route('checkout.uploadPayment', $order->order_number) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="payment_proof" class="form-label">Pilih File Bukti Pembayaran (jpg, jpeg):</label>
                            <input type="file" name="payment_proof" id="payment_proof"
                                class="form-control @error('payment_proof') is-invalid @enderror" required>
                            @error('payment_proof')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary">Upload Bukti</button>
                    </form>
                </div>
            </div>
        @endif

        {{-- Detail Pesanan --}}
        <div class="row">
            <div class="col-md-12">
                <div class="mb-4 d-flex justify-content-between align-items-center">
                    <h2 class="mb-3 fs-6">
                        <i class="fas fa-file-invoice me-2"></i>
                        Detail Pesanan #{{ $order->order_number }}
                    </h2>
                    <div>
                        <a href="{{ route('my-orders.index') }}" class="btn btn-outline-primary me-2">
                            <i class="fa-solid fa-eye me-2"></i>
                            Lihat Pesanan saya
                        </a>
                        <a href="{{ route('product') }}" class="btn btn-outline-primary me-2">
                            <i class="fas fa-shopping-bag me-2"></i>
                            Belanja Lagi
                        </a>
                                            </div>
                </div>


                <style>
                    .timeline {
                        position: relative;
                        padding-left: 20px;
                    }

                    .timeline-item {
                        position: relative;
                        padding-bottom: 20px;
                    }

                    .timeline-item:not(:last-child):before {
                        content: '';
                        position: absolute;
                        left: -12px;
                        top: 20px;
                        height: calc(100% - 10px);
                        width: 2px;
                        background: #dee2e6;
                    }

                    .timeline-marker {
                        position: absolute;
                        left: -16px;
                        top: 4px;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background: #dee2e6;
                        border: 2px solid #fff;
                    }

                    .timeline-item.active .timeline-marker {
                        background: #ffc107;
                    }

                    .timeline-item.completed .timeline-marker {
                        background: #28a745;
                    }

                    .timeline-item.active:not(:last-child):before,
                    .timeline-item.completed:not(:last-child):before {
                        background: #28a745;
                    }

                    @media print {

                        .btn,
                        .card-header,
                        .timeline {
                            display: none !important;
                        }

                        .card {
                            border: none !important;
                            box-shadow: none !important;
                        }
                    }
                </style>
            @endsection