@extends('layouts.app')

@section('page_title', 'Courier Configuration')
@section('page_subtitle', 'Manage multiple shipping integrations, API credentials, and review courier endpoints')

@section('content')
<div style="display: flex; flex-direction: column; gap: 24px;">

    <!-- Navigation Pills Bar -->
    <div style="display: flex; gap: 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 16px;">
        <button type="button" class="top-nav-tab btn" id="tab-btn-courier-config" onclick="switchTopTab('courier-config')" style="border-radius: 20px; padding: 8px 20px; font-weight: 600; font-size: 0.88rem; background: #1E293B; color: #FFF; border: none;">
            Courier Config
        </button>
        <button type="button" class="top-nav-tab btn" id="tab-btn-awb-inventory" onclick="switchTopTab('awb-inventory')" style="border-radius: 20px; padding: 8px 20px; font-weight: 600; font-size: 0.88rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);">
            AWB Inventory
        </button>
        <button type="button" class="top-nav-tab btn" id="tab-btn-warehouses" onclick="switchTopTab('warehouses')" style="border-radius: 20px; padding: 8px 20px; font-weight: 600; font-size: 0.88rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);">
            Warehouses
        </button>
    </div>

    <!-- Tab 1: Courier Config -->
    <div id="tab-content-courier-config" class="top-tab-content">
        <div style="display: grid; grid-template-columns: 300px 1fr; gap: 24px; min-height: 70vh;">
        <!-- Left Sidebar: Configured Couriers -->
        <div class="card" style="padding: 24px; display: flex; flex-direction: column; gap: 4px; height: fit-content; border: 1.5px solid var(--color-border); border-radius: 12px; background: var(--color-background-soft);">
            <div style="font-weight: 700; font-size: 1.05rem; color: var(--color-text); margin-bottom: 2px;">Configured Couriers</div>
            <div style="font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 20px;">Choose a courier to manage its API settings.</div>

            <div style="display: flex; flex-direction: column; gap: 12px;">
                @foreach($partners as $p)
                    @php
                        $slug = strtolower(str_replace(' ', '', $p['name']));
                    @endphp
                    <div id="sidebar-item-{{ $slug }}" class="sidebar-courier-item" onclick="switchPartner('{{ $slug }}')" style="display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--color-border); cursor: pointer; transition: all 0.2s; background: var(--color-background);">
                        <div id="sidebar-avatar-{{ $slug }}" style="width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; transition: all 0.2s;">
                            {{ substr($p['name'], 0, 2) }}
                        </div>
                        <div style="flex-grow: 1; min-width: 0;">
                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px;">
                                <strong style="font-size: 0.95rem; color: var(--color-text); font-weight: 600;">{{ $p['name'] }}</strong>
                                <span class="badge {{ $p['is_active'] ? 'badge-success' : 'badge-secondary' }}" style="font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; border: none;">
                                    {{ $p['is_active'] ? 'Enabled' : 'Disabled' }}
                                </span>
                            </div>
                            <div style="font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;">
                                @if($slug === 'bluedart')
                                    Account, customer code, service profile
                                @elseif($slug === 'shreemaruti')
                                    Client code, login, secret key
                                @elseif($slug === 'shipmozo')
                                    Aggregator keys, warehouse mapping, booking defaults
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Right Side: Configuration Panels -->
        <div style="display: flex; flex-direction: column;">
            @foreach($partners as $p)
                @php
                    $slug = strtolower(str_replace(' ', '', $p['name']));
                    $isActive = (bool)$p['is_active'];
                    $activeEnv = $p['active_environment'] ?? 'production';
                @endphp
                <div id="config-panel-{{ $slug }}" class="config-panel-container card" style="display: none; padding: 28px; border-radius: 12px; border: 1.5px solid var(--color-border); position: relative; background: var(--color-background-soft);">
                    <form method="POST" action="{{ route('courier-settings.update', $p['id']) }}">
                        @csrf
                        @method('PUT')

                        <!-- Header -->
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <h2 style="margin: 0; font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; gap: 10px; color: var(--color-text);">
                                {{ $p['name'] }}
                                <span class="badge {{ $isActive ? 'badge-success' : 'badge-secondary' }}" id="header-badge-{{ $slug }}" style="font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; border: none;">
                                    {{ $isActive ? 'Enabled' : 'Disabled' }}
                                </span>
                            </h2>
                            <label style="display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem; color: var(--color-text);">
                                <input type="checkbox" name="is_active" value="1" {{ $isActive ? 'checked' : '' }} onchange="toggleHeaderStatus('{{ $slug }}', this)" style="width: 16px; height: 16px; accent-color: var(--color-brand);">
                                Active
                            </label>
                        </div>
                        <p style="color: var(--color-text-muted); margin-top: 0; margin-bottom: 24px; font-size: 0.88rem;">
                            Configure your {{ $p['name'] }} account and partner integration details.
                        </p>

                        <!-- Row 1: Environment Selection -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; align-items: start; margin-bottom: 24px;">
                            <label style="display: flex; flex-direction: column; gap: 6px;">
                                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Active Environment</span>
                                <select name="active_environment" id="active_env_{{ $slug }}" onchange="setEditingEnv('{{ $slug }}', this.value)" style="padding: 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 0.9rem; background: var(--color-background); color: var(--color-text);">
                                    <option value="production" {{ $activeEnv === 'production' ? 'selected' : '' }}>Production / Live</option>
                                    <option value="test" {{ $activeEnv === 'test' ? 'selected' : '' }}>Test / Sandbox</option>
                                </select>
                            </label>

                            <div style="display: flex; flex-direction: column; gap: 6px;">
                                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Editing Environment</span>
                                <div style="display: flex; background: var(--color-background); padding: 4px; border-radius: 8px; gap: 4px; border: 1.5px solid var(--color-border); height: 44px; align-items: center;">
                                    <button type="button" class="btn btn-env-toggle-{{ $slug }}" id="btn-prod-{{ $slug }}" onclick="setEditingEnv('{{ $slug }}', 'production')" style="flex: 1; padding: 6px; font-size: 0.82rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 100%;">
                                        Production
                                    </button>
                                    <button type="button" class="btn btn-env-toggle-{{ $slug }}" id="btn-test-{{ $slug }}" onclick="setEditingEnv('{{ $slug }}', 'test')" style="flex: 1; padding: 6px; font-size: 0.82rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 100%;">
                                        Test
                                    </button>
                                </div>
                            </div>

                            <div style="background: rgba(59, 130, 246, 0.04); border: 1.5px dashed var(--color-border); border-radius: 10px; padding: 12px; font-size: 0.78rem; line-height: 1.45; color: var(--color-text-muted);">
                                <strong style="color: var(--color-text); font-weight: 600;">Separate environment storage</strong><br>
                                Edit test and production independently, then choose which one Gift Desk should use live.
                            </div>
                        </div>

                        <!-- Row 2: Status Info -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px;">
                            <label style="display: flex; flex-direction: column; gap: 6px;">
                                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Account Mode</span>
                                <input type="text" id="mode_input_{{ $slug }}" readonly value="production" style="padding: 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 0.9rem; background: rgba(0,0,0,0.02); color: var(--color-text-muted); cursor: not-allowed; text-transform: capitalize;">
                            </label>
                            <label style="display: flex; flex-direction: column; gap: 6px;">
                                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Account Code</span>
                                <input type="text" id="code_input_{{ $slug }}" readonly value="" style="padding: 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 0.9rem; background: rgba(0,0,0,0.02); color: var(--color-text-muted); cursor: not-allowed;">
                            </label>
                            <label style="display: flex; flex-direction: column; gap: 6px;">
                                <span style="font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);">Environment Status</span>
                                <input type="text" id="status_input_{{ $slug }}" readonly value="Production / Live configured" style="padding: 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 0.9rem; background: rgba(0,0,0,0.02); color: var(--color-text-muted); cursor: not-allowed;">
                            </label>
                        </div>

                        <!-- CONTAINER FOR PRODUCTION FIELDS -->
                        <div class="env-fields-{{ $slug }}" id="fields-production-{{ $slug }}">
                            @include('courier-settings.partials.env_fields', ['partner' => $p, 'env' => 'production', 'slug' => $slug, 'warehouses' => $warehouses])
                        </div>

                        <!-- CONTAINER FOR TEST FIELDS -->
                        <div class="env-fields-{{ $slug }}" id="fields-test-{{ $slug }}" style="display: none;">
                            @include('courier-settings.partials.env_fields', ['partner' => $p, 'env' => 'test', 'slug' => $slug, 'warehouses' => $warehouses])
                        </div>

                        <!-- Submit & Actions Footer -->
                        <div style="margin-top: 32px; border-top: 1px solid var(--color-border); padding-top: 20px; display: flex; justify-content: space-between; align-items: center;">
                            <div style="display: flex; gap: 10px;">
                                <button type="button" class="btn" id="test-conn-btn-{{ $slug }}" style="background: rgba(255,255,255,0.03); border: 1.5px solid var(--color-border);" onclick="testEnvConnection('{{ $slug }}')">
                                    Test Connection
                                </button>
                                <button type="button" class="btn" style="background: rgba(255,255,255,0.03); border: 1.5px solid var(--color-border);" onclick="openApiListModalBySlug('{{ $slug }}')">
                                    API List
                                </button>
                            </div>
                            <button type="submit" class="btn btn-primary" style="padding: 10px 24px; font-weight: 600;">
                                Save Settings
                            </button>
                        </div>
                    </form>
                </div>
            @endforeach
        </div>
    </div>
    </div>
    <!-- End Tab 1: Courier Config -->

    <!-- Tab 3: AWB Inventory -->
    <div id="tab-content-awb-inventory" class="top-tab-content" style="display: none;">
        <div class="card" style="padding: 32px; border-radius: 16px; border: 1.5px solid var(--color-border); background: var(--color-surface);">
            
            <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: 20px;">
                <div>
                    <h2 style="font-size: 1.35rem; font-weight: 700; color: var(--color-text); margin: 0 0 6px 0;">Maruti AWB Management</h2>
                    <div style="font-size: 0.88rem; color: var(--color-text-muted); max-width: 720px; line-height: 1.5;">
                        Upload AWB numbers outside the courier config form. Gift Desk will consume the next available AWB while creating a Maruti shipment. Uploading a new sheet replaces all existing Maruti AWBs.
                    </div>
                </div>

                <!-- Stats Badges -->
                <div style="display: flex; gap: 8px; flex-shrink: 0; align-items: center;">
                    <span style="background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--color-border);">
                        Total {{ $marutiAwbStats['total'] ?? 0 }}
                    </span>
                    <span style="background: rgba(16, 185, 129, 0.12); color: #10B981; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px;">
                        Available {{ $marutiAwbStats['available'] ?? 0 }}
                    </span>
                    <span style="background: rgba(245, 158, 11, 0.12); color: #D97706; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px;">
                        Used {{ $marutiAwbStats['used'] ?? 0 }}
                    </span>
                </div>
            </div>

            <!-- Upload Form -->
            <form method="POST" action="{{ route('courier-settings.maruti-awb.upload') }}" enctype="multipart/form-data" style="display: flex; flex-direction: column; gap: 20px;">
                @csrf
                <div style="display: flex; flex-direction: column; gap: 8px; max-width: 580px;">
                    <label style="font-size: 0.85rem; font-weight: 600; color: var(--color-text);">Upload AWB CSV</label>
                    <input type="file" name="csv_file" accept=".csv, .txt" required style="padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: 10px; font-size: 0.88rem; background: var(--color-background); color: var(--color-text);">
                    <div style="font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px;">
                        Use a CSV with an <strong>AWB</strong> column, a <strong>Tracking</strong> column, or put AWB numbers in the first column.
                    </div>
                </div>

                <div style="display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap;">
                    <button type="submit" class="btn btn-primary" style="padding: 12px 28px; font-weight: 600; border-radius: 10px;">
                        Upload AWB CSV
                    </button>
                    <a href="{{ route('courier-settings.maruti-awb.sample') }}" class="btn" style="border: 1.5px solid var(--color-border); padding: 12px 20px; font-weight: 600; border-radius: 10px; text-decoration: none; color: var(--color-text); background: var(--color-surface);">
                        Download Sample Sheet
                    </a>
                    <a href="{{ route('courier-settings.maruti-awb.export') }}" class="btn" style="border: 1.5px solid var(--color-border); padding: 12px 20px; font-weight: 600; border-radius: 10px; text-decoration: none; color: var(--color-text); background: var(--color-surface);">
                        Download Uploaded AWBs
                    </a>
                </div>
            </form>

        </div>
    </div>

    <!-- Tab 4: Warehouses -->
    <div id="tab-content-warehouses" class="top-tab-content" style="display: none;">
        <div class="card" style="padding: 32px; border-radius: 16px; border: 1.5px solid var(--color-border); background: var(--color-surface);">
            
            <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: 20px;">
                <div>
                    <h2 style="font-size: 1.35rem; font-weight: 700; color: var(--color-text); margin: 0 0 6px 0;">Warehouse Locations</h2>
                    <div style="font-size: 0.88rem; color: var(--color-text-muted); max-width: 720px; line-height: 1.5;">
                        Create and manage your pickup warehouses and generated warehouse IDs for courier integrations.
                    </div>
                </div>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <form action="{{ route('warehouses.import-api') }}" method="POST" style="margin: 0; display: inline-block;">
                        @csrf
                        <button type="submit" class="btn" style="padding: 10px 20px; font-weight: 600; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--color-border); color: var(--color-text); background: var(--color-surface); cursor: pointer; transition: all 0.2s;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
                            Get Warehouse
                        </button>
                    </form>
                    <button type="button" class="btn btn-primary" onclick="openAddWarehouseModal()" style="padding: 10px 20px; font-weight: 600; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px;">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        Add Warehouse
                    </button>
                </div>
            </div>

            @if(isset($warehouses) && count($warehouses) > 0)
                <div style="display: flex; flex-direction: column; gap: 16px;">
                    @foreach($warehouses as $wh)
                        <div style="padding: 20px; border-radius: 12px; border: 1.5px solid var(--color-border); background: var(--color-background); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;">
                            <div style="display: flex; flex-direction: column; gap: 6px; flex-grow: 1;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <strong style="font-size: 1.05rem; color: var(--color-text); font-weight: 700;">{{ $wh->address_title }}</strong>
                                    <span style="font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 700; background: var(--color-brand-soft); color: var(--color-brand-strong); padding: 3px 10px; border-radius: 6px;">
                                        {{ $wh->warehouse_id }}
                                    </span>
                                    @if($wh->is_default)
                                        <span style="font-size: 0.72rem; font-weight: 700; background: #e0f2fe; color: #0369a1; padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;">
                                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                            Default
                                        </span>
                                    @endif
                                </div>
                                <div style="font-size: 0.85rem; color: var(--color-text-muted); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px;">
                                    <span><strong>Manager:</strong> {{ $wh->name }}</span>
                                    <span><strong>Phone:</strong> {{ $wh->phone }}{{ $wh->alternate_phone ? ' / ' . $wh->alternate_phone : '' }}</span>
                                    <span><strong>Email:</strong> {{ $wh->email }}</span>
                                </div>
                                <div style="font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.4;">
                                    {{ $wh->address_line_one }}{{ $wh->address_line_two ? ', ' . $wh->address_line_two : '' }} - {{ $wh->pin_code }}
                                </div>
                            </div>

                            <div style="display: flex; align-items: center; gap: 10px;">
                                @if($wh->is_default)
                                    <button type="button" class="btn" disabled style="padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border: 1.5px solid #86efac; border-radius: 8px; background: #f0fdf4; color: #166534; cursor: default; display: inline-flex; align-items: center; gap: 5px;">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                        Default
                                    </button>
                                @else
                                    <form action="{{ route('warehouses.set-default', $wh->warehouse_id) }}" method="POST" style="margin: 0; display: inline-block;">
                                        @csrf
                                        <button type="submit" class="btn" style="padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border: 1.5px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; transition: all 0.2s;">
                                            Set Default
                                        </button>
                                    </form>
                                @endif
                                <button type="button" class="btn" onclick="openEditWarehouseModal({{ json_encode($wh) }})" style="padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border: 1.5px solid var(--color-border); border-radius: 8px; background: var(--color-surface);">
                                    Edit
                                </button>
                                <button type="button" class="btn btn-danger" onclick="deleteWarehouse('{{ $wh->warehouse_id }}', '{{ addslashes($wh->name) }}')" style="padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border-radius: 8px;">
                                    Delete
                                </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div style="text-align: center; padding: 48px 20px; color: var(--color-text-muted);">
                    <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; color: var(--color-text);">No Warehouses Configured</div>
                    <div style="font-size: 0.88rem; margin-bottom: 20px;">Click the button below to add your first pickup warehouse.</div>
                    <button type="button" class="btn btn-primary" onclick="openAddWarehouseModal()" style="padding: 10px 20px; font-weight: 600; border-radius: 10px;">
                        + Add Warehouse
                    </button>
                </div>
            @endif

        </div>
    </div>
</div>

{{-- ── COURIER APIS LIST MODAL ────────────────── --}}
<div id="apis-list-modal" class="modal-backdrop" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 210; align-items: center; justify-content: center;">
    <div class="card card-pad" style="width: 90%; max-width: 900px; height: 85vh; display: flex; flex-direction: column; position: relative; padding: 24px;">
        <button type="button" onclick="closeApiListModal()" style="position: absolute; right: 20px; top: 20px; background: none; border: none; cursor: pointer; color: var(--color-text-muted); z-index: 10;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 16px;">
            <h3 style="margin: 0; font-weight: 600; font-size: 1.25rem; display: flex; align-items: center; gap: 8px;">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                API List: <span id="apis_partner_name"></span>
            </h3>
            <button type="button" class="btn btn-primary" style="padding: 6px 12px; font-size: 0.8rem;" onclick="toggleAddApiForm()">
                + Add Custom API
            </button>
        </div>

        {{-- Add Custom API Section --}}
        <div id="add-api-section" style="display: none; background: var(--color-background-soft); border: 1.5px solid var(--color-border); padding: 16px; border-radius: 8px; margin-bottom: 16px;">
            <form id="add-api-form" method="POST" action="">
                @csrf
                <div style="display: grid; grid-template-columns: 1fr 100px 1.5fr; gap: 12px; margin-bottom: 12px;">
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 0.75rem; font-weight: 600;">API Name</span>
                        <input type="text" name="name" required placeholder="e.g. Generate Label" style="padding: 8px; border: 1.5px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: var(--color-background); color: var(--color-text);">
                    </label>
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 0.75rem; font-weight: 600;">HTTP Method</span>
                        <select name="method" style="padding: 8px; border: 1.5px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: var(--color-background); color: var(--color-text);">
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                            <option value="PATCH">PATCH</option>
                        </select>
                    </label>
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 0.75rem; font-weight: 600;">Endpoint Path</span>
                        <input type="text" name="endpoint" required placeholder="e.g. /v2/shipment/label" style="padding: 8px; border: 1.5px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: var(--color-background); color: var(--color-text);">
                    </label>
                </div>
                <div style="display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;">
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 0.75rem; font-weight: 600;">Description</span>
                        <input type="text" name="description" placeholder="Briefly describe what this endpoint does..." style="padding: 8px; border: 1.5px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: var(--color-background); color: var(--color-text);">
                    </label>
                </div>
                <div style="display: flex; justify-content: flex-end; gap: 8px;">
                    <button type="button" class="btn" style="padding: 6px 12px; font-size: 0.8rem;" onclick="toggleAddApiForm()">Cancel</button>
                    <button type="submit" class="btn btn-primary" style="padding: 6px 12px; font-size: 0.8rem;">Save Endpoint</button>
                </div>
            </form>
        </div>

        {{-- APIs List Container --}}
        <div id="apis_list_container" style="flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px;">
            {{-- Rendered dynamically in Javascript --}}
        </div>

        <div style="margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 12px; display: flex; justify-content: flex-end;">
            <button type="button" class="btn" onclick="closeApiListModal()">Close</button>
        </div>
    </div>
</div>

{{-- Hidden Form for Deleting APIs --}}
<form id="delete-api-form" method="POST" action="" style="display: none;">
    @csrf
    @method('DELETE')
</form>

{{-- ── WAREHOUSE MANAGEMENT MODALS ────────────────── --}}
{{-- Add Warehouse Modal --}}
<div id="add-warehouse-modal" style="
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 99999; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 200ms ease;
">
    <div class="confirm-card" style="
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
        width: 100%; max-width: 580px; padding: 28px;
        transform: scale(0.95); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    ">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
            <h2 style="font-size:1.3rem; font-weight:700; color:var(--color-text); margin:0;">Add Warehouse</h2>
            <button type="button" onclick="closeAddWarehouseModal()" style="background:none; border:none; color:var(--color-muted); cursor:pointer; padding:4px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        
        <form method="POST" action="{{ route('warehouses.store') }}" style="display: flex; flex-direction: column; gap: 16px;">
            @csrf
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Title (Warehouse Name) *</span>
                    <input type="text" name="address_title" maxlength="100" placeholder="e.g. Pune Central Hub" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Manager Name *</span>
                    <input type="text" name="name" maxlength="100" placeholder="e.g. Rahul Sharma" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Email *</span>
                    <input type="email" name="email" maxlength="100" placeholder="e.g. manager@domain.com" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Pincode *</span>
                    <input type="text" name="pin_code" maxlength="20" placeholder="e.g. 411001" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Phone *</span>
                    <input type="text" name="phone" maxlength="20" placeholder="e.g. 9876543210" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Alternate Phone (Optional)</span>
                    <input type="text" name="alternate_phone" maxlength="20" placeholder="e.g. 9876543211" style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <label style="display:flex; flex-direction:column; gap:4px;">
                <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Line 1 *</span>
                <input type="text" name="address_line_one" maxlength="255" placeholder="e.g. Plot 42, Industrial Area" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
            </label>
            
            <label style="display:flex; flex-direction:column; gap:4px;">
                <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Line 2 (Optional)</span>
                <input type="text" name="address_line_two" maxlength="255" placeholder="e.g. Near Metro Depot" style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
            </label>
            
            <div style="display:flex; gap:12px; justify-content:flex-end; margin-top:8px;">
                <button type="button" class="btn" onclick="closeAddWarehouseModal()">Cancel</button>
                <button class="btn btn-primary" type="submit">Save Warehouse</button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Warehouse Modal --}}
<div id="edit-warehouse-modal" style="
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 99999; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 200ms ease;
">
    <div class="confirm-card" style="
        background: var(--color-surface); border: 1px solid var(--color-border);
        border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
        width: 100%; max-width: 580px; padding: 28px;
        transform: scale(0.95); transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    ">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;">
            <h2 style="font-size:1.3rem; font-weight:700; color:var(--color-text); margin:0;">Edit Warehouse</h2>
            <button type="button" onclick="closeEditWarehouseModal()" style="background:none; border:none; color:var(--color-muted); cursor:pointer; padding:4px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        
        <form id="edit-warehouse-form" method="POST" action="" style="display: flex; flex-direction: column; gap: 16px;">
            @csrf
            @method('PUT')
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Title (Warehouse Name) *</span>
                    <input type="text" name="address_title" id="edit_wh_address_title" maxlength="100" placeholder="e.g. Pune Central Hub" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Manager Name *</span>
                    <input type="text" name="name" id="edit_wh_name" maxlength="100" placeholder="e.g. Rahul Sharma" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Email *</span>
                    <input type="email" name="email" id="edit_wh_email" maxlength="100" placeholder="e.g. manager@domain.com" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Pincode *</span>
                    <input type="text" name="pin_code" id="edit_wh_pin_code" maxlength="20" placeholder="e.g. 411001" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Phone *</span>
                    <input type="text" name="phone" id="edit_wh_phone" maxlength="20" placeholder="e.g. 9876543210" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
                <label style="display:flex; flex-direction:column; gap:4px;">
                    <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Alternate Phone (Optional)</span>
                    <input type="text" name="alternate_phone" id="edit_wh_alternate_phone" maxlength="20" placeholder="e.g. 9876543211" style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
                </label>
            </div>
            
            <label style="display:flex; flex-direction:column; gap:4px;">
                <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Line 1 *</span>
                <input type="text" name="address_line_one" id="edit_wh_address_line_one" maxlength="255" placeholder="e.g. Plot 42, Industrial Area" required style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
            </label>
            
            <label style="display:flex; flex-direction:column; gap:4px;">
                <span style="font-weight:600; font-size:0.82rem; color:var(--color-text-muted);">Address Line 2 (Optional)</span>
                <input type="text" name="address_line_two" id="edit_wh_address_line_two" maxlength="255" placeholder="e.g. Near Metro Depot" style="padding:10px; border:1.5px solid var(--color-border); border-radius:8px; font-size:0.9rem; background:var(--color-background); color:var(--color-text);">
            </label>
            </div>
            
            <div style="display:flex; gap:12px; justify-content:flex-end; margin-top:8px;">
                <button type="button" class="btn" onclick="closeEditWarehouseModal()">Cancel</button>
                <button class="btn btn-primary" type="submit">Update Warehouse</button>
            </div>
        </form>
    </div>
</div>

{{-- Hidden Warehouse Delete Form --}}
<form id="delete-warehouse-form" method="POST" action="" style="display:none;">
    @csrf
    @method('DELETE')
</form>

{{-- Warehouse Created Success Modal --}}
@if (session('status') === 'warehouse-created')
    <div id="warehouse-success-modal" style="
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(5px);
        z-index: 99999; display: flex; align-items: center; justify-content: center;
    ">
        <div class="confirm-card" style="
            background: var(--color-surface); border: 1px solid var(--color-border);
            border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
            width: 100%; max-width: 480px; padding: 28px; text-align: center;
        ">
            <div style="
                display: inline-flex; align-items: center; justify-content: center;
                width: 56px; height: 56px; border-radius: 50%;
                background: var(--color-brand-soft); color: var(--color-brand-strong);
                margin-bottom: 18px;
            ">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <h3 style="font-size:1.2rem; font-weight:700; margin-bottom:8px; color:var(--color-text); margin-top:0;">Warehouse Created!</h3>
            <p style="font-size:0.9rem; color:var(--color-text-muted); line-height:1.5; margin-bottom:20px;">
                Your new pickup warehouse has been registered.
            </p>
            <div style="background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:10px; padding:12px; margin-bottom:24px;">
                <div style="font-size:0.75rem; color:var(--color-text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.05em; margin-bottom:4px;">Generated Warehouse ID</div>
                <code style="font-family:'IBM Plex Mono',monospace; font-size:1.15rem; font-weight:700; color:var(--color-brand-strong);">{{ session('created_warehouse_id') }}</code>
            </div>
            <button type="button" class="btn btn-primary" style="width:100%; padding:10px;" onclick="document.getElementById('warehouse-success-modal').style.display='none'">Awesome</button>
        </div>
    </div>
@endif

@endsection

@push('scripts')
<script>
    const allPartners = @json($partners);
    let selectedPartnerSlug = 'bluedart'; // default on load
    let editingEnvironments = {}; // keeps track of selected editing env per partner slug

    // Initialize editing environments and sync initial text inputs
    allPartners.forEach(p => {
        const slug = strtolowerName(p.name);
        editingEnvironments[slug] = p.active_environment || 'production';
    });

    document.addEventListener("DOMContentLoaded", () => {
        // Find default or first active partner slug to show on load
        const activePartner = allPartners.find(p => p.is_active);
        if (activePartner) {
            selectedPartnerSlug = strtolowerName(activePartner.name);
        }
        switchPartner(selectedPartnerSlug);

        // Check session or URL parameter for active top tab
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab') || "{{ session('tab') }}";
        if (tabParam && ['courier-config', 'awb-inventory', 'warehouses'].includes(tabParam)) {
            switchTopTab(tabParam);
        }
    });

    function switchTopTab(tabName) {
        document.querySelectorAll('.top-tab-content').forEach(el => el.style.display = 'none');
        document.querySelectorAll('.top-nav-tab').forEach(btn => {
            btn.style.background = 'var(--color-surface)';
            btn.style.color = 'var(--color-text)';
            btn.style.border = '1px solid var(--color-border)';
        });

        const activeContent = document.getElementById('tab-content-' + tabName);
        const activeBtn = document.getElementById('tab-btn-' + tabName);

        if (activeContent) activeContent.style.display = 'block';
        if (activeBtn) {
            activeBtn.style.background = '#1E293B';
            activeBtn.style.color = '#FFFFFF';
            activeBtn.style.border = 'none';
        }
    }

    function strtolowerName(name) {
        return name.toLowerCase().replace(/\s+/g, '');
    }

    function switchPartner(slug) {
        selectedPartnerSlug = slug;

        // Update sidebar visual active states
        document.querySelectorAll('.sidebar-courier-item').forEach(el => {
            el.style.border = '1.5px solid var(--color-border)';
            el.style.background = 'var(--color-background)';
        });
        document.querySelectorAll('[id^="sidebar-avatar-"]').forEach(el => {
            el.style.background = 'var(--color-border)';
            el.style.color = 'var(--color-text-muted)';
        });

        const activeItem = document.getElementById('sidebar-item-' + slug);
        if (activeItem) {
            activeItem.style.border = '1.5px solid var(--color-brand-strong)';
            activeItem.style.background = 'rgba(59, 130, 246, 0.05)';
        }
        const activeAvatar = document.getElementById('sidebar-avatar-' + slug);
        if (activeAvatar) {
            activeAvatar.style.background = 'var(--color-brand-soft)';
            activeAvatar.style.color = 'var(--color-brand-strong)';
        }

        // Hide all panels, show active
        document.querySelectorAll('.config-panel-container').forEach(el => {
            el.style.display = 'none';
        });
        const activePanel = document.getElementById('config-panel-' + slug);
        if (activePanel) {
            activePanel.style.display = 'block';
        }

        // Apply editing env values and toggles
        setEditingEnv(slug, editingEnvironments[slug] || 'production');
    }

    function setEditingEnv(slug, env) {
        editingEnvironments[slug] = env;

        // Sync dropdown selection
        const select = document.getElementById('active_env_' + slug);
        if (select) {
            select.value = env;
        }

        // Toggle buttons active state class
        const btnProd = document.getElementById('btn-prod-' + slug);
        const btnTest = document.getElementById('btn-test-' + slug);

        if (env === 'production') {
            btnProd.style.background = 'var(--color-brand-strong)';
            btnProd.style.color = '#ffffff';
            btnTest.style.background = 'transparent';
            btnTest.style.color = 'var(--color-text-muted)';
        } else {
            btnTest.style.background = 'var(--color-brand-strong)';
            btnTest.style.color = '#ffffff';
            btnProd.style.background = 'transparent';
            btnProd.style.color = 'var(--color-text-muted)';
        }

        // Toggle field divs visibility
        document.getElementById('fields-production-' + slug).style.display = (env === 'production') ? 'block' : 'none';
        document.getElementById('fields-test-' + slug).style.display = (env === 'test') ? 'block' : 'none';

        // Update Mode inputs
        document.getElementById('mode_input_' + slug).value = env;

        // Update Status & Code inputs based on values in the environment container
        updateDynamicInputs(slug, env);
    }

    function updateDynamicInputs(slug, env) {
        // Resolve code
        let codeVal = '';
        let baseUrl = '';

        const inputs = document.querySelectorAll(`#fields-${env}-${slug} input`);
        inputs.forEach(input => {
            if (input.name.includes('[client_code]')) {
                codeVal = input.value;
            }
            if (input.name.includes('[api_base_url]')) {
                baseUrl = input.value;
            }
        });

        // Set Account Code value
        document.getElementById('code_input_' + slug).value = codeVal || '—';

        // Set Environment Status value
        const statusInput = document.getElementById('status_input_' + slug);
        const envLabel = (env === 'production') ? 'Production / Live' : 'Test / Sandbox';
        if (baseUrl) {
            statusInput.value = `${envLabel} configured`;
        } else {
            statusInput.value = `${envLabel} not configured`;
        }
    }

    function updateActiveEnvText(slug) {
        const curEditing = editingEnvironments[slug] || 'production';
        updateDynamicInputs(slug, curEditing);
    }

    function toggleHeaderStatus(slug, checkbox) {
        const badge = document.getElementById('header-badge-' + slug);
        if (checkbox.checked) {
            badge.innerText = 'Enabled';
            badge.className = 'badge badge-success';
        } else {
            badge.innerText = 'Disabled';
            badge.className = 'badge badge-secondary';
        }
    }

    // APIs List Modal Functions
    let currentSelectedPartner = null;
    function openApiListModalBySlug(slug) {
        const partner = allPartners.find(p => strtolowerName(p.name) === slug);
        if (partner) {
            openApiListModal(partner);
        }
    }
    function openApiListModal(partner) {
        currentSelectedPartner = partner;
        document.getElementById('apis_partner_name').innerText = partner.name;
        
        // Setup Form Action
        const form = document.getElementById('add-api-form');
        form.action = "{{ url('/courier-settings') }}/" + partner.id + "/api";

        // Render List
        const container = document.getElementById('apis_list_container');
        container.innerHTML = '';
        
        const apis = partner.apis || [];
        apis.forEach(api => {
            const card = document.createElement('div');
            card.style.border = '1.5px solid var(--color-border)';
            card.style.borderRadius = '8px';
            card.style.padding = '14px 16px';
            card.style.background = 'var(--color-background)';
            card.style.display = 'flex';
            card.style.justifyContent = 'space-between';
            card.style.alignItems = 'flex-start';
            card.style.gap = '16px';

            const methodColor = api.method === 'GET' ? 'var(--color-brand-soft)' : 'rgba(30,64,175,0.1)';
            const methodTextColor = api.method === 'GET' ? 'var(--color-brand-strong)' : 'rgb(30,64,175)';

            card.innerHTML = `
                <div style="flex-grow: 1; min-width: 0;">
                    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;">
                        <span style="background: ${methodColor}; color: ${methodTextColor}; font-weight: 700; padding: 2px 6px; border-radius: 4px; font-size: 0.72rem; text-transform: uppercase; flex-shrink: 0;">
                            ${api.method}
                        </span>
                        <strong style="font-size: 0.95rem;">${api.name}</strong>
                    </div>
                    <div style="background: var(--color-background-soft); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--color-border); margin-bottom: 6px; display: inline-block; max-width: 100%;">
                        <code style="font-family: monospace; font-size: 0.8rem; color: var(--color-brand-strong); word-break: break-all;">
                            ${api.endpoint}
                        </code>
                    </div>
                    <p style="margin: 0; font-size: 0.85rem; color: var(--color-text-muted);">${api.description || 'No description provided.'}</p>
                </div>
                <button type="button" class="btn btn-danger" style="padding: 4px 8px; font-size: 0.75rem; flex-shrink: 0;" onclick="deleteApi('${partner.id}', '${api.id}')">
                    Delete
                </button>
            `;
            container.appendChild(card);
        });

        // Hide form by default
        document.getElementById('add-api-section').style.display = 'none';

        document.getElementById('apis-list-modal').style.display = 'flex';
    }

    function closeApiListModal() {
        document.getElementById('apis-list-modal').style.display = 'none';
        currentSelectedPartner = null;
    }

    function toggleAddApiForm() {
        const sect = document.getElementById('add-api-section');
        sect.style.display = sect.style.display === 'none' ? 'block' : 'none';
    }

    function deleteApi(partnerId, apiId) {
        window.customConfirm({
            title: 'Delete Endpoint',
            message: 'Are you sure you want to delete this custom API endpoint? This action cannot be undone.',
            isDanger: true
        }, function() {
            const form = document.getElementById('delete-api-form');
            form.action = "{{ url('/courier-settings') }}/" + partnerId + "/api/" + apiId;
            form.submit();
        });
    }

    // AJAX Test connection helper
    function testEnvConnection(slug) {
        const env = editingEnvironments[slug] || 'production';
        const btn = document.getElementById('test-conn-btn-' + slug);
        const originalText = btn.innerText;

        // Resolve field values from UI
        let baseUrl = '';
        let publicKey = '';
        let privateKey = '';
        let clientCode = '';
        let username = '';
        let password = '';
        let secretKeyProd = '';
        let secretKeyBeta = '';

        const inputs = document.querySelectorAll(`#fields-${env}-${slug} input, #fields-${env}-${slug} select`);
        inputs.forEach(input => {
            if (input.name.includes('[api_base_url]')) baseUrl = input.value;
            if (input.name.includes('[public_key]')) publicKey = input.value;
            if (input.name.includes('[private_key]')) privateKey = input.value;
            if (input.name.includes('[client_code]')) clientCode = input.value;
            if (input.name.includes('[username]')) username = input.value;
            if (input.name.includes('[password]')) password = input.value;
            if (input.name.includes('[secret_key_prod]')) secretKeyProd = input.value;
            if (input.name.includes('[secret_key_beta]')) secretKeyBeta = input.value;
            // Map Blue Dart specific fields if applicable
            if (input.name.includes('[login_id]') && !username) username = input.value;
            if (input.name.includes('[licence_key]') && !password) password = input.value;
        });

        if (!baseUrl && slug !== 'bluedart') {
            window.customConfirm({
                title: 'Validation Error',
                message: 'API Base URL is required to test connection.',
                alertOnly: true,
                isDanger: true
            });
            return;
        }

        // For Blue Dart, always use the static base URL if not resolved from hidden field
        if (slug === 'bluedart' && !baseUrl) {
            baseUrl = env === 'production' ? 'https://apigateway.bluedart.com' : 'https://apigateway-uat.bluedart.com';
        }

        btn.disabled = true;
        btn.innerText = 'Testing...';

        fetch("{{ route('courier-settings.test') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                name: slug,
                active_environment: env,
                api_base_url: baseUrl,
                public_key: publicKey,
                private_key: privateKey,
                client_code: clientCode,
                username: username,
                password: password,
                secret_key_prod: secretKeyProd,
                secret_key_beta: secretKeyBeta
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                window.customConfirm({
                    title: 'Connection Successful',
                    message: data.message,
                    alertOnly: true
                });
            } else {
                window.customConfirm({
                    title: 'Connection Failed',
                    message: data.message,
                    alertOnly: true,
                    isDanger: true
                });
            }
        })
        .catch(err => {
            window.customConfirm({
                title: 'Connection Error',
                message: err.message,
                alertOnly: true,
                isDanger: true
            });
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerText = originalText;
        });
    }

    function refreshBlueDartToken(env) {
        const slug = 'bluedart';
        const container = document.getElementById('fields-' + env + '-' + slug);
        if (!container) return;

        // Resolve credentials
        let baseUrl = env === 'production' ? 'https://apigateway.bluedart.com' : 'https://apigateway-uat.bluedart.com';
        let publicKey = '';
        let privateKey = '';

        const inputs = container.querySelectorAll('input');
        inputs.forEach(input => {
            if (input.name.includes('[public_key]')) publicKey = input.value;
            if (input.name.includes('[private_key]')) privateKey = input.value;
        });

        if (!publicKey || !privateKey) {
            window.customConfirm({
                title: 'Missing Credentials',
                message: 'API Key (Client ID) and API Secret (Client Secret) are required to generate token.',
                alertOnly: true,
                isDanger: true
            });
            return;
        }

        // Disable button during call
        const btn = event.target;
        const originalText = btn.innerText;
        btn.disabled = true;
        btn.innerText = 'Refreshing...';

        fetch("{{ route('courier-settings.test') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                name: slug,
                active_environment: env,
                api_base_url: baseUrl,
                public_key: publicKey,
                private_key: privateKey
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                const tokenInput = document.getElementById('token_' + env + '_' + slug);
                if (tokenInput) {
                    const tokenValue = data.token || '';
                    if (tokenValue) {
                        tokenInput.value = tokenValue;
                        window.customConfirm({
                            title: 'Token Refreshed',
                            message: 'Blue Dart JWT Token refreshed and filled successfully! Please click "Save Settings" to persist changes.',
                            alertOnly: true
                        });
                    } else {
                        window.customConfirm({
                            title: 'Token Generated',
                            message: data.message,
                            alertOnly: true
                        });
                    }
                }
            } else {
                window.customConfirm({
                    title: 'Token Generation Failed',
                    message: data.message,
                    alertOnly: true,
                    isDanger: true
                });
            }
        })
        .catch(err => {
            window.customConfirm({
                title: 'Error',
                message: err.message,
                alertOnly: true,
                isDanger: true
            });
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerText = originalText;
        });
    }

    // Auto-open modal if redirected from API actions
    @if(session('open_api_modal_partner_id'))
        (function() {
            const targetId = "{{ session('open_api_modal_partner_id') }}";
            const partner = allPartners.find(p => p.id === targetId);
            if (partner) {
                setTimeout(() => {
                    openApiListModal(partner);
                }, 300);
            }
        })();
    @endif

    // Warehouse Management JS Functions
    function openAddWarehouseModal() {
        const modal = document.getElementById('add-warehouse-modal');
        if (!modal) return;
        const card = modal.querySelector('.confirm-card');
        modal.style.display = 'flex';
        requestAnimationFrame(() => {
            modal.style.opacity = '1';
            card.style.transform = 'scale(1)';
        });
    }
    
    function closeAddWarehouseModal() {
        const modal = document.getElementById('add-warehouse-modal');
        if (!modal) return;
        const card = modal.querySelector('.confirm-card');
        modal.style.opacity = '0';
        card.style.transform = 'scale(0.95)';
        setTimeout(() => {
            modal.style.display = 'none';
        }, 200);
    }

    function openEditWarehouseModal(wh) {
        document.getElementById('edit_wh_address_title').value = wh.address_title;
        document.getElementById('edit_wh_name').value = wh.name;
        document.getElementById('edit_wh_phone').value = wh.phone;
        document.getElementById('edit_wh_alternate_phone').value = wh.alternate_phone || '';
        document.getElementById('edit_wh_email').value = wh.email;
        document.getElementById('edit_wh_address_line_one').value = wh.address_line_one;
        document.getElementById('edit_wh_address_line_two').value = wh.address_line_two || '';
        document.getElementById('edit_wh_pin_code').value = wh.pin_code;

        const form = document.getElementById('edit-warehouse-form');
        form.action = "{{ url('/warehouses') }}/" + wh.warehouse_id;

        const modal = document.getElementById('edit-warehouse-modal');
        const card = modal.querySelector('.confirm-card');
        modal.style.display = 'flex';
        requestAnimationFrame(() => {
            modal.style.opacity = '1';
            card.style.transform = 'scale(1)';
        });
    }

    function closeEditWarehouseModal() {
        const modal = document.getElementById('edit-warehouse-modal');
        if (!modal) return;
        const card = modal.querySelector('.confirm-card');
        modal.style.opacity = '0';
        card.style.transform = 'scale(0.95)';
        setTimeout(() => {
            modal.style.display = 'none';
        }, 200);
    }

    function deleteWarehouse(whId, whName) {
        window.customConfirm({
            title: 'Delete Warehouse',
            message: `Are you sure you want to delete the warehouse "${whName}" (${whId})?`,
            confirmText: 'Delete',
            cancelText: 'Cancel',
            isDanger: true
        }, function() {
            const form = document.getElementById('delete-warehouse-form');
            form.action = "{{ url('/warehouses') }}/" + whId;
            form.submit();
        });
    }
</script>
@endpush