@extends('guest.layout.main')
@section('body_main_guests')

    <section class="section py-5 bg-light">
        <div class="container">
               <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="mb-0">Checkout Order</h4>
                    <a href="/" class="btn btn-outline-success">
                        <i class="fa fa-arrow-left me-1"></i> Kembali ke Menu
                    </a>
                </div>

            {{-- Form Identitas --}}
            <form id="checkoutFormFinal" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- Step Indicators -->
            <div class="d-flex justify-content-between align-items-center mb-3 px-2" id="stepIndicators">
                <div class="step-indicator text-center flex-fill">
                    <div class="step-circle" id="step-circle-1">1</div>
                    <small class="d-block mt-1">Data</small>
                </div>
                <div class="step-indicator text-center flex-fill">
                    <div class="step-circle" id="step-circle-2">2</div>
                    <small class="d-block mt-1">Konfirmasi</small>
                </div>
                <div class="step-indicator text-center flex-fill">
                    <div class="step-circle" id="step-circle-3">3</div>
                    <small class="d-block mt-1">Pembayaran</small>
                </div>
            </div>

             <div class="progress mb-4">
                <div class="progress-bar bg-success" role="progressbar" id="stepProgressBar" style="width: 50%;">
                    Langkah 1 dari 2
                </div>
            </div>
            {{-- STEP ONE --}}
            @include('guest.checkout.step.step1')

            {{-- STEP TWO --}}
            @include('guest.checkout.step.step2')

            {{-- STEP THREE --}}
             @include('guest.checkout.step.step3')
            </form>
        </div>
        </div>
    </section>
    @include('guest.checkout.modal.noteOrder')
    @include('guest.checkout.modal.confirmPaymentBilling')
<script>
    const karhohidrats = {!! json_encode($karbohidrat) !!}
</script>
<script src="{{ ver('/js/checkout/index.js') }}"></script>
<script src="{{ ver('/js/checkout/action.js') }}"></script>

@endsection