@extends('layouts.landing-page')
@section('content')
    <div class="container flex flex-col w-full" id="invoiceContainer">

        <div class="mb-5 w-full block">
            <div class="flex justify-start">
                <a href="{{ route('payment.invoice', $order->order_no) }}" class=" ">
                    <div class="flex items-center text-white hover:text-red-500">
                        <span class="me-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8" />
                        </svg></span> Kembali

                    </div>
                </a>
            </div>
        </div>
        <div class="flex w-full justify-center">

            <div class="bg-white/5 border border-white/10 rounded-xl p-6 w-full max-w-2xl text-white relative">


                <!-- Judul -->
                <div class="text-center mb-6">
                    <h1 class="text-2xl font-bold">Konfirmasi Pembayaran</h1>
                    <p class="text-sm text-gray-300">Order <a href="{{route('payment.invoice',$order->order_no)}}" class="hover:underline hover:text-red-500">#{{ $order->order_no ?? 'MSPxxxx' }}</a></p>
                </div>

                <form action="{{ route('payment.confirm.send') }}" method="POST" enctype="multipart/form-data"
                    class="space-y-4">
                    @csrf
                    <input type="hidden" name="order_no" value="{{ $order->order_no }}">
                    <!-- Pesan -->
                    <div>
                        <label for="confirm_message" class="block mb-1 text-sm font-medium text-gray-300">Pesan</label>
                        <textarea id="confirm_message" name="confirm_message" rows="3"
                            class="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white focus:outline-none focus:ring focus:ring-red-500 placeholder-gray-400"
                            placeholder="Tulis pesan tambahan..."></textarea>
                    </div>

                    <!-- Upload Bukti Pembayaran -->
                    <div>
                        <label for="proof" class="block mb-1 text-sm font-medium text-gray-300">Upload Bukti
                            Pembayaran</label>
                        <input type="file" id="confirm_file" name="confirm_file" accept="image/*"
                            class="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-red-600 file:text-white hover:file:bg-red-700 cursor-pointer">
                    </div>

                    <!-- Tombol Submit -->
                    <div class="text-center pt-4">



                        <button type="submit"
                            class="bg-red-600 hover:bg-red-800 text-white px-6 py-2 rounded-md font-medium transition">
                            Kirim Konfirmasi
                        </button>




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


        </div>


    </div>
@endsection
@push('style')
@endpush
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');

            if (elMain) {
                elMain.classList.add('w-full');
            }

        });
    </script>
@endsection