@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    {{-- Toolbar --}}
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Agency Markups</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted"><a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a></li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Agency Markups</li>
                </ul>
            </div>
        </div>
    </div>

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            {{-- Agency Header --}}
            <div class="card mb-4">
                <div class="card-body pt-9 pb-0">
                    @include('admin.agency.agency_header')
                </div>
            </div>

            {{-- Toast: Success --}}
            @if(session('success'))
            <div id="toast-success" style="position:fixed;top:20px;right:20px;z-index:9999;min-width:300px;"
                class="alert bg-light-success border border-success d-flex align-items-center p-4 shadow-sm rounded">
                <i class="ki-duotone ki-shield-tick fs-2x text-success me-3"><span class="path1"></span><span class="path2"></span></i>
                <span class="fw-semibold text-success">{{ session('success') }}</span>
            </div>
            @endif

            {{-- Toast: Errors --}}
            @if($errors->any() && old('supplier'))
            <div id="toast-error" style="position:fixed;top:20px;right:20px;z-index:9999;min-width:320px;"
                class="alert bg-light-danger border border-danger d-flex align-items-start p-4 shadow-sm rounded">
                <i class="ki-duotone ki-cross-circle fs-2x text-danger me-3 mt-1"><span class="path1"></span><span class="path2"></span></i>
                <div>
                    <div class="fw-bold text-danger mb-1">Please fix the following:</div>
                    <ul class="mb-0 ps-3">
                        @foreach($errors->all() as $error)
                            <li class="text-danger fw-semibold fs-7">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endif

            {{-- DEFAULT MARKUP CARD --}}
            <div class="card mb-4">
                <div class="card-header border-bottom min-h-55px d-flex align-items-center justify-content-between px-6">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-percent text-muted fs-6"></i>
                        <span class="fw-bold text-gray-800 fs-6">{{ $agency->agency_name }}</span>
                        <span class="text-muted fs-7">— Default Markup</span>
                    </div>

                    <div class="d-flex align-items-center gap-2">
                        @if($agency->hasDefaultMarkup())
                            <span class="text-primary fw-bold fs-7">
                                <i class="bi bi-tag me-1"></i>{{ ucfirst($agency->markup_type) }}: {{ $agency->defaultMarkupLabel() }}
                            </span>
                        @else
                            <span class="text-muted fs-7">
                                <i class="bi bi-dash-circle me-1"></i> Not Configured
                            </span>
                        @endif

                        {{-- Edit Default Markup Button --}}
                        <button type="button"
                            class="btn btn-sm btn-icon btn-light-primary"
                            title="Edit Default Markup"
                            data-bs-toggle="modal"
                            data-bs-target="#kt_modal_edit_default_markup">
                            <i class="bi bi-pencil fs-7"></i>
                        </button>
                    </div>
                </div>

                <div class="card-body py-3 px-6">
                    @if($agency->hasDefaultMarkup())
                        <div class="d-flex align-items-start gap-2 p-3 rounded bg-light-warning border border-warning border-dashed">
                            <i class="bi bi-exclamation-triangle-fill text-warning fs-6 mt-1"></i>
                            <div>
                                <span class="fw-semibold text-gray-800 fs-7">
                                    Agency-level fallback active:
                                    <span class="text-warning">{{ $agency->defaultMarkupLabel() }}</span>
                                    ({{ ucfirst($agency->markup_type) }})
                                </span>
                                <p class="text-muted fs-8 mb-0 mt-1">
                                    Bookings that do <strong>not</strong> match any slab-specific rule below will automatically use this default markup.
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="d-flex align-items-start gap-2 p-3 rounded bg-light-danger border border-danger border-dashed">
                            <i class="bi bi-x-octagon-fill text-danger fs-6 mt-1"></i>
                            <div>
                                <span class="fw-semibold text-gray-800 fs-7">No default markup configured for this agency.</span>
                                <p class="text-muted fs-8 mb-0 mt-1">
                                    If a booking does not match any slab rule below, <strong>no markup will be applied</strong> and the base price will be used.
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- COVERAGE STATUS CARD --}}
            <div class="card mb-5">
                <div class="card-header border-bottom min-h-55px d-flex align-items-center justify-content-between flex-wrap px-6">
                    <div class="d-flex align-items-center gap-3">
                        @if($noMarkupWarning)
                            <span class="badge badge-light-danger fw-bold fs-7 px-3 py-2">
                            </span>
                            <span class="text-muted fs-7">Add a markup rule to get started.</span>
                        @elseif(!empty($missingSlabs))
                            <span class="badge  badge-light-warning fw-bold fs-7 px-3 py-2">
                                <i class="bi bi-exclamation-triangle me-1"></i> Incomplete Coverage
                            </span>
                        @else
                            <span class="badge badge-light-success fw-bold fs-7 px-3 py-2">
                                <i class="bi bi-check-circle me-1"></i> Full Coverage
                            </span>
                            <span class="text-muted fs-7">All price slabs have an active markup rule.</span>
                        @endif
                    </div>

                    <div class="d-flex align-items-center gap-2">
                        @if(!$noMarkupWarning && !empty($missingSlabs))
                        <button type="button"
                            class="btn btn-light-warning btn-sm fw-semibold"
                            data-bs-toggle="modal" data-bs-target="#kt_modal_coverage_details">
                            <i class="bi bi-eye fs-6 me-1"></i> View Details
                        </button>
                        @endif

                        <button type="button"
                            class="btn btn-primary btn-sm"
                            data-bs-toggle="modal" data-bs-target="#kt_modal_add_markup">
                            <i class="ki-duotone ki-plus fs-4"></i> Add Markup Rule
                        </button>
                    </div>
                </div>
            </div>

            {{-- MARKUP TABLES --}}
            @forelse($markups as $groupKey => $groupMarkups)
                @php [$supplierName, $serviceTypeName] = explode('||', $groupKey); @endphp

                <div class="card mb-5">
                    <div class="card-header border-bottom bg-light min-h-50px">
                        <div class="card-title d-flex align-items-center gap-2">
                            <i class="ki-duotone ki-abstract-26 fs-4 text-primary"><span class="path1"></span><span class="path2"></span></i>
                            <span class="fw-bold fs-6 text-primary">{{ $supplierName }}</span>
                            <span class="text-muted">›</span>
                            <span class="fw-semibold fs-6 text-gray-700">{{ $serviceTypeName }}</span>
                        </div>
                        <div class="card-toolbar">
                            <span class="badge badge-light-primary">{{ $groupMarkups->count() }} Rule(s)</span>
                        </div>
                    </div>

                    <table class="table table-row-bordered align-middle gy-3 gs-7 mb-0">
                        <thead class="fs-7 text-gray-600 fw-bold bg-light bg-opacity-75 text-uppercase">
                            <tr>
                                <th class="min-w-30px">#</th>
                                <th class="min-w-200px">Price Slab</th>
                                <th class="min-w-110px">Markup Type</th>
                                <th class="min-w-80px">Value</th>
                                <th class="min-w-80px">Status</th>
                                <th class="min-w-100px text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @foreach($groupMarkups as $markup)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    @php $sd = is_array($markup->slab_data) ? $markup->slab_data : null; @endphp
                                    @if($sd && !empty($sd['label']))
                                        <span class="badge badge-light-info fw-bold">{{ $sd['label'] }}</span>
                                        <small class="text-muted d-block mt-1">
                                            {{ number_format($sd['min_price'], 3) }} – {{ number_format($sd['max_price'], 3) }}
                                        </small>
                                    @elseif($sd && isset($sd['min_price']))
                                        <span class="badge badge-light-info fw-bold">
                                            {{ number_format($sd['min_price'], 0) }} – {{ number_format($sd['max_price'], 0) }}
                                        </span>
                                        <small class="text-muted d-block mt-1">
                                            {{ number_format($sd['min_price'], 3) }} – {{ number_format($sd['max_price'], 3) }}
                                        </small>
                                    @else
                                        <span class="text-muted fst-italic fs-7">— (slab not assigned)</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge badge-light-primary fw-bold">{{ ucfirst($markup->markup_type) }}</span>
                                </td>
                                <td>
                                    @if($markup->markup_type === 'percentage')
                                        {{ number_format($markup->markup_value, 2) }}%
                                    @else
                                        {{ number_format($markup->markup_value, 3) }}
                                    @endif
                                </td>
                                <td>
                                    @if($markup->status === 'active')
                                        <span class="badge badge-light-success fw-bold">Active</span>
                                    @else
                                        <span class="badge badge-light-danger fw-bold">Inactive</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-flex justify-content-end gap-2">
                                        {{-- Edit Button --}}
                                        <button type="button"
                                            class="btn btn-sm btn-icon btn-light border border-warning text-warning hover-scale edit-markup-btn"
                                            title="Edit"
                                            data-id="{{ $markup->id }}"
                                            data-markup-type="{{ $markup->markup_type }}"
                                            data-markup-value="{{ $markup->markup_value }}"
                                            data-status="{{ $markup->status }}"
                                            data-slab-label="@if($sd && !empty($sd['label'])){{ $sd['label'] }}@elseif($sd && isset($sd['min_price'])){{ number_format($sd['min_price'],0) }} – {{ number_format($sd['max_price'],0) }}@else—@endif"
                                            data-bs-toggle="modal"
                                            data-bs-target="#kt_modal_edit_markup">
                                            <i class="bi bi-pencil fs-7"></i>
                                        </button>

                                        {{-- Delete Button --}}
                                        <form action="{{ route('admin.agency.markups.destroy', [$agency->uuid, $markup->id]) }}"
                                              method="POST"
                                              onsubmit="return confirm('Delete this markup rule?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-icon btn-light border border-danger text-warning hover-scale edit-markup-btn" title="Delete">
                                                <i class="bi bi-trash fs-7"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            @empty
            <div class="card">
                <div class="card-body text-center text-muted py-15">
                    <i class="bi bi-inbox fs-2x d-block mb-3"></i>
                    <p class="fs-6">No markup rules added yet.</p>
                    <button type="button" class="btn btn-primary btn-sm"
                            data-bs-toggle="modal" data-bs-target="#kt_modal_add_markup">
                        <i class="ki-duotone ki-plus fs-3"></i> Add First Markup
                    </button>
                </div>
            </div>
            @endforelse

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


{{-- ══════════════════════════════════
     EDIT DEFAULT MARKUP MODAL
══════════════════════════════════ --}}
<div class="modal fade" id="kt_modal_edit_default_markup"
     data-bs-backdrop="static" data-bs-keyboard="false"
     tabindex="-1" aria-hidden="true" style="display:none;">
    <div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
        <div class="modal-content">
            <div class="modal-header px-6 py-4">
                <h5 class="modal-title fw-bold">Edit Default Markup</h5>
                <div class="btn btn-sm btn-icon btn-light" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body px-6 py-5">
                <p class="text-muted fs-7 mb-4">
                    This is the agency-level fallback. It applies to bookings that don't match any slab-specific rule.
                </p>
                <form method="POST"
                      action="{{ route('admin.agency.updateDefaultMarkup', $agency->uuid) }}"
                      id="editDefaultMarkupForm">
                    @csrf
                    @method('PUT')

                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold fs-7 required mb-1">Markup Type</label>
                            <select name="markup_type" id="defaultMarkupType" class="form-select form-select-sm" required>
                                <option value="percentage" {{ $agency->markup_type === 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                <option value="flat"       {{ $agency->markup_type === 'flat'       ? 'selected' : '' }}>Flat Amount</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold fs-7 required mb-1">
                                Value <span id="defaultValueUnit" class="text-muted fw-normal fs-8"></span>
                            </label>
                            <input type="number" step="0.01" min="0"
                                   name="markup_value" id="defaultMarkupValue"
                                   class="form-control form-control-sm"
                                   value="{{ $agency->markup_value }}"
                                   placeholder="e.g. 10.00" required>
                        </div>
                    </div>

                    {{-- Preview --}}
                    <div id="defaultMarkupPreview" class="d-none p-3 rounded bg-light border border-gray-300 mb-3">
                        <span class="text-gray-700 fs-7">
                            <i class="bi bi-eye me-1 text-muted"></i>
                            <span id="defaultPreviewText"></span>
                        </span>
                    </div>

                    <div class="d-flex justify-content-end gap-2 pt-4 border-top">
                        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="bi bi-check-circle me-1"></i> Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════
     COVERAGE DETAILS MODAL
══════════════════════════════════ --}}
@if(!$noMarkupWarning && !empty($missingSlabs))
<div class="modal fade" id="kt_modal_coverage_details" tabindex="-1" aria-hidden="true" style="display:none;">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" style="max-width:520px;">
        <div class="modal-content">
            <div class="modal-header px-6 py-4">
                <h5 class="modal-title fw-bold">Coverage Details</h5>
                <div class="btn btn-sm btn-icon btn-light" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body px-6 py-4">
                <p class="text-muted fs-7 mb-4">Price slabs without a markup rule. Click any pill to add a rule.</p>
                @foreach($missingSlabs as $gap)
                <div class="mb-4">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="fw-bold text-gray-800 fs-7">{{ $gap['supplier'] }}</span>
                        <span class="text-muted">›</span>
                        <span class="badge badge-light-info fs-8">{{ $gap['supp_type'] }}</span>
                        <span class="badge badge-light-warning fs-8 ms-auto">{{ count($gap['slabs']) }} uncovered</span>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach($gap['slabs'] as $slab)
                            @php
                                $label = $slab->label ?? number_format($slab->min_price,0).' – '.number_format($slab->max_price,0);
                            @endphp
                            <button type="button"
                                class="btn btn-sm btn-light-primary slab-pill-btn"
                                style="font-size:12px;border-radius:20px;padding:4px 12px;"
                                data-supplier="{{ $gap['supplier'] }}"
                                data-service="{{ $gap['supp_type'] }}"
                                data-slab-id="{{ $slab->id }}"
                                data-bs-dismiss="modal"
                                data-bs-toggle="modal"
                                data-bs-target="#kt_modal_add_markup">
                                {{ $label }} <i class="bi bi-plus ms-1" style="font-size:11px;"></i>
                            </button>
                        @endforeach
                    </div>
                    @if(!$loop->last)<hr class="my-3">@endif
                </div>
                @endforeach
            </div>
            <div class="modal-footer px-6 py-3">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-sm"
                    data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#kt_modal_add_markup">
                    <i class="ki-duotone ki-plus fs-4"></i> Add Markup Rule
                </button>
            </div>
        </div>
    </div>
</div>
@endif


{{-- ══════════════════════════════════
     ADD MARKUP RULE MODAL
══════════════════════════════════ --}}
<div class="modal fade" id="kt_modal_add_markup"
     data-bs-backdrop="static" data-bs-keyboard="false"
     tabindex="-1" aria-hidden="true" style="display:none;">
    <div class="modal-dialog modal-dialog-centered" style="max-width:540px;">
        <div class="modal-content">
            <div class="modal-header px-6 py-4">
                <h5 class="modal-title fw-bold">Add Markup Rule</h5>
                <div class="btn btn-sm btn-icon btn-light" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body px-6 py-5">
                <form method="POST"
                      action="{{ route('admin.agency.markups.store', $agency->uuid) }}"
                      id="addMarkupForm">
                    @csrf

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold fs-7 required mb-1">Supplier</label>
                            <select name="supplier" id="supplierSelect" class="form-select form-select-sm" required>
                                <option value="">Select supplier…</option>

                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}"
                                        {{ old('supplier') == $supplier->id ? 'selected' : '' }}>
                                        {{ $supplier->supp_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold fs-7 required mb-1">Service Type</label>
                            <select name="supp_type" id="serviceTypeSelect" class="form-select form-select-sm" required>
                                <option value="">Select supplier first…</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold fs-7 required mb-1">Price Slab</label>
                        <select name="slab_id" id="slabSelect" class="form-select form-select-sm" required>
                            <option value="">Select price slab…</option>
                            @foreach($allSlabs as $slab)
                                <option value="{{ $slab->id }}"
                                    data-fallback="{{ $slab->is_default_fallback ? '1' : '0' }}"
                                    {{ old('slab_id') == $slab->id ? 'selected' : '' }}>
                                    {{ $slab->label ?? number_format($slab->min_price,0).' – '.number_format($slab->max_price,0) }}
                                    @if($slab->is_default_fallback) — Fallback @endif
                                </option>
                            @endforeach
                        </select>
                        <div id="slabHint" class="d-none mt-1">
                            <small id="slabHintText" class="fw-semibold"></small>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">Markup Type</label>
                            <select name="markup_type" id="markupTypeSelect" class="form-select form-select-sm" required>
                                <option value="">Select…</option>
                                <option value="percentage" {{ old('markup_type') == 'percentage' ? 'selected' : '' }}>Percentage (%)</option>
                                <option value="flat"       {{ old('markup_type') == 'flat'       ? 'selected' : '' }}>Flat Amount</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">
                                Value <span id="valueUnit" class="text-muted fw-normal fs-8"></span>
                            </label>
                            <input type="number" step="0.001" min="0"
                                   name="markup_value" id="markupValueInput"
                                   class="form-control form-control-sm"
                                   placeholder="e.g. 5.000"
                                   value="{{ old('markup_value') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">Status</label>
                            <select name="status" class="form-select form-select-sm" required>
                                <option value="active"   {{ old('status','active') == 'active'   ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status')          == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div id="markupPreview" class="d-none p-3 rounded bg-light border border-gray-300 mb-3">
                        <span class="text-gray-700 fs-7">
                            <i class="bi bi-eye me-1 text-muted"></i>
                            <span id="previewText"></span>
                        </span>
                    </div>

                    <div class="d-flex justify-content-between align-items-center pt-4 border-top">
                        <span class="text-muted fs-8">
                            <i class="bi bi-shield-check text-success me-1"></i> Duplicate slab rules are blocked.
                        </span>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-check-circle me-1"></i> Save Rule
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{{-- ══════════════════════════════════
     EDIT MARKUP RULE MODAL
══════════════════════════════════ --}}
<div class="modal fade" id="kt_modal_edit_markup"
     data-bs-backdrop="static" data-bs-keyboard="false"
     tabindex="-1" aria-hidden="true" style="display:none;">
    <div class="modal-dialog modal-dialog-centered" style="max-width:460px;">
        <div class="modal-content">
            <div class="modal-header px-6 py-4">
                <h5 class="modal-title fw-bold">Edit Markup Rule</h5>
                <div class="btn btn-sm btn-icon btn-light" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body px-6 py-5">
                <form method="POST" id="editMarkupForm" action="">
                    @csrf
                    @method('PUT')

                    <div class="mb-4 p-3 rounded bg-light border border-gray-200">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-info-circle text-muted fs-7"></i>
                            <span class="text-muted fs-7">Editing slab:</span>
                            <span id="editSlabLabel" class="badge badge-light-info fw-bold fs-8"></span>
                        </div>
                        <p class="text-muted fs-8 mb-0 mt-1 ms-4">
                            Supplier, service type and slab cannot be changed here.
                        </p>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">Markup Type</label>
                            <select name="markup_type" id="editMarkupType" class="form-select form-select-sm" required>
                                <option value="percentage">Percentage (%)</option>
                                <option value="flat">Flat Amount</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">
                                Value <span id="editValueUnit" class="text-muted fw-normal fs-8"></span>
                            </label>
                            <input type="number" step="0.001" min="0"
                                   name="markup_value" id="editMarkupValue"
                                   class="form-control form-control-sm"
                                   placeholder="e.g. 5.000" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold fs-7 required mb-1">Status</label>
                            <select name="status" id="editMarkupStatus" class="form-select form-select-sm" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div id="editMarkupPreview" class="d-none p-3 rounded bg-light border border-gray-300 mb-3">
                        <span class="text-gray-700 fs-7">
                            <i class="bi bi-eye me-1 text-muted"></i>
                            <span id="editPreviewText"></span>
                        </span>
                    </div>

                    <div class="d-flex justify-content-end gap-2 pt-4 border-top">
                        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning btn-sm text-white">
                            <i class="bi bi-check-circle me-1"></i> Update Rule
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection


@section('scripts')
<script>
$(document).ready(function () {

   const serviceData = @json($serviceTypesJson);

    $('#supplierSelect').on('change', function () {
        let supplierId = $(this).val();
        let filtered = serviceData.filter(s => s.supplier == supplierId);
        let options = '<option value="">Select service type…</option>';
        filtered.forEach(function (item) {
            options += `<option value="${item.supp_type}">${item.supp_type}</option>`;
        });
        $('#serviceTypeSelect').html(options);
    });

    //  SLAB CHANGE
    $('#slabSelect').on('change', function () {
        const $opt = $(this).find('option:selected');
        const val = $(this).val();
        const isFallback = $opt.data('fallback') == 1;

        if (!val) { $('#slabHint').addClass('d-none'); return; }

        $('#slabHint').removeClass('d-none');

        if (isFallback) {
            $('#slabHintText')
                .removeClass('text-success')
                .addClass('text-warning')
                .html('Fallback slab');
        } else {
            $('#slabHintText')
                .removeClass('text-warning')
                .addClass('text-success')
                .html('Valid slab');
        }
    });

    //  Edit markup modal populate
    $(document).on('click', '.edit-markup-btn', function () {
        const id   = $(this).data('id');
        const url  = '{{ route("admin.agency.markups", $agency->uuid) }}' + '/' + id;

        $('#editMarkupForm').attr('action', url);
        $('#editMarkupType').val($(this).data('markup-type'));
        $('#editMarkupValue').val($(this).data('markup-value'));
        $('#editMarkupStatus').val($(this).data('status'));
        $('#editSlabLabel').text($(this).data('slab-label'));
    });

}); 
</script>
@endsection