@extends('layouts.saas')

@section('title', 'ল্যান্ডিং পেজ ম্যানেজমেন্ট')

@push('styles')
<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
    .tab-pills-custom .nav-link {
        color: #64748b;
        background: transparent;
        border: 1px solid transparent;
        transition: all 0.3s ease;
    }

    .tab-pills-custom .nav-link.active {
        background: linear-gradient(135deg, #22c55e, #8b5cf6);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.25);
    }

    .tab-pills-custom .nav-link:hover:not(.active) {
        background: #f1f5f9;
        color: #0f172a;
    }

    .hover-shadow {
        transition: all 0.3s ease;
    }

    .hover-shadow:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-0">

    <!-- হেডার ও অ্যাকশন -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
        <div>
            <h4 class="fw-bold mb-1 text-dark">
                <i class="fa-solid fa-sliders text-primary me-2"></i>ল্যান্ডিং পেজ ম্যানেজমেন্ট
            </h4>
            <p class="text-muted small mb-0">হোম পেজের হিরো সেকশন, ফিচারসমূহ এবং অন্যান্য প্রোডাক্ট একনজরে আপডেট করুন</p>
        </div>
        <div>
            <a href="{{ url('/') }}" target="_blank" class="btn btn-outline-primary rounded-3 px-3 shadow-sm">
                <i class="fa-solid fa-arrow-up-right-from-square me-1"></i> লাইভ ল্যান্ডিং পেজ দেখুন
            </a>
        </div>
    </div>

    <!-- ট্যাব মেনু -->
    <ul class="nav nav-pills tab-pills-custom mb-4 bg-white p-2 rounded-4 shadow-sm border" id="landingTab" role="tablist">
        <li class="nav-item">
            <button class="nav-link active fw-bold rounded-3 px-4 py-2" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-content" type="button">
                <i class="fa-solid fa-gear me-2"></i>হিরো ও সাইট সেটিংস
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link fw-bold rounded-3 px-4 py-2" id="features-tab" data-bs-toggle="tab" data-bs-target="#features-content" type="button">
                <i class="fa-solid fa-list-check me-2"></i>ফিচারসমূহ ({{ $features->count() }})
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link fw-bold rounded-3 px-4 py-2" id="products-tab" data-bs-toggle="tab" data-bs-target="#products-content" type="button">
                <i class="fa-solid fa-boxes-stacked me-2"></i>অন্যান্য প্রোডাক্ট ({{ $products->count() }})
            </button>
        </li>
    </ul>

    <!-- ট্যাব কন্টেন্ট -->
    <div class="tab-content" id="landingTabContent">

        <!-- ==================== ১. সেটিংস ও হিরো সেকশন ==================== -->
        <div class="tab-pane fade show active" id="settings-content">
            <div class="card border-0 shadow-sm rounded-4 p-4">
                <h5 class="fw-bold text-dark mb-3">
                    <i class="fa-solid fa-wand-magic-sparkles text-warning me-2"></i>হিরো ও সাধারণ তথ্য
                </h5>
                
                <form action="{{ route('superadmin.landing-page.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small text-muted">Hero Badge Text</label>
                            <input type="text" name="hero_badge" class="form-control rounded-3" 
                                   value="{{ old('hero_badge', $settings->hero_badge ?? '') }}" 
                                   placeholder="e.g. 🚀 ১৪ দিনের ফ্রি ট্রায়াল">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold small text-muted">WhatsApp মোবাইল নম্বর *</label>
                            <input type="text" name="whatsapp_number" class="form-control rounded-3" 
                                   value="{{ old('whatsapp_number', $settings->whatsapp_number ?? '') }}" 
                                   placeholder="e.g. 8801700000000" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold small text-muted">Hero Title *</label>
                            <input type="text" name="hero_title" class="form-control rounded-3" 
                                   value="{{ old('hero_title', $settings->hero_title ?? '') }}" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold small text-muted">Hero Subtitle *</label>
                            <textarea name="hero_subtitle" class="form-control rounded-3" rows="3" required>{{ old('hero_subtitle', $settings->hero_subtitle ?? '') }}</textarea>
                        </div>

                        <!-- হিরো ইমেজ আপলোড -->
                        <div class="col-12">
                            <label class="form-label fw-semibold small text-muted">Hero Image (Optional)</label>
                            <input type="file" name="hero_image" class="form-control rounded-3" accept="image/*">
                            
                            @if(!empty($settings->hero_image))
                                <div class="mt-2">
                                    <small class="text-muted d-block mb-1">বর্তমান ছবি:</small>
                                    <img src="{{ asset('storage/' . $settings->hero_image) }}" alt="Hero Image" 
                                         class="img-thumbnail rounded-3 shadow-sm" style="max-height: 120px;">
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="mt-4 text-end">
                        <button type="submit" class="btn btn-primary rounded-3 px-4 shadow-sm">
                            <i class="fa-solid fa-floppy-disk me-1"></i> সেটিংস সেভ করুন
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- ==================== ২. ফিচার সেকশন ==================== -->
       <div class="tab-pane fade" id="features-content">
            <div class="row g-4">
                
                <!-- ফিচার ইনপুট ফরম (নতুন যোগ করার জন্য) -->
                <div class="col-lg-5">
                    <div class="card border-0 shadow-sm rounded-4 p-4">
                        <h5 class="fw-bold text-dark mb-3">
                            <i class="fa-solid fa-plus-circle text-primary me-2"></i>নতুন ফিচার যোগ করুন
                        </h5>
                        
                        <form action="{{ route('superadmin.features.store') }}" method="POST" enctype="multipart/form-data" id="featureForm">
                            @csrf
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">ফিচারের নাম *</label>
                                <input type="text" name="title" class="form-control rounded-3" 
                                       value="{{ old('title') }}" required 
                                       placeholder="e.g. শিক্ষার্থী ব্যবস্থাপনা">
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">ফিচার বর্ণনা *</label>
                                <textarea name="description" class="form-control rounded-3" rows="2" required 
                                          placeholder="ফিচারের সংক্ষিপ্ত বিবরণ...">{{ old('description') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">
                                    সাব-ফিচার বা লিস্ট (প্রতিটি নতুন লাইনে লিখুন)
                                </label>
                                <textarea name="sub_features" class="form-control rounded-3" rows="3" 
                                          placeholder="অনলাইন ভর্তি&#10;ডিজিটাল প্রোফাইল&#10;আইডি কার্ড জেনারেশন">{{ old('sub_features') }}</textarea>
                                <small class="text-muted d-block mt-1">
                                    <i class="fa-solid fa-info-circle me-1"></i>
                                    প্রতিটি পয়েন্ট নতুন লাইনে (Enter চেপে) লিখুন।
                                </small>
                            </div>

                            <!-- ICON TEXT INPUT (Add Form) -->
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">
                                    ফিচার আইকন ক্লাস (Bootstrap Icon) *
                                </label>
                                <input type="text" 
                                       name="icon" 
                                       class="form-control rounded-3" 
                                       value="{{ old('icon', 'bi bi-people-fill') }}" 
                                       placeholder="e.g. bi bi-people-fill"
                                       required>
                                <small class="text-muted d-block mt-1">
                                    <i class="fa-solid fa-info-circle me-1"></i>
                                    Bootstrap Icons ক্লাস লিখুন (যেমন: <code>bi bi-people-fill</code>, <code>bi bi-book</code>, <code>bi bi-cash-coin</code>)
                                </small>
                            </div>

                            <div class="row g-2 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small text-muted">ব্যাকগ্রাউন্ড কালার</label>
                                    <select name="bg_color" class="form-select rounded-3">
                                        <option value="bg-primary" {{ old('bg_color') == 'bg-primary' ? 'selected' : '' }}>🔵 Primary (Blue)</option>
                                        <option value="bg-success" {{ old('bg_color') == 'bg-success' ? 'selected' : '' }}>🟢 Success (Green)</option>
                                        <option value="bg-info" {{ old('bg_color') == 'bg-info' ? 'selected' : '' }}>🔷 Info (Light Blue)</option>
                                        <option value="bg-warning" {{ old('bg_color') == 'bg-warning' ? 'selected' : '' }}>🟡 Warning (Yellow)</option>
                                        <option value="bg-danger" {{ old('bg_color') == 'bg-danger' ? 'selected' : '' }}>🔴 Danger (Red)</option>
                                        <option value="bg-dark" {{ old('bg_color') == 'bg-dark' ? 'selected' : '' }}>⚫ Dark</option>
                                        <option value="bg-purple" {{ old('bg_color') == 'bg-purple' ? 'selected' : '' }}>🟣 Purple</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small text-muted">সিরিয়াল নম্বর (Sort Order)</label>
                                    <input type="number" name="sort_order" class="form-control rounded-3" 
                                           value="{{ old('sort_order', 0) }}" min="0">
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_active" 
                                           id="is_active" value="1" {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold small text-muted" for="is_active">
                                        ওয়েবসাইটে সক্রিয় রাখুন (Active)
                                    </label>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary rounded-3 w-100 shadow-sm">
                                <i class="fa-solid fa-plus me-1"></i> ফিচার যুক্ত করুন
                            </button>
                        </form>
                    </div>
                </div>

                <!-- ফিচার কার্ড তালিকা -->
                <div class="col-lg-7">
                    @if($features->count() > 0)
                        <div class="row g-3">
                            @foreach($features as $feature)
                                <div class="col-12">
                                    <div class="card border-0 shadow-sm rounded-4 p-3 hover-shadow">
                                        <div class="d-flex align-items-start justify-content-between gap-3">
                                            <div class="d-flex align-items-start gap-3">
                                                <div class="rounded-3 p-2 {{ $feature->bg_color ?? 'bg-primary' }} text-white d-flex align-items-center justify-content-center flex-shrink-0" 
                                                     style="width: 54px; height: 54px;">
                                                    @if(!empty($feature->icon))
                                                        <i class="{{ $feature->icon }} fs-4"></i>
                                                    @else
                                                        <i class="fa-solid fa-layer-group fs-4"></i>
                                                    @endif
                                                </div>

                                                <div>
                                                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                                                        <h6 class="fw-bold text-dark mb-0">{{ $feature->title }}</h6>
                                                        
                                                        @if($feature->is_active)
                                                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill small">Active</span>
                                                        @else
                                                            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill small">Inactive</span>
                                                        @endif

                                                        <span class="badge bg-light text-dark border rounded-pill small" title="সিরিয়াল নম্বর">
                                                            #{{ $feature->sort_order }}
                                                        </span>

                                                        @if($feature->icon)
                                                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill small">
                                                                <i class="{{ $feature->icon }} me-1"></i>{{ $feature->icon }}
                                                            </span>
                                                        @endif
                                                    </div>

                                                    <p class="text-muted small mb-2">{{ str($feature->description)->limit(90) }}</p>

                                                    @if($feature->sub_features)
                                                        <div class="mt-2 pt-2 border-top">
                                                            <small class="fw-semibold text-muted d-block mb-1">সাব-ফিচারসমূহ:</small>
                                                            <ul class="list-unstyled mb-0 small text-secondary">
                                                                @foreach(explode("\n", $feature->sub_features) as $sub_feature)
                                                                    @if(trim($sub_feature))
                                                                        <li class="mb-1">
                                                                            <i class="fa-solid fa-check text-success me-1 small"></i> {{ trim($sub_feature) }}
                                                                        </li>
                                                                    @endif
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- Action Buttons -->
                                            <div class="d-flex align-items-center gap-1">
                                                <button type="button" 
                                                        class="btn btn-sm btn-outline-primary rounded-3" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#editFeatureModal{{ $feature->id }}" 
                                                        title="এডিট করুন">
                                                    <i class="fa-solid fa-pen-to-square"></i>
                                                </button>

                                                <form action="{{ route('superadmin.features.destroy', $feature->id) }}" method="POST" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" class="btn btn-sm btn-outline-danger rounded-3 delete-btn" title="ডিলিট করুন">
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Feature Modal -->
                                <div class="modal fade" id="editFeatureModal{{ $feature->id }}" tabindex="-1" aria-labelledby="editFeatureModalLabel{{ $feature->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content border-0 rounded-4 shadow">
                                            <div class="modal-header border-0 pb-0">
                                                <h5 class="modal-title fw-bold text-dark" id="editFeatureModalLabel{{ $feature->id }}">
                                                    <i class="fa-solid fa-pen-to-square text-primary me-2"></i>ফিচার আপডেট করুন
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            
                                            <form action="{{ route('superadmin.features.update', $feature->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                
                                                <div class="modal-body p-4">
                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">ফিচারের নাম *</label>
                                                        <input type="text" name="title" class="form-control rounded-3" value="{{ old('title', $feature->title) }}" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">ফিচার বর্ণনা *</label>
                                                        <textarea name="description" class="form-control rounded-3" rows="3" required>{{ old('description', $feature->description) }}</textarea>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">সাব-ফিচার বা লিস্ট (প্রতিটি নতুন লাইনে)</label>
                                                        <textarea name="sub_features" class="form-control rounded-3" rows="3">{{ old('sub_features', $feature->sub_features) }}</textarea>
                                                    </div>

                                                    <!-- ICON TEXT INPUT (Edit Modal) -->
                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">
                                                            ফিচার আইকন ক্লাস (Bootstrap Icon) *
                                                        </label>
                                                        <input type="text" 
                                                               name="icon" 
                                                               class="form-control rounded-3" 
                                                               value="{{ old('icon', $feature->icon ?? 'bi bi-people-fill') }}" 
                                                               placeholder="e.g. bi bi-people-fill"
                                                               required>
                                                        <small class="text-muted d-block mt-1">
                                                            <i class="fa-solid fa-info-circle me-1"></i>
                                                            Bootstrap Icons ক্লাস লিখুন (যেমন: <code>bi bi-people-fill</code>, <code>bi bi-book</code>, <code>bi bi-cash-coin</code>)
                                                        </small>
                                                    </div>

                                                    <div class="row g-2 mb-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label fw-semibold small text-muted">ব্যাকগ্রাউন্ড কালার</label>
                                                            <select name="bg_color" class="form-select rounded-3">
                                                                <option value="bg-primary" {{ old('bg_color', $feature->bg_color) == 'bg-primary' ? 'selected' : '' }}>🔵 Primary</option>
                                                                <option value="bg-success" {{ old('bg_color', $feature->bg_color) == 'bg-success' ? 'selected' : '' }}>🟢 Success</option>
                                                                <option value="bg-info" {{ old('bg_color', $feature->bg_color) == 'bg-info' ? 'selected' : '' }}>🔷 Info</option>
                                                                <option value="bg-warning" {{ old('bg_color', $feature->bg_color) == 'bg-warning' ? 'selected' : '' }}>🟡 Warning</option>
                                                                <option value="bg-danger" {{ old('bg_color', $feature->bg_color) == 'bg-danger' ? 'selected' : '' }}>🔴 Danger</option>
                                                                <option value="bg-dark" {{ old('bg_color', $feature->bg_color) == 'bg-dark' ? 'selected' : '' }}>⚫ Dark</option>
                                                                <option value="bg-purple" {{ old('bg_color', $feature->bg_color) == 'bg-purple' ? 'selected' : '' }}>🟣 Purple</option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <label class="form-label fw-semibold small text-muted">সিরিয়াল নম্বর</label>
                                                            <input type="number" name="sort_order" class="form-control rounded-3" value="{{ old('sort_order', $feature->sort_order) }}" min="0">
                                                        </div>
                                                    </div>

                                                    <div class="mb-3">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active_{{ $feature->id }}" value="1" {{ old('is_active', $feature->is_active) ? 'checked' : '' }}>
                                                            <label class="form-check-label fw-semibold small text-muted" for="is_active_{{ $feature->id }}">
                                                                ওয়েবসাইটে সক্রিয় রাখুন (Active)
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-0 pt-0">
                                                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">বাতিল</button>
                                                    <button type="submit" class="btn btn-primary rounded-3">পরিবর্তন সেভ করুন</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="card border-0 shadow-sm rounded-4 p-5 text-center">
                            <i class="fa-solid fa-folder-open text-muted display-6 mb-2"></i>
                            <h6 class="fw-bold text-dark">কোনো ফিচার যোগ করা হয়নি</h6>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- ==================== ৩. প্রোডাক্ট সেকশন ==================== -->
        <div class="tab-pane fade" id="products-content">
            <div class="row g-4">
                <div class="col-lg-5">
                    <div class="card border-0 shadow-sm rounded-4 p-4">
                        <h5 class="fw-bold text-dark mb-3">
                            <i class="fa-solid fa-box-open text-success me-2"></i>নতুন প্রোডাক্ট যোগ করুন
                        </h5>
                        <form action="{{ route('superadmin.products.store') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">প্রোডাক্টের নাম *</label>
                                <input type="text" name="title" class="form-control rounded-3" required 
                                       placeholder="e.g. উপজেলা শিক্ষক সমিতি সফটওয়্যার">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">প্রোডাক্ট বিবরণ *</label>
                                <textarea name="description" class="form-control rounded-3" rows="3" required 
                                          placeholder="সংক্ষিপ্ত বিবরণ..."></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">Icon Class (FontAwesome / Bootstrap) *</label>
                                <input type="text" name="icon" class="form-control rounded-3" 
                                       placeholder="e.g. fa-journal-check অথবা bi-journal-check" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold small text-muted">প্রোডাক্ট লিংক (Optional)</label>
                                <input type="url" name="link" class="form-control rounded-3" 
                                       placeholder="https://example.com">
                            </div>
                            <button type="submit" class="btn btn-primary rounded-3 w-100 shadow-sm text-white">
                                <i class="fa-solid fa-plus me-1"></i> প্রোডাক্ট যুক্ত করুন
                            </button>
                        </form>
                    </div>
                </div>

                <div class="col-lg-7">
                    @if($products->count() > 0)
                        <div class="row g-3">
                            @foreach($products as $product)
                                <div class="col-12">
                                    <div class="card border-0 shadow-sm rounded-4 p-3 hover-shadow">
                                        <div class="d-flex align-items-center justify-content-between gap-3">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="rounded-3 p-2 bg-success text-white d-flex align-items-center justify-content-center flex-shrink-0" 
                                                     style="width: 48px; height: 48px;">
                                                    <i class="{{ $product->icon ?? 'fa-solid fa-box' }} fs-5"></i>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold text-dark mb-1">{{ $product->title }}</h6>
                                                    <p class="text-muted small mb-0">{{ str($product->description)->limit(80) }}</p>
                                                    @if($product->link)
                                                        <a href="{{ $product->link }}" target="_blank" 
                                                           class="small text-primary text-decoration-none mt-1 d-inline-block">
                                                            <i class="fa-solid fa-link me-1"></i>ভিজিট লিংক
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- Action Buttons (Edit + Delete) -->
                                            <div class="d-flex align-items-center gap-1">
                                                <!-- Edit Button -->
                                                <button type="button" 
                                                        class="btn btn-sm btn-outline-primary rounded-3" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#editProductModal{{ $product->id }}" 
                                                        title="এডিট করুন">
                                                    <i class="fa-solid fa-pen-to-square"></i>
                                                </button>

                                                <!-- Delete Form -->
                                                <form action="{{ route('superadmin.products.destroy', $product->id) }}" method="POST" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" class="btn btn-sm btn-outline-danger rounded-3 delete-btn" title="ডিলিট করুন">
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Product Modal -->
                                <div class="modal fade" id="editProductModal{{ $product->id }}" tabindex="-1" aria-labelledby="editProductModalLabel{{ $product->id }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content border-0 rounded-4 shadow">
                                            <div class="modal-header border-0 pb-0">
                                                <h5 class="modal-title fw-bold text-dark" id="editProductModalLabel{{ $product->id }}">
                                                    <i class="fa-solid fa-pen-to-square text-success me-2"></i>প্রোডাক্ট আপডেট করুন
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            
                                            <form action="{{ route('superadmin.products.update', $product->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                
                                                <div class="modal-body p-4">
                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">প্রোডাক্টের নাম *</label>
                                                        <input type="text" name="title" class="form-control rounded-3" 
                                                               value="{{ old('title', $product->title) }}" required>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">প্রোডাক্ট বিবরণ *</label>
                                                        <textarea name="description" class="form-control rounded-3" rows="3" required>{{ old('description', $product->description) }}</textarea>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">
                                                            Icon Class (FontAwesome / Bootstrap) *
                                                        </label>
                                                        <input type="text" name="icon" class="form-control rounded-3" 
                                                               value="{{ old('icon', $product->icon ?? 'fa-solid fa-box') }}" 
                                                               placeholder="e.g. fa-journal-check অথবা bi-journal-check" required>
                                                        <small class="text-muted d-block mt-1">
                                                            <i class="fa-solid fa-info-circle me-1"></i>
                                                            FontAwesome: <code>fa-solid fa-box</code> | Bootstrap: <code>bi bi-box</code>
                                                        </small>
                                                    </div>

                                                    <div class="mb-3">
                                                        <label class="form-label fw-semibold small text-muted">প্রোডাক্ট লিংক (Optional)</label>
                                                        <input type="url" name="link" class="form-control rounded-3" 
                                                               value="{{ old('link', $product->link) }}"
                                                               placeholder="https://example.com">
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-0 pt-0">
                                                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">বাতিল</button>
                                                    <button type="submit" class="btn btn-success rounded-3 text-white">পরিবর্তন সেভ করুন</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="card border-0 shadow-sm rounded-4 p-5 text-center">
                            <i class="fa-solid fa-boxes-stacked text-muted display-6 mb-2"></i>
                            <h6 class="fw-bold text-dark">কোনো প্রোডাক্ট যোগ করা হয়নি</h6>
                        </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>

@push('scripts')
<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // =========================================================
    // 🗑️ DELETE CONFIRMATION (SweetAlert2)
    // =========================================================
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            const form = this.closest('.delete-form');

            Swal.fire({
                title: 'আপনি কি নিশ্চিত?',
                text: "এটি মুছে ফেলা হলে আর পুনরায় উদ্ধার করা যাবে না!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'হ্যাঁ, ডিলিট করুন!',
                cancelButtonText: 'বাতিল'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });

});
</script>
@endpush
@endsection