@extends('layouts.store')

@section('title', 'Checkout')

@section('content')
    <section class="dashboard-head">
        <div>
            <span class="eyebrow">Payment</span>
            <h1>Checkout</h1>
        </div>
    </section>

    <section class="admin-grid">
        <article class="panel">
            <h2>Order Summary</h2>
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $item)
                            <tr>
                                <td>
                                    <strong>{{ $item->product->name }}</strong>
                                    @if ($item->variant)
                                        <small>{{ $item->variant->label() }}</small>
                                    @endif
                                </td>
                                <td>{{ $item->quantity }}</td>
                                <td>{{ \App\Models\SiteSetting::formatPrice($item->unitPrice() * $item->quantity) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="cart-total">
                <span>Subtotal</span>
                <strong>{{ $subtotalDisplay }}</strong>
            </div>
            <div class="cart-total">
                <span>Shipping</span>
                <strong>{{ $shippingDisplay }}</strong>
            </div>
            <div class="cart-total">
                <span>Discount</span>
                <strong>{{ $discountDisplay }}</strong>
            </div>
            <div class="cart-total">
                <span>Total</span>
                <strong>{{ $totalDisplay }}</strong>
            </div>
        </article>

        <article class="panel">
            <h2>Payment Method</h2>

            <form method="POST" action="{{ route('customer.checkout.store') }}" class="admin-form" enctype="multipart/form-data">
                @csrf
                <label>
                    <span>Delivery address</span>
                    <select name="customer_address_id" required>
                        <option value="">Select delivery address</option>
                        @foreach ($addresses as $address)
                            <option value="{{ $address->id }}" @selected(old('customer_address_id', $addresses->firstWhere('is_default', true)?->id) == $address->id)>
                                {{ $address->label }} - {{ $address->summary() }}
                            </option>
                        @endforeach
                    </select>
                </label>
                @if ($addresses->isEmpty())
                    <p class="form-error">Add a delivery address from your account before placing an order.</p>
                @endif
                <label>
                    <span>Coupon code</span>
                    <input name="coupon_code" value="{{ old('coupon_code') }}" placeholder="Optional">
                </label>

                <label>
                    <span>Payment method</span>
                    <select name="payment_method" data-payment-method required>
                        @foreach ($paymentMethods as $value => $label)
                            <option value="{{ $value }}" @selected(old('payment_method', array_key_first($paymentMethods)) === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>

                @if (array_key_exists('ibft', $paymentMethods))
                    <div class="payment-method-panel" data-ibft-payment-panel>
                        <h3>IBFT Details</h3>
                        <dl class="account-details">
                            <div><dt>IBAN / Account No</dt><dd>{{ $ibft['iban'] ?: 'Not configured' }}</dd></div>
                            <div><dt>Account Title</dt><dd>{{ $ibft['account_title'] ?: 'Not configured' }}</dd></div>
                            <div><dt>Bank Name</dt><dd>{{ $ibft['bank_name'] ?: 'Not configured' }}</dd></div>
                        </dl>

                        <label>
                            <span>Payment screenshot</span>
                            <input name="payment_screenshot" type="file" accept="image/jpeg,image/png,image/webp" data-payment-screenshot>
                        </label>
                    </div>
                @endif

                @if (array_key_exists('cod', $paymentMethods))
                    <div class="payment-method-panel" data-cod-payment-panel>
                        <h3>Cash on Delivery</h3>
                        <p class="muted-text">Pay cash when your order is delivered. Admin approval is still required before processing.</p>
                    </div>
                @endif

                <label>
                    <span>Note</span>
                    <textarea name="customer_note" rows="3">{{ old('customer_note') }}</textarea>
                </label>
                @if ($errors->any())
                    <p class="form-error">{{ $errors->first() }}</p>
                @endif
                <button class="button primary" type="submit">Place order</button>
            </form>
        </article>
    </section>
@endsection

@push('scripts')
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            const select = document.querySelector('[data-payment-method]');
            const ibftPanel = document.querySelector('[data-ibft-payment-panel]');
            const codPanel = document.querySelector('[data-cod-payment-panel]');
            const screenshot = document.querySelector('[data-payment-screenshot]');

            const sync = () => {
                const method = select?.value;

                if (ibftPanel) {
                    ibftPanel.hidden = method !== 'ibft';
                }

                if (codPanel) {
                    codPanel.hidden = method !== 'cod';
                }

                if (screenshot) {
                    screenshot.required = method === 'ibft';
                }
            };

            select?.addEventListener('change', sync);
            sync();
        });
    </script>
@endpush