@push('title')
    Update Configuration
@endpush

<x-app-layout>

    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif

        @if (session('info'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="info-alert">
                <div class="toast-header bg-info">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('info') }}</div>
            </div>
        @endif

        @if (session('warning'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="warning-alert">
                <div class="toast-header bg-warning">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('warning') }}</div>
            </div>
        @endif

        @if (session('danger'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="danger-alert">
                <div class="toast-header bg-danger">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('danger') }}</div>
            </div>
        @endif
    </div>



    <div class="mt-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-money-bill-wave me-2"></i>Minimum Spent Threshold
                </h5>
            </div>
            <div class="card-body py-3">
                <div class="threshold-item border rounded p-3 mb-3">
                    <form action="{{ route('configurations.threshold.update') }}" method="post">
                        @csrf
                        <div class="row align-items-end">
                            <div class="col-md-11">
                                <div>
                                    <label class="form-label fw-bold">Minimum Amount ({{ $config->currancy }})</label>
                                    <input type="number" name="minimum_spent" class="form-control" placeholder="1000"
                                        value="{{ $config->minimum_spent ?? '' }}" min="0" step="0.01"
                                        required>
                                    @error('minimum_spent')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-1 text-end">
                                <div class="">
                                    <input type="submit" value="Save" class="btn btn-primary">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        <small><i class="fas fa-info-circle me-1"></i>Set minimum order value for checkout</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header border-bottom">
                <h5 class="mb-0">
                    <i class="fab fa-whatsapp me-2"></i>WhatsApp Number
                </h5>
            </div>
            <div class="card-body py-3">
                <div class="whatsapp-item border rounded p-3 mb-3">
                    <form action="{{ route('configurations.whatsapp.update') }}" method="post">
                        @csrf
                        <div class="row align-items-end">
                            <div class="col-md-11">
                                <div>
                                    <label class="form-label fw-bold">WhatsApp Number</label>
                                    <input type="text" name="whatsapp_number" class="form-control"
                                        placeholder="+971771234567" value="{{ $config->whatsapp_number ?? '' }}"
                                        required>
                                    @error('whatsapp_number')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-1 text-end">
                                <div class="">
                                    <input type="submit" value="Save" class="btn btn-success">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        <small><i class="fas fa-info-circle me-1"></i>Include country code (e.g., +971)</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card shadow-sm mb-4">
        <div class="card-header border-bottom">
            <h5 class="mb-0">
                <i class="fas fa-images me-2"></i>Home Page Banners
            </h5>
        </div>
        <div class="card-body py-3">
            <div class="banner-item border rounded p-3 mb-3" data-index="${bannerIndex}">
                <form action="{{ route('configurations.banner.update') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row align-items-end">
                        <div class="col-md-3">
                            <div class="banner-preview">
                                <div class="bg-light border rounded d-flex align-items-center justify-content-center"
                                    style="height: 80px;">
                                    <i class="fas fa-image text-muted"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div>
                                <label class="form-label fw-bold">Banner Image</label>
                                <input type="file" name="image" class="form-control banner-upload"
                                    accept="image/*" required>
                                @error('image')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-1 text-end">
                            <div class="">
                                <input type="submit" value="Upload" class="btn btn-primary">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="banner-container">
                <div class="banner-item border rounded p-3 mb-3">
                    <div class="d-flex align-items-center gap-3">
                        @forelse($banners as $index => $banner)
                            <div class="">
                                <div class="banner-preview">
                                    @if (isset($banner->image) && $banner->image)
                                        <a href="{{ asset('storage/banners/' . $banner->image) }}" target="_blank">
                                            <img src="{{ asset('storage/banners/' . $banner->image) }}"
                                                class="img-thumbnail w-100" style=" height: 80px; object-fit: cover;"
                                                alt="{{ $banner->image }}">
                                        </a>
                                        <div class=" mt-2">
                                            <a href="{{ route('configurations.banner.remove', $banner->id) }}"
                                                class="btn btn-danger">Remove</a>
                                        </div>
                                    @else
                                        <div class="bg-light border rounded d-flex align-items-center justify-content-center"
                                            style="height: 80px;">
                                            <i class="fas fa-image text-muted"></i>
                                        </div>
                                    @endif
                                </div>
                            </div>

                        @empty
                            <!-- Empty state will be handled by JavaScript -->
                        @endforelse
                    </div>
                </div>

            </div>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted">
                    <small><i class="fas fa-info-circle me-1"></i>Recommended size: 1920x600px</small>
                </div>
            </div>

            <div class="alert alert-info mt-3">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Note:</strong> Banners will be displayed in the home page. You can upload multiple
                banners and set their status to active/inactive.
            </div>
        </div>
    </div>
    </div>
    <div class="mt-4">
        <form method="POST" action="{{ route('configurations.update', ['id' => $config->id]) }}"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')



            <!-- Payment Configuration Section -->
            <div class="card shadow-sm mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>Payment Configuration
                    </h5>
                </div>
                <div class="card-body py-3">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="">
                                <label class="form-label fw-bold" for="paymeny_options">Payment Options</label>
                                <input id="paymeny_options" name="paymeny_options"
                                    class="form-control @error('paymeny_options') is-invalid @enderror"
                                    placeholder="e.g., Cash on Delivery, Credit on Delivery, Bank Transfer"
                                    value="{{ old('paymeny_options', $config->paymeny_options ?? '') }}">
                                <div class="form-text">Separate multiple options with commas.</div>
                                @error('paymeny_options')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="">
                                <label class="form-label fw-bold" for="currancy">Currency</label>
                                <select id="currancy" name="currancy"
                                    class="form-select @error('currancy') is-invalid @enderror" required>
                                    <option value="">-- Select Currency --</option>
                                    @php
                                        $allCurrencies = [
                                            'AED' => 'United Arab Emirates Dirham',
                                            'AFN' => 'Afghan Afghani',
                                            'ALL' => 'Albanian Lek',
                                            'AMD' => 'Armenian Dram',
                                            'ANG' => 'Netherlands Antillean Guilder',
                                            'AOA' => 'Angolan Kwanza',
                                            'ARS' => 'Argentine Peso',
                                            'AUD' => 'Australian Dollar',
                                            'AWG' => 'Aruban Florin',
                                            'AZN' => 'Azerbaijani Manat',
                                            'BAM' => 'Bosnia-Herzegovina Convertible Mark',
                                            'BBD' => 'Barbadian Dollar',
                                            'BDT' => 'Bangladeshi Taka',
                                            'BGN' => 'Bulgarian Lev',
                                            'BHD' => 'Bahraini Dinar',
                                            'BIF' => 'Burundian Franc',
                                            'BMD' => 'Bermudian Dollar',
                                            'BND' => 'Brunei Dollar',
                                            'BOB' => 'Bolivian Boliviano',
                                            'BRL' => 'Brazilian Real',
                                            'BSD' => 'Bahamian Dollar',
                                            'BTN' => 'Bhutanese Ngultrum',
                                            'BWP' => 'Botswana Pula',
                                            'BYN' => 'Belarusian Ruble',
                                            'BZD' => 'Belize Dollar',
                                            'CAD' => 'Canadian Dollar',
                                            'CDF' => 'Congolese Franc',
                                            'CHF' => 'Swiss Franc',
                                            'CLP' => 'Chilean Peso',
                                            'CNY' => 'Chinese Yuan',
                                            'COP' => 'Colombian Peso',
                                            'CRC' => 'Costa Rican Colón',
                                            'CUC' => 'Cuban Convertible Peso',
                                            'CUP' => 'Cuban Peso',
                                            'CVE' => 'Cape Verdean Escudo',
                                            'CZK' => 'Czech Koruna',
                                            'DJF' => 'Djiboutian Franc',
                                            'DKK' => 'Danish Krone',
                                            'DOP' => 'Dominican Peso',
                                            'DZD' => 'Algerian Dinar',
                                            'EGP' => 'Egyptian Pound',
                                            'ERN' => 'Eritrean Nakfa',
                                            'ETB' => 'Ethiopian Birr',
                                            'EUR' => 'Euro',
                                            'FJD' => 'Fijian Dollar',
                                            'FKP' => 'Falkland Islands Pound',
                                            'FOK' => 'Faroese Króna',
                                            'GBP' => 'British Pound Sterling',
                                            'GEL' => 'Georgian Lari',
                                            'GGP' => 'Guernsey Pound',
                                            'GHS' => 'Ghanaian Cedi',
                                            'GIP' => 'Gibraltar Pound',
                                            'GMD' => 'Gambian Dalasi',
                                            'GNF' => 'Guinean Franc',
                                            'GTQ' => 'Guatemalan Quetzal',
                                            'GYD' => 'Guyanese Dollar',
                                            'HKD' => 'Hong Kong Dollar',
                                            'HNL' => 'Honduran Lempira',
                                            'HRK' => 'Croatian Kuna',
                                            'HTG' => 'Haitian Gourde',
                                            'HUF' => 'Hungarian Forint',
                                            'IDR' => 'Indonesian Rupiah',
                                            'ILS' => 'Israeli New Shekel',
                                            'IMP' => 'Isle of Man Pound',
                                            'INR' => 'Indian Rupee',
                                            'IQD' => 'Iraqi Dinar',
                                            'IRR' => 'Iranian Rial',
                                            'ISK' => 'Icelandic Króna',
                                            'JEP' => 'Jersey Pound',
                                            'JMD' => 'Jamaican Dollar',
                                            'JOD' => 'Jordanian Dinar',
                                            'JPY' => 'Japanese Yen',
                                            'KES' => 'Kenyan Shilling',
                                            'KGS' => 'Kyrgyzstani Som',
                                            'KHR' => 'Cambodian Riel',
                                            'KID' => 'Kiribati Dollar',
                                            'KMF' => 'Comorian Franc',
                                            'KRW' => 'South Korean Won',
                                            'KWD' => 'Kuwaiti Dinar',
                                            'KYD' => 'Cayman Islands Dollar',
                                            'KZT' => 'Kazakhstani Tenge',
                                            'LAK' => 'Lao Kip',
                                            'LBP' => 'Lebanese Pound',
                                            'LKR' => 'Sri Lankan Rupee',
                                            'LRD' => 'Liberian Dollar',
                                            'LSL' => 'Lesotho Loti',
                                            'LYD' => 'Libyan Dinar',
                                            'MAD' => 'Moroccan Dirham',
                                            'MDL' => 'Moldovan Leu',
                                            'MGA' => 'Malagasy Ariary',
                                            'MKD' => 'Macedonian Denar',
                                            'MMK' => 'Burmese Kyat',
                                            'MNT' => 'Mongolian Tögrög',
                                            'MOP' => 'Macanese Pataca',
                                            'MRU' => 'Mauritanian Ouguiya',
                                            'MUR' => 'Mauritian Rupee',
                                            'MVR' => 'Maldivian Rufiyaa',
                                            'MWK' => 'Malawian Kwacha',
                                            'MXN' => 'Mexican Peso',
                                            'MYR' => 'Malaysian Ringgit',
                                            'MZN' => 'Mozambican Metical',
                                            'NAD' => 'Namibian Dollar',
                                            'NGN' => 'Nigerian Naira',
                                            'NIO' => 'Nicaraguan Córdoba',
                                            'NOK' => 'Norwegian Krone',
                                            'NPR' => 'Nepalese Rupee',
                                            'NZD' => 'New Zealand Dollar',
                                            'OMR' => 'Omani Rial',
                                            'PAB' => 'Panamanian Balboa',
                                            'PEN' => 'Peruvian Sol',
                                            'PGK' => 'Papua New Guinean Kina',
                                            'PHP' => 'Philippine Peso',
                                            'PKR' => 'Pakistani Rupee',
                                            'PLN' => 'Polish Złoty',
                                            'PYG' => 'Paraguayan Guaraní',
                                            'QAR' => 'Qatari Riyal',
                                            'RON' => 'Romanian Leu',
                                            'RSD' => 'Serbian Dinar',
                                            'RUB' => 'Russian Ruble',
                                            'RWF' => 'Rwandan Franc',
                                            'SAR' => 'Saudi Riyal',
                                            'SBD' => 'Solomon Islands Dollar',
                                            'SCR' => 'Seychellois Rupee',
                                            'SDG' => 'Sudanese Pound',
                                            'SEK' => 'Swedish Krona',
                                            'SGD' => 'Singapore Dollar',
                                            'SHP' => 'Saint Helena Pound',
                                            'SLE' => 'Sierra Leonean Leone',
                                            'SLL' => 'Sierra Leonean Leone (Old)',
                                            'SOS' => 'Somali Shilling',
                                            'SRD' => 'Surinamese Dollar',
                                            'SSP' => 'South Sudanese Pound',
                                            'STN' => 'São Tomé and Príncipe Dobra',
                                            'SYP' => 'Syrian Pound',
                                            'SZL' => 'Swazi Lilangeni',
                                            'THB' => 'Thai Baht',
                                            'TJS' => 'Tajikistani Somoni',
                                            'TMT' => 'Turkmenistani Manat',
                                            'TND' => 'Tunisian Dinar',
                                            'TOP' => 'Tongan Paʻanga',
                                            'TRY' => 'Turkish Lira',
                                            'TTD' => 'Trinidad and Tobago Dollar',
                                            'TVD' => 'Tuvaluan Dollar',
                                            'TWD' => 'New Taiwan Dollar',
                                            'TZS' => 'Tanzanian Shilling',
                                            'UAH' => 'Ukrainian Hryvnia',
                                            'UGX' => 'Ugandan Shilling',
                                            'USD' => 'United States Dollar',
                                            'UYU' => 'Uruguayan Peso',
                                            'UZS' => 'Uzbekistani Soʻm',
                                            'VES' => 'Venezuelan Bolívar',
                                            'VND' => 'Vietnamese Đồng',
                                            'VUV' => 'Vanuatu Vatu',
                                            'WST' => 'Samoan Tālā',
                                            'XAF' => 'Central African CFA Franc',
                                            'XCD' => 'East Caribbean Dollar',
                                            'XOF' => 'West African CFA Franc',
                                            'XPF' => 'CFP Franc',
                                            'YER' => 'Yemeni Rial',
                                            'ZAR' => 'South African Rand',
                                            'ZMW' => 'Zambian Kwacha',
                                            'ZWL' => 'Zimbabwean Dollar',
                                        ];
                                    @endphp

                                    @foreach ($allCurrencies as $code => $name)
                                        <option value="{{ $code }}"
                                            {{ old('currancy', $config->currancy ?? '') == $code ? 'selected' : '' }}>
                                            {{ $name }} ({{ $code }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('currancy')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Support Contact Section -->
            <div class="card shadow-sm mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-headset me-2"></i>Support Contact Information
                    </h5>
                </div>
                <div class="card-body py-3">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="support_email">Support Email</label>
                            <input id="support_email" name="support_email" type="email"
                                class="form-control @error('support_email') is-invalid @enderror"
                                placeholder="e.g., support@example.com"
                                value="{{ old('support_email', $config->support_email ?? '') }}">
                            @error('support_email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="support_phone">Support Phone</label>
                            <input id="support_phone" name="support_phone" type="text"
                                class="form-control @error('support_phone') is-invalid @enderror"
                                placeholder="e.g., +94770000000"
                                value="{{ old('support_phone', $config->support_phone ?? '') }}">
                            @error('support_phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="support_help_center">Help Center URL</label>
                        <input id="support_help_center" name="support_help_center" type="url"
                            class="form-control @error('support_help_center') is-invalid @enderror"
                            placeholder="e.g., https://help.example.com"
                            value="{{ old('support_help_center', $config->support_help_center ?? '') }}">
                        <div class="form-text">Enter the full URL to your help center or support documentation.</div>
                        @error('support_help_center')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Social Media Links Section -->
            <div class="card shadow-sm mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-share-alt me-2"></i>Social Media Links
                    </h5>
                </div>
                <div class="card-body py-3">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="facebook_url">
                                <i class="fab fa-facebook text-primary me-1"></i>Facebook
                            </label>
                            <input id="facebook_url" name="facebook_url" type="url"
                                class="form-control @error('facebook_url') is-invalid @enderror"
                                placeholder="https://facebook.com/yourpage"
                                value="{{ old('facebook_url', $config->facebook_url ?? '') }}">
                            @error('facebook_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="twitter_url">
                                <i class="fab fa-twitter text-info me-1"></i>Twitter/X
                            </label>
                            <input id="twitter_url" name="twitter_url" type="url"
                                class="form-control @error('twitter_url') is-invalid @enderror"
                                placeholder="https://twitter.com/yourhandle"
                                value="{{ old('twitter_url', $config->twitter_url ?? '') }}">
                            @error('twitter_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="instagram_url">
                                <i class="fab fa-instagram text-danger me-1"></i>Instagram
                            </label>
                            <input id="instagram_url" name="instagram_url" type="url"
                                class="form-control @error('instagram_url') is-invalid @enderror"
                                placeholder="https://instagram.com/yourhandle"
                                value="{{ old('instagram_url', $config->instagram_url ?? '') }}">
                            @error('instagram_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="linkedin_url">
                                <i class="fab fa-linkedin text-primary me-1"></i>LinkedIn
                            </label>
                            <input id="linkedin_url" name="linkedin_url" type="url"
                                class="form-control @error('linkedin_url') is-invalid @enderror"
                                placeholder="https://linkedin.com/company/yourcompany"
                                value="{{ old('linkedin_url', $config->linkedin_url ?? '') }}">
                            @error('linkedin_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="youtube_url">
                                <i class="fab fa-youtube text-danger me-1"></i>YouTube
                            </label>
                            <input id="youtube_url" name="youtube_url" type="url"
                                class="form-control @error('youtube_url') is-invalid @enderror"
                                placeholder="https://youtube.com/channel/yourchannel"
                                value="{{ old('youtube_url', $config->youtube_url ?? '') }}">
                            @error('youtube_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold" for="tiktok_url">
                                <i class="fab fa-tiktok text-dark me-1"></i>TikTok
                            </label>
                            <input id="tiktok_url" name="tiktok_url" type="url"
                                class="form-control @error('tiktok_url') is-invalid @enderror"
                                placeholder="https://tiktok.com/@yourhandle"
                                value="{{ old('tiktok_url', $config->tiktok_url ?? '') }}">
                            @error('tiktok_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Note:</strong> Leave any social media field empty if you don't want to display that
                        platform.
                    </div>
                </div>
            </div>

            <!-- Save Button Section -->
            <div class="d-flex justify-content-end align-items-center">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fas fa-save me-2"></i>Save Settings
                </button>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            let bannerIndex = {{ count($banners ?? []) }};

            // Auto-hide alerts after 5 seconds
            $(".bs-toast").each(function() {
                $(this).fadeTo(5000, 500).slideUp(500, function() {
                    $(this).remove();
                });
            });

            $(document).on('change', '.banner-upload', function() {
                const file = this.files[0];
                const preview = $(this).closest('.banner-item').find('.banner-preview');

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.html(
                            `<img src="${e.target.result}" class="img-thumbnail" style="max-width: 100%; height: 80px; object-fit: cover;" alt="Banner Preview">`
                        );
                    };
                    reader.readAsDataURL(file);
                }
            });

        });
    </script>
</x-app-layout>