@extends('layouts.app')
@push('styles')
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/node-waves/node-waves.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/typeahead-js/typeahead.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/bs-stepper/bs-stepper.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/rateyo/rateyo.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/libs/formvalidation/dist/css/formValidation.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vuexy/assets/vendor/css/pages/wizard-ex-checkout.css') }}" />
@endpush
@section('content')
    <form id="wizard-checkout-form" method="POST" action=""
        enctype="multipart/form-data">
        @csrf

        <div id="wizard-checkout" class="bs-stepper wizard-icons wizard-icons-example mt-2">
            <div class="bs-stepper-header m-auto border-0 py-5">
                <!-- Step Headers -->
                <!-- Cart -->
                <div class="step active" data-target="#checkout-cart">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-icon">
                            <svg viewBox="0 0 58 54">
                                <use xlink:href="/assets/svg/icons/wizard-checkout-cart.svg#wizardCart"></use>
                            </svg>
                        </span>
                        <span class="bs-stepper-label">Cart</span>
                    </button>
                </div>
                <div class="line"><i class="ti ti-chevron-right"></i></div>

                <!-- Address -->
                <div class="step" data-target="#checkout-address">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-icon">
                            <svg viewBox="0 0 54 54">
                                <use xlink:href="/assets/svg/icons/wizard-checkout-address.svg#wizardCheckoutAddress"></use>
                            </svg>
                        </span>
                        <span class="bs-stepper-label">Address</span>
                    </button>
                </div>
                <div class="line"><i class="ti ti-chevron-right"></i></div>

                <!-- Payment -->
                <div class="step" data-target="#checkout-payment">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-icon">
                            <svg viewBox="0 0 58 54">
                                <use xlink:href="/assets/svg/icons/wizard-checkout-payment.svg#wizardPayment"></use>
                            </svg>
                        </span>
                        <span class="bs-stepper-label">Payment</span>
                    </button>
                </div>
                <div class="line"><i class="ti ti-chevron-right"></i></div>

                <!-- Confirmation -->
                <div class="step" data-target="#checkout-confirmation">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-icon">
                            <svg viewBox="0 0 58 54">
                                <use xlink:href="/assets/svg/icons/wizard-checkout-confirmation.svg#wizardConfirm"></use>
                            </svg>
                        </span>
                        <span class="bs-stepper-label">Confirmation</span>
                    </button>
                </div>
            </div>

            <div class="bs-stepper-content border-top">
                <!-- STEP 1: Cart -->
                <div id="checkout-cart" class="content active dstepper-block">
                    <h5>Pilih Paket Stok</h5>
                    <div class="mb-3">
                        <label for="tier_stock_id">Paket Tier Stock</label>
                        <select class="form-control" name="tier_stock_id" required>
                            @foreach ($tierStocks as $tier)
                                <option value="{{ $tier->id }}">
                                    {{ $tier->tier }} - Rp{{ number_format($tier->purchase_price) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="qty">Jumlah</label>
                        <input type="number" name="qty" class="form-control" required min="1">
                    </div>
                </div>

                <!-- STEP 2: Address -->
                <div id="checkout-address" class="content">
                    <h5>Alamat Distributor</h5>
                    <p>{{ $distributor->full_name }}</p>
                    <p>{{ $distributor->address }}</p>
                    <p>{{ $distributor->primary_phone }}</p>
                </div>

                <!-- STEP 3: Payment -->
                <div id="checkout-payment" class="content">
                    <h5>Pengiriman & Pembayaran</h5>

                    <div class="mb-3">
                        <label for="shipping_name">Kurir</label>
                        <input type="text" class="form-control" name="shipping_name" placeholder="Misal: JNE / J&T"
                            required>
                    </div>

                    <div class="mb-3">
                        <label for="shipping_type">Tipe Pengiriman</label>
                        <input type="text" class="form-control" name="shipping_type" placeholder="Reguler / YES / SDS"
                            required>
                    </div>

                    <div class="mb-3">
                        <label for="shipping_cost">Biaya Ongkir</label>
                        <input type="number" class="form-control" name="shipping_cost" required>
                    </div>

                    <div class="mb-3">
                        <label for="payment_method">Metode Pembayaran</label>
                        <select name="payment_method" class="form-control" required>
                            <option value="bank_transfer">Transfer Bank</option>
                            <option value="balance">Saldo</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="bank_owner_id">Pilih Rekening Tujuan</label>
                        <select class="form-control" name="bank_owner_id">
                            @foreach ($bankOwners as $bank)
                                <option value="{{ $bank->id }}">
                                    {{ $bank->bank->bank_short_name }} - {{ $bank->account_number }}
                                    ({{ $bank->account_name }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- STEP 4: Confirmation -->
                <div id="checkout-confirmation" class="content">
                    <h5>Konfirmasi</h5>
                    <p>Pastikan semua data sudah benar sebelum mengirim permintaan pembelian.</p>
                    <button type="submit" class="btn btn-primary">Kirim Pengajuan</button>
                </div>
            </div>
        </div>
    </form>
@endsection
@push('scripts')
    <script src="{{ asset('vuexy/assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/bs-stepper/bs-stepper.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/rateyo/rateyo.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/cleavejs/cleave.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vuexy/assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js') }}"></script>
    <script src="{{ asset('vuexy/assets/js/wizard-ex-checkout.js') }}"></script>
@endpush