@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .promocodes-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .promocodes-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .promocodes-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .promocodes-page table {
            min-width: 1180px;
            width: 100%;
            vertical-align: middle;
        }

        .promocodes-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .promocodes-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .promocodes-page table tbody tr {
            transition: 0.16s ease;
        }

        .promocodes-page table tbody tr:hover {
            background: #f8fafc;
        }

        .promocode-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .promocode-code-cell {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 220px;
        }

        .promocode-code-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .promocode-code-link {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            line-height: 1.35;
            text-decoration: none;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
        }

        .promocode-code-link:hover {
            color: #2563eb;
            text-decoration: underline;
        }

        .promocode-code-sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .promocode-limit {
            color: #111827;
            font-weight: 900;
        }

        .promocode-discount {
            color: #166534;
            font-weight: 900;
        }

        .promocode-date {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.74rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .usage-box {
            display: inline-flex;
            flex-direction: column;
            gap: 0.25rem;
            align-items: flex-start;
            min-width: 130px;
        }

        .usage-line {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
        }

        .usage-line strong {
            color: #111827;
            font-weight: 900;
        }

        .promocode-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .table-pagination {
            padding: 1rem 1.25rem;
            border-top: 1px solid #eef2f7;
            background: #fff;
        }

        .promo-modal .modal-content {
            border: 0;
            border-radius: 20px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
            overflow: hidden;
        }

        .promo-modal .modal-header {
            border-bottom: 1px solid #eef2f7;
            background: #f8fafc;
            padding: 1rem 1.25rem;
        }

        .promo-modal .modal-title {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
        }

        .modal-subtitle {
            color: #64748b;
            font-size: 0.86rem;
            margin-top: 0.15rem;
        }

        .promo-modal .modal-body {
            padding: 1.25rem;
        }

        .promo-modal .modal-footer {
            border-top: 1px solid #eef2f7;
            background: #fff;
            padding: 1rem 1.25rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .promo-modal .form-control {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-input:focus,
        .asset-select:focus,
        .promo-modal .form-control:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .delete-warning-box {
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #991b1b;
            border-radius: 18px;
            padding: 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
        }

        .delete-warning-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #fff;
            color: #dc2626;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .delete-warning-box__title {
            font-weight: 900;
            margin-bottom: 0.15rem;
        }

        .delete-warning-box__text {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #b91c1c;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

        @media (max-width: 991.98px) {
            .promocodes-page .ui-card__header>.d-flex {
                align-items: flex-start !important;
            }

            .asset-col-6 {
                grid-column: span 12 / span 12;
            }
        }

        @media (max-width: 575.98px) {

            .promocodes-page .ui-card__header,
            .table-pagination {
                padding: 1rem;
            }
        }
    </style>

    <div class="container-fluid app-bg promocodes-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Promocodes"
                    description="Manage promocode limits, discount types, renewable status, expiration dates, and usage counters.">
                    <a href="javascript:void(0)" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                        data-bs-target="#createPromocodeModal" id="addNewPromocodeBtn">
                        + Add New Promocode
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap w-100">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto;">
                                Filters
                            </h6>

                            <x-table-controls :action="route('promocodes.index')" searchName="search" searchPlaceholder="search"
                                formId="promocodes-table-controls" :clearUrl="route('promocodes.index')" />

                            {{-- <x-table-action
                                type="create"
                                target="#createPromocodeModal"
                                class="d-flex align-items-center gap-2"
                                id="addNewPromocodeBtnHeader"
                            /> --}}
                        </div>
                    </div>

                    <div class="promocodes-table-wrap">
                        <x-table :headers="[
                            'Index',
                            'Code',
                            'Limit',
                            'Type',
                            'Discount',
                            'Is Monthly Renewable',
                            'Expire Date',
                            'Usage Count',
                            'Actions',
                        ]">
                            @forelse ($promocodes as $promocode)
                                @php
                                    $typeClass = $promocode->type === 'fixed' ? 'ui-pill--info' : 'ui-pill--primary';
                                    $renewableClass = $promocode->is_monthly_renewable
                                        ? 'ui-pill--success'
                                        : 'ui-pill--neutral';

                                    $expireDate = $promocode->expire_date
                                        ? \Carbon\Carbon::parse($promocode->expire_date)
                                        : null;

                                    $isExpired = $expireDate ? $expireDate->isPast() : false;
                                @endphp

                                <tr>
                                    <td class="text-center">
                                        <span class="promocode-index">
                                            {{ method_exists($promocodes, 'firstItem') ? $promocodes->firstItem() + $loop->index : $loop->iteration }}
                                        </span>
                                    </td>

                                    <td>
                                        <div class="promocode-code-cell">
                                            <div class="promocode-code-icon">
                                                <i class="fas fa-ticket-alt"></i>
                                            </div>

                                            <div>
                                                <a href="{{ route('promocodes.show', $promocode->id) }}"
                                                    class="promocode-code-link" title="{{ $promocode->code }}">
                                                    {{ $promocode->code }}
                                                </a>
                                                <div class="promocode-code-sub">
                                                    View promocode details
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <strong class="promocode-limit">
                                            {{ $promocode->limit }}
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $typeClass }}">
                                            {{ ucfirst($promocode->type) }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <strong class="promocode-discount">
                                            @if ($promocode->type == 'fixed')
                                                {{ number_format($promocode->discount, 0) }}
                                            @else
                                                {{ number_format($promocode->discount, 0) }}%
                                            @endif
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        <span class="ui-pill {{ $renewableClass }}">
                                            <i
                                                class="fas {{ $promocode->is_monthly_renewable ? 'fa-sync-alt' : 'fa-ban' }}"></i>
                                            {{ $promocode->is_monthly_renewable ? 'Yes' : 'No' }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        @if ($expireDate)
                                            <span
                                                class="income-date promocode-date {{ $isExpired ? 'ui-pill--danger' : '' }}">
                                                <i class="fas fa-calendar-alt"></i>
                                                {{ $expireDate->format('d M Y') }}
                                            </span>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">—</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="usage-box">
                                            <div class="usage-line">
                                                <i class="fas fa-chart-bar"></i>
                                                Total:
                                                <strong>{{ $promocode->usage_count_total ?? 0 }}</strong>
                                            </div>

                                            @if ($promocode->is_monthly_renewable)
                                                <div class="usage-line">
                                                    <i class="fas fa-calendar-check"></i>
                                                    This Month:
                                                    <strong>{{ $promocode->usage_count_monthly ?? 0 }}</strong>
                                                </div>
                                            @endif
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <div class="promocode-actions">
                                            <x-table-action type="view" :url="route('promocodes.show', $promocode->id)" />
                                            <x-table-action type="edit" :target="'#editPromocodeModal' . $promocode->id" />
                                            <x-table-action type="delete" :target="'#deletePromocodeModal' . $promocode->id" />
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9">
                                        <div class="table-empty-state">
                                            <i class="fas fa-ticket-alt"></i>
                                            <h6>No promocodes found.</h6>
                                            <p>Start by creating a new promocode.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>

                    @if ($promocodes->hasPages())
                        <div class="table-pagination">
                            {{ $promocodes->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                </div>

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

    {{-- Create Modal --}}
    <div class="modal fade promo-modal" id="createPromocodeModal" tabindex="-1" aria-labelledby="createPromocodeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <form action="{{ route('promocodes.store') }}" method="POST" enctype="multipart/form-data"
                id="createPromocodeForm" class="w-100">
                @csrf

                <div class="modal-content">
                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title" id="createPromocodeModalLabel">Add Promocode</h5>
                            <p class="modal-subtitle mb-0">Create a new promocode with discount, limit, renewal status, and
                                expiry date.</p>
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="asset-form-grid">
                            <div class="asset-col-6">
                                <label class="asset-label">Code <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="asset-input" placeholder="Enter promocode"
                                    required>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Limit <span class="text-danger">*</span></label>
                                <input type="number" name="limit" class="asset-input" placeholder="0" required>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Type <span class="text-danger">*</span></label>
                                <select name="type" class="asset-select" required>
                                    <option value="">Select Type</option>
                                    <option value="fixed">Fixed</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Discount <span class="text-danger">*</span></label>
                                <input type="number" name="discount" class="asset-input" placeholder="0" required>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Is Monthly Renewable <span class="text-danger">*</span></label>
                                <select name="is_monthly_renewable" class="asset-select" required>
                                    <option value="">Select Is Monthly Renewable</option>
                                    <option value="1">Yes</option>
                                    <option value="0">No</option>
                                </select>
                            </div>

                            <div class="asset-col-6">
                                <label class="asset-label">Expire Date <span class="text-danger">*</span></label>
                                <input type="date" name="expire_date" class="asset-input" required>
                            </div>

                            {{-- Influencer Section --}}
                            <div class="asset-col-12">
                                <hr style="border-color:#eef2f7; margin:0">
                            </div>

                            <div class="asset-col-12">
                                <label class="asset-label">Link to Influencer <span class="text-muted" style="font-weight:500">(Optional)</span></label>
                                <select name="influencer_id" class="asset-select create-influencer-select">
                                    <option value="">— No Influencer —</option>
                                    @foreach ($influencers as $inf)
                                        <option value="{{ $inf->id }}">{{ $inf->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="asset-col-6 create-commission-wrap" style="display:none">
                                <label class="asset-label">Commission Type <span class="text-danger">*</span></label>
                                <select name="commission_type" class="asset-select">
                                    <option value="">Select</option>
                                    <option value="fixed">Fixed Amount</option>
                                    <option value="percentage">Percentage %</option>
                                </select>
                            </div>

                            <div class="asset-col-6 create-commission-wrap" style="display:none">
                                <label class="asset-label">Commission Amount <span class="text-danger">*</span></label>
                                <input type="number" name="commission_amount" class="asset-input" placeholder="0" step="0.01" min="0">
                            </div>
                        </div>

                        <input type="hidden" name="created_by" value="{{ auth()->id() }}">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-outline-primary rounded-pill">
                            <i class="fas fa-save me-1"></i>
                            Create Promocode
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Edit Modals --}}
    @foreach ($promocodes as $promocode)
        <div class="modal fade promo-modal" id="editPromocodeModal{{ $promocode->id }}" tabindex="-1"
            aria-labelledby="editPromocodeModalLabel{{ $promocode->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <form action="{{ route('promocodes.update', $promocode->id) }}" method="POST"
                    enctype="multipart/form-data" class="w-100">
                    @csrf
                    @method('PUT')

                    <div class="modal-content">
                        <div class="modal-header">
                            <div>
                                <h5 class="modal-title" id="editPromocodeModalLabel{{ $promocode->id }}">Edit Promocode
                                </h5>
                                <p class="modal-subtitle mb-0">Update promocode discount, limit, renewal status, and expiry
                                    date.</p>
                            </div>

                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="asset-form-grid">
                                <div class="asset-col-6">
                                    <label class="asset-label">Code <span class="text-danger">*</span></label>
                                    <input type="text" name="code" class="asset-input"
                                        value="{{ old('code', $promocode->code) }}" required>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Limit <span class="text-danger">*</span></label>
                                    <input type="number" name="limit" class="asset-input"
                                        value="{{ old('limit', $promocode->limit) }}" required>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Type <span class="text-danger">*</span></label>
                                    <select name="type" class="asset-select" required>
                                        <option value="">Select Type</option>
                                        <option value="fixed"
                                            {{ old('type', $promocode->type) == 'fixed' ? 'selected' : '' }}>
                                            Fixed
                                        </option>
                                        <option value="percentage"
                                            {{ old('type', $promocode->type) == 'percentage' ? 'selected' : '' }}>
                                            Percentage
                                        </option>
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Discount <span class="text-danger">*</span></label>
                                    <input type="number" name="discount" class="asset-input"
                                        value="{{ old('discount', $promocode->discount) }}" required>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Is Monthly Renewable <span
                                            class="text-danger">*</span></label>
                                    <select name="is_monthly_renewable" class="asset-select" required>
                                        <option value="">Select Is Monthly Renewable</option>
                                        <option value="1"
                                            {{ old('is_monthly_renewable', $promocode->is_monthly_renewable) == '1' ? 'selected' : '' }}>
                                            Yes
                                        </option>
                                        <option value="0"
                                            {{ old('is_monthly_renewable', $promocode->is_monthly_renewable) == '0' ? 'selected' : '' }}>
                                            No
                                        </option>
                                    </select>
                                </div>

                                <div class="asset-col-6">
                                    <label class="asset-label">Expire Date <span class="text-danger">*</span></label>
                                    <input type="date" name="expire_date" class="asset-input"
                                        value="{{ old('expire_date', \Carbon\Carbon::parse($promocode->expire_date)->format('Y-m-d')) }}"
                                        required>
                                </div>

                                {{-- Influencer Section --}}
                                <div class="asset-col-12">
                                    <hr style="border-color:#eef2f7; margin:0">
                                </div>

                                <div class="asset-col-12">
                                    <label class="asset-label">Link to Influencer <span class="text-muted" style="font-weight:500">(Optional)</span></label>
                                    <select name="influencer_id" class="asset-select edit-influencer-select" data-promo="{{ $promocode->id }}">
                                        <option value="">— No Influencer —</option>
                                        @foreach ($influencers as $inf)
                                            <option value="{{ $inf->id }}" {{ old('influencer_id', $promocode->influencer_id) == $inf->id ? 'selected' : '' }}>
                                                {{ $inf->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="asset-col-6 edit-commission-wrap-{{ $promocode->id }}" style="{{ $promocode->influencer_id ? '' : 'display:none' }}">
                                    <label class="asset-label">Commission Type <span class="text-danger">*</span></label>
                                    <select name="commission_type" class="asset-select">
                                        <option value="">Select</option>
                                        <option value="fixed" {{ old('commission_type', $promocode->commission_type) == 'fixed' ? 'selected' : '' }}>Fixed Amount</option>
                                        <option value="percentage" {{ old('commission_type', $promocode->commission_type) == 'percentage' ? 'selected' : '' }}>Percentage %</option>
                                    </select>
                                </div>

                                <div class="asset-col-6 edit-commission-wrap-{{ $promocode->id }}" style="{{ $promocode->influencer_id ? '' : 'display:none' }}">
                                    <label class="asset-label">Commission Amount <span class="text-danger">*</span></label>
                                    <input type="number" name="commission_amount" class="asset-input"
                                        value="{{ old('commission_amount', $promocode->commission_amount) }}"
                                        placeholder="0" step="0.01" min="0">
                                </div>
                            </div>

                            <input type="hidden" name="created_by" value="{{ auth()->id() }}">
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary rounded-pill"
                                data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-outline-success rounded-pill">
                                <i class="fas fa-check me-1"></i>
                                Update Promocode
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    {{-- Delete Modals --}}
    @foreach ($promocodes as $promocode)
        <div class="modal fade promo-modal" id="deletePromocodeModal{{ $promocode->id }}" tabindex="-1"
            aria-labelledby="deletePromocodeLabel{{ $promocode->id }}" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form action="{{ route('promocodes.destroy', $promocode->id) }}" method="POST" class="w-100">
                    @csrf
                    @method('DELETE')

                    <div class="modal-content">
                        <div class="modal-header">
                            <div>
                                <h5 class="modal-title" id="deletePromocodeLabel{{ $promocode->id }}">Delete Promocode
                                </h5>
                                <p class="modal-subtitle mb-0">This action cannot be undone.</p>
                            </div>

                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div class="delete-warning-box">
                                <div class="delete-warning-box__icon">
                                    <i class="fas fa-trash-alt"></i>
                                </div>

                                <div>
                                    <div class="delete-warning-box__title">
                                        Are you sure?
                                    </div>

                                    <div class="delete-warning-box__text">
                                        You are about to delete promocode
                                        <strong>{{ $promocode->code }}</strong>.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary rounded-pill"
                                data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-outline-danger rounded-pill">
                                <i class="fas fa-trash me-1"></i>
                                Delete Promocode
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const createPromocodeModal = document.getElementById('createPromocodeModal');
            const createPromocodeForm = document.getElementById('createPromocodeForm');

            if (!createPromocodeModal || !createPromocodeForm) {
                return;
            }

            createPromocodeModal.addEventListener('show.bs.modal', function() {
                createPromocodeForm.reset();
                document.querySelectorAll('.create-commission-wrap').forEach(el => el.style.display = 'none');
            });

            createPromocodeModal.addEventListener('hidden.bs.modal', function() {
                createPromocodeForm.reset();
                document.querySelectorAll('.create-commission-wrap').forEach(el => el.style.display = 'none');
            });

            // Create modal: toggle commission fields when influencer selected
            const createInfluencerSel = document.querySelector('.create-influencer-select');
            if (createInfluencerSel) {
                createInfluencerSel.addEventListener('change', function () {
                    const show = this.value !== '';
                    document.querySelectorAll('.create-commission-wrap').forEach(el => {
                        el.style.display = show ? '' : 'none';
                        el.querySelectorAll('select, input').forEach(f => {
                            show ? f.setAttribute('required', true) : f.removeAttribute('required');
                            if (!show) f.value = '';
                        });
                    });
                });
            }

            // Edit modals: toggle commission fields
            document.querySelectorAll('.edit-influencer-select').forEach(sel => {
                sel.addEventListener('change', function () {
                    const promoId = this.dataset.promo;
                    const show = this.value !== '';
                    document.querySelectorAll(`.edit-commission-wrap-${promoId}`).forEach(el => {
                        el.style.display = show ? '' : 'none';
                        el.querySelectorAll('select, input').forEach(f => {
                            show ? f.setAttribute('required', true) : f.removeAttribute('required');
                            if (!show) f.value = '';
                        });
                    });
                });
            });
        });
    </script>
@endsection