@php
    $steps = [
        'configuration'     => ['label' => 'Configuration',       'icon' => 'bx-cog',          'active' => true,  'done' => false],
        'business-info'     => ['label' => 'Business Information', 'icon' => 'bx-file-blank',   'active' => false, 'done' => false],
        'owner-info'        => ['label' => 'Owner Information',    'icon' => 'bx-user',         'active' => false, 'done' => false],
        'products-services' => ['label' => 'Products & Services',  'icon' => 'bx-credit-card',  'active' => false, 'done' => false],
        'fee-schedule'      => ['label' => 'Fee Schedule',         'icon' => 'bx-dollar-circle','active' => false, 'done' => false],
        'docs-signing'      => ['label' => 'Docs & Signing',       'icon' => 'bx-pen',          'active' => false, 'done' => false],
    ];
@endphp

@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="col-12">
<div class="project-box p-0">

{{-- ═══ BODY: FORM + SIDEBAR ═══ --}}
<div class="d-flex" style="background:#f8f9fa;min-height:70vh;">

    {{-- ── Main form column ── --}}
    <div class="flex-grow-1 d-flex justify-content-center px-4 py-4" style="min-width:0;">
        <div style="width:100%;max-width:560px;">

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="card shadow-sm border-0">
                <div class="card-body p-4">

                    {{-- Card header --}}
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0 fw-semibold">New Application</h5>
                        <i class="bx bx-star fs-5 text-muted" style="cursor:pointer;" title="Favourite"></i>
                    </div>

                    {{-- Section title --}}
                    <div class="mb-4 pb-2" style="border-bottom:1px solid #e9ecef;">
                        <span class="fw-semibold" style="color:#0d6efd;font-size:0.95rem;">Initial Configuration</span>
                    </div>

                    <form method="POST" action="{{ route('turbo-app.store-application') }}">
                        @csrf

                        {{-- Partner --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">
                                Partner <span class="text-danger">*</span>
                            </label>
                            <select name="tsys_group" class="form-control select2 no-search" required>
                                <option value="">— Select Partner —</option>
                                @forelse($partners as $id => $name)
                                    <option value="{{ $id }}" {{ old('tsys_group') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                        </div>

                        {{-- Association --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">
                                Association <span class="text-danger">*</span>
                            </label>
                            <select name="tsys_association" class="form-control select2 no-search" required>
                                <option value="">— Select Association —</option>
                                @forelse($associations as $id => $name)
                                    <option value="{{ $id }}" {{ old('tsys_association') == $id ? 'selected' : '' }}>
                                        {{ $name }}
                                    </option>
                                @empty
                                @endforelse
                            </select>
                        </div>

                        {{-- Lead Source --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">
                                Lead Source <span class="text-danger">*</span>
                            </label>
                            <select name="master_source_id" class="form-control select2 no-search" required>
                                <option value="">— Select Lead Source —</option>
                                @foreach($leadSources as $id => $title)
                                    <option value="{{ $id }}" {{ old('master_source_id') == $id ? 'selected' : '' }}>
                                        {{ $title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Sales Rep --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">
                                Sales Rep <span class="text-danger">*</span>
                            </label>
                            <select name="sales_rep_id" class="form-control select2 no-search" required>
                                <option value="">— Select Sales Rep —</option>
                                @foreach($salesReps as $rep)
                                    <option value="{{ $rep->id }}" {{ old('sales_rep_id') == $rep->id ? 'selected' : '' }}>
                                        {{ $rep->sales_rep_number ? "{$rep->sales_rep_number} | {$rep->first_name} {$rep->last_name}" : "{$rep->first_name} {$rep->last_name}" }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Type of Merchant Application --}}
                        <div class="mb-4">
                            <label class="form-label fw-medium">
                                Type of Merchant Application <span class="text-danger">*</span>
                            </label>
                            <select name="merchant_app_type" class="form-control select2 no-search" required>
                                <option value="">— Select Type —</option>
                                @foreach($merchantTypes as $val => $label)
                                    <option value="{{ $val }}" {{ old('merchant_app_type') == $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex justify-content-between align-items-center mt-4 pt-2"
                             style="border-top:1px solid #e9ecef;">
                            <a href="{{ route('turbo-app.index') }}"
                               class="text-danger fw-medium text-decoration-none">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary px-4">
                                Start Application
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>{{-- end main column --}}

    {{-- ── Application Steps Sidebar ── --}}
    <div id="appStepsSidebar"
         style="width:280px;flex-shrink:0;background:#fff;border-left:1px solid #e9ecef;">
        <div class="sticky-top" style="top:0;z-index:10;">

            {{-- Sidebar header --}}
            <div class="d-flex align-items-center justify-content-between px-3 py-3"
                 style="border-bottom:1px solid #e9ecef;">
                <span class="fw-semibold" style="font-size:0.95rem;">Application Steps</span>
                <button type="button" class="btn-close btn-sm" id="btnCloseSidebar"
                        aria-label="Close sidebar"></button>
            </div>

            {{-- Steps list --}}
            <ul class="list-unstyled mb-0">
                @foreach($steps as $key => $step)
                <li>
                    {{-- Configuration: active current step (highlight, no nav) --}}
                    {{-- Other steps: locked until lead is created (dim, no nav) --}}
                    <div class="d-flex align-items-center px-3 py-3"
                         style="background:{{ $step['active'] ? '#eef4ff' : 'transparent' }};
                                opacity:{{ $step['active'] ? '1' : '0.45' }};
                                cursor:{{ $step['active'] ? 'default' : 'not-allowed' }};">

                        {{-- Icon --}}
                        <i class="bx {{ $step['icon'] }} me-3 flex-shrink-0"
                           style="font-size:1.2rem;
                                  color:{{ $step['active'] ? '#0d6efd' : '#6c757d' }};"></i>

                        {{-- Label --}}
                        <span class="flex-grow-1 fw-medium"
                              style="font-size:0.88rem;
                                     color:{{ $step['active'] ? '#0d6efd' : '#6c757d' }};">
                            {{ $step['label'] }}
                        </span>

                        {{-- Status --}}
                        @if($step['active'])
                            <span class="badge bg-primary flex-shrink-0"
                                  style="font-size:0.72rem;">Current</span>
                        @else
                            <i class="bx bx-lock-alt text-muted flex-shrink-0"
                               style="font-size:1rem;" title="Complete configuration first"></i>
                        @endif

                    </div>
                </li>
                @if(!$loop->last)
                <li><hr class="my-0 mx-3" style="opacity:0.12;"></li>
                @endif
                @endforeach
            </ul>

        </div>
    </div>{{-- end sidebar --}}

</div>{{-- end body row --}}
</div>{{-- end project-box --}}
</div>{{-- end col-12 --}}

{{-- Re-open sidebar button --}}
<button type="button" id="btnOpenSidebar"
        class="btn btn-outline-primary btn-sm"
        style="display:none;position:fixed;top:50%;right:0;transform:translateY(-50%);
               z-index:1050;border-radius:4px 0 0 4px;padding:10px 6px;writing-mode:vertical-rl;">
    <i class="bx bx-list-ul"></i> Steps
</button>

@endsection

@push('page_script')
<script>
(function () {
    $('.select2.no-search').select2({ minimumResultsForSearch: Infinity });

    $('#btnCloseSidebar').on('click', function () {
        $('#appStepsSidebar').hide();
        $('#btnOpenSidebar').show();
    });
    $('#btnOpenSidebar').on('click', function () {
        $('#appStepsSidebar').show();
        $(this).hide();
    });
})();
</script>
@endpush