@extends('merchant.templates.layout')

@section('head')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        .select2-container { width: 100% !important; }
        .select2-selection { min-height: 38px !important; padding: 5px 8px !important; }

        .btn-create {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 180px;
            height: 40px;
            padding: 0 20px;
            font-size: 13.5px;
            font-weight: 600;
            border-radius: 8px;
        }
        .btn-create .icon-slot {
            width: 16px; height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .btn-create .icon-slot .spin {
            position: absolute; inset: 0; margin: auto;
            animation: btn-spin .7s linear infinite;
            display: none;
        }
        .btn-create.is-loading .icon-slot i { display: none; }
        .btn-create.is-loading .icon-slot .spin { display: block; }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
    </style>
@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center py-3 border-bottom">
                    <h5 class="card-title mb-0">New Order</h5>
                    <a href="{{ route('merchant.orders.index') }}" class="btn btn-sm btn-light">
                        <i class="ri-arrow-left-line"></i> Back
                    </a>
                </div>
                <form id="createForm">
                    @csrf
                    <div class="card-body">
                        <p class="text-muted fs-13 mb-3">
                            Select the cargo company that will quote and ship this order. You'll add items next.
                        </p>
                        <label class="form-label">Cargo Company <span class="text-danger">*</span></label>
                        <select name="cargo_company_id" id="cargo_company_id" class="form-select" required>
                            <option value="">— Select Cargo Company —</option>
                            @foreach($cargoCompanies as $cc)
                                <option value="{{ $cc->id }}">{{ $cc->company_name ?: $cc->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="card-footer d-flex justify-content-end gap-2">
                        <a href="{{ route('merchant.orders.index') }}" class="btn btn-light">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-create" id="submitBtn">
                            <span class="icon-slot">
                                <i class="ri-add-line"></i>
                                <svg class="spin" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                     stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
                                    <path d="M21 12a9 9 0 1 1-6.2-8.5" />
                                </svg>
                            </span>
                            <span class="btn-label">Create Draft Order</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(function () {
            $('#cargo_company_id').select2({ placeholder: '— Select Cargo Company —' });

            $('#createForm').on('submit', function (e) {
                e.preventDefault();
                const $btn = $('#submitBtn');

                $btn.addClass('is-loading').prop('disabled', true);
                $btn.find('.btn-label').text('Creating...');

                $.ajax({
                    url: '{{ route("merchant.orders.store") }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (res) {
                        if (res.status === 'success') {
                            toastr.success(res.message);
                            window.location.href = res.redirect;
                        } else {
                            toastr.error(res.message);
                            $btn.removeClass('is-loading').prop('disabled', false);
                            $btn.find('.btn-label').text('Create Draft Order');
                        }
                    },
                    error: function (xhr) {
                        toastr.error(xhr.responseJSON?.message || 'Failed to create draft.');
                        $btn.removeClass('is-loading').prop('disabled', false);
                        $btn.find('.btn-label').text('Create Draft Order');
                    }
                });
            });
        });
    </script>
@endsection