@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                {{-- Alert --}}
                @include('components.alert')
                
                <div class="card shadow-lg">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-images me-2 text-primary"></i>{{ $title_menu }}
                            </h5>
                        </div>
                        <p class="text-sm text-muted mb-0">Kelola slider untuk halaman Beranda, Karir, dan Magang</p>
                    </div>
                    <hr class="horizontal dark mt-0 mb-0">
                    
                    <div class="card-body">
                        <div class="row">
                            {{-- Left Panel: Slider Type Tabs --}}
                            <div class="col-lg-3 col-md-4 mb-4">
                                <div class="slider-type-panel">
                                    <h6 class="text-uppercase text-muted mb-3">
                                        <i class="fas fa-layer-group me-2"></i>Tipe Slider
                                    </h6>
                                    <div class="nav flex-column nav-pills slider-type-tabs" id="slider-type-tabs" role="tablist">
                                        @foreach($sliderTypes as $index => $type)
                                            <button class="nav-link slider-type-btn {{ $index == 0 ? 'active' : '' }}" 
                                                    id="tab-{{ $type->value }}" 
                                                    data-bs-toggle="pill" 
                                                    data-bs-target="#content-{{ $type->value }}" 
                                                    data-type="{{ $type->value }}"
                                                    type="button" 
                                                    role="tab">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span>
                                                        @if($type->value == 'beranda')
                                                            <i class="fas fa-home me-2"></i>
                                                        @elseif($type->value == 'karir')
                                                            <i class="fas fa-briefcase me-2"></i>
                                                        @elseif($type->value == 'magang')
                                                            <i class="fas fa-graduation-cap me-2"></i>
                                                        @endif
                                                        {{ $type->name }}
                                                    </span>
                                                    <span class="badge bg-primary slider-count" id="count-{{ $type->value }}">
                                                        {{ isset($sliders[$type->value]) ? $sliders[$type->value]->count() : 0 }}
                                                    </span>
                                                </div>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Right Panel: Slider Content --}}
                            <div class="col-lg-9 col-md-8">
                                <div class="tab-content slider-content-panel" id="slider-content">
                                    @foreach($sliderTypes as $index => $type)
                                        <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}" 
                                             id="content-{{ $type->value }}" 
                                             role="tabpanel">
                                            
                                            {{-- Add Slider Button --}}
                                            @if($authorize && $authorize->add == '1')
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <h6 class="mb-0">
                                                        <i class="fas fa-list-ol me-2"></i>
                                                        Daftar Slider {{ $type->name }}
                                                    </h6>
                                                    <button class="btn btn-primary btn-sm" 
                                                            onclick="openAddSliderModal('{{ $type->value }}', '{{ $type->name }}')">
                                                        <i class="fas fa-plus me-1"></i> Tambah Slider
                                                    </button>
                                                </div>
                                            @endif
                                            
                                            {{-- Slider Table with Drag & Drop --}}
                                            <div class="slider-table-wrapper">
                                                <div class="table-responsive">
                                                    <table class="table table-hover align-middle" id="table-{{ $type->value }}">
                                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                            <tr>
                                                                <th width="60" class="text-center">
                                                                    <i class="fas fa-sort text-muted"></i>
                                                                </th>
                                                                <th width="80" class="text-center">Urut</th>
                                                                <th>Preview Gambar</th>
                                                                <th width="100" class="text-center">Status</th>
                                                                <th width="120" class="text-center">Aksi</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="slider-sortable" data-type="{{ $type->value }}">
                                                            @if(isset($sliders[$type->value]) && $sliders[$type->value]->count() > 0)
                                                                @foreach($sliders[$type->value] as $slider)
                                                                    <tr class="slider-row {{ $slider->isactive == '0' ? 'inactive-row' : '' }}" 
                                                                        data-id="{{ $slider->id }}" 
                                                                        data-urut="{{ $slider->urut }}"
                                                                        @if($slider->isactive == '0')
                                                                            style="background-color: #ffcdd2; border-left: 4px solid #f44336;"
                                                                        @endif>
                                                                        <td class="text-center drag-handle">
                                                                            <i class="fas fa-grip-vertical cursor-grab" 
                                                                               @if($slider->isactive == '0') style="color: #c62828;" @endif></i>
                                                                        </td>
                                                                        <td class="text-center">
                                                                            <span class="badge bg-gradient-info urut-badge" 
                                                                                  @if($slider->isactive == '0') style="background-color: #f44336 !important; color: white !important;" @endif>
                                                                                {{ $slider->urut }}
                                                                            </span>
                                                                        </td>
                                                                        <td @if($slider->isactive == '0') style="color: #c62828;" @endif>
                                                                            <div class="d-flex align-items-center">
                                                                                @php
                                                                                    $thumbPath = public_path('storage/' . $slider->image . 'tumb.png');
                                                                                    $thumbSrc = file_exists($thumbPath) 
                                                                                        ? asset('storage/' . $slider->image . 'tumb.png')
                                                                                        : asset('storage/' . $slider->image);
                                                                                @endphp
                                                                                <img src="{{ $thumbSrc }}" 
                                                                                     alt="Slider {{ $slider->urut }}" 
                                                                                     class="slider-thumbnail me-3"
                                                                                     style="height: 50px; border-radius: 8px; cursor: pointer;"
                                                                                     onclick="openImagePreview('{{ asset('storage/' . $slider->image) }}')">
                                                                                <div>
                                                                                    <small class="d-block" @if($slider->isactive == '0') style="color: #d32f2f;" @else class="text-muted" @endif>
                                                                                        <i class="fas fa-clock me-1"></i>
                                                                                        {{ \Carbon\Carbon::parse($slider->created_at)->format('d M Y H:i') }}
                                                                                    </small>
                                                                                    @if($slider->user_create)
                                                                                        <small @if($slider->isactive == '0') style="color: #d32f2f;" @else class="text-muted" @endif>
                                                                                            <i class="fas fa-user me-1"></i>{{ $slider->user_create }}
                                                                                        </small>
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td class="text-center" @if($slider->isactive == '0') style="color: #c62828;" @endif>
                                                                            <div class="form-check form-switch d-flex justify-content-center">
                                                                                <input class="form-check-input status-toggle" 
                                                                                       type="checkbox" 
                                                                                       data-id="{{ $slider->id }}"
                                                                                       {{ $slider->isactive == '1' ? 'checked' : '' }}
                                                                                       {{ $authorize && $authorize->edit == '1' ? '' : 'disabled' }}>
                                                                            </div>
                                                                        </td>
                                                                        <td class="text-center" @if($slider->isactive == '0') style="color: #c62828;" @endif>
                                                                            @if($authorize && $authorize->delete == '1')
                                                                                <button class="btn btn-danger btn-sm px-3" 
                                                                                        onclick="deleteSlider({{ $slider->id }})"
                                                                                        title="Hapus Slider">
                                                                                    <i class="fas fa-trash"></i>
                                                                                </button>
                                                                            @endif
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                <tr class="empty-row">
                                                                    <td colspan="5" class="text-center py-5">
                                                                        <div class="empty-state">
                                                                            <i class="fas fa-images fa-3x text-muted mb-3"></i>
                                                                            <p class="text-muted mb-0">Belum ada slider untuk {{ $type->name }}</p>
                                                                            @if($authorize && $authorize->add == '1')
                                                                                <button class="btn btn-outline-primary btn-sm mt-3" 
                                                                                        onclick="openAddSliderModal('{{ $type->value }}', '{{ $type->name }}')">
                                                                                    <i class="fas fa-plus me-1"></i> Tambah Slider Pertama
                                                                                </button>
                                                                            @endif
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            
                                            {{-- Save Order Button --}}
                                            <div class="d-flex justify-content-end mt-3 save-order-wrapper" id="save-order-{{ $type->value }}" style="display: none !important;">
                                                <button class="btn btn-success btn-sm" onclick="saveOrder('{{ $type->value }}')">
                                                    <i class="fas fa-save me-1"></i> Simpan Urutan
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="d-flex align-items-center">
                            <code class="me-3">
                                <i class="fas fa-info-circle me-1"></i> 
                                Drag & drop baris untuk mengubah urutan slider
                            </code>
                            <code>
                                <i aria-hidden="true" style="color: #ffe9ed;" class="fas fa-circle"></i> 
                                Data tidak aktif
                            </code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Add Slider Modal --}}
    <div class="modal fade" id="addSliderModal" tabindex="-1" aria-labelledby="addSliderModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addSliderModalLabel">
                        <i class="fas fa-plus-circle me-2"></i>Tambah Slider
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addSliderForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="modal_slider_type" name="slider_type">
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Tipe Slider</label>
                            <p id="modal_slider_type_display" class="form-control-plaintext bg-light px-3 py-2 rounded"></p>
                        </div>
                        
                        <div class="mb-3">
                            <label for="modal_image" class="form-label fw-bold">
                                Gambar Slider <span class="text-danger">*</span>
                            </label>
                            <input type="file" class="form-control" id="modal_image" name="image" accept="image/png,image/jpeg,image/jpg" required>
                            <small class="text-muted">Format: PNG, JPG, JPEG. Maksimal 5MB. Resolusi disarankan: 1920x600px</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Preview</label>
                            <div id="image_preview" class="border rounded p-3 text-center" style="min-height: 150px; background: #f8f9fa;">
                                <i class="fas fa-image fa-3x text-muted"></i>
                                <p class="text-muted mb-0 mt-2">Preview gambar akan muncul di sini</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmitSlider">
                            <i class="fas fa-save me-1"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Image Preview Modal --}}
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Preview Gambar</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center p-0">
                    <img src="" id="previewImage" class="img-fluid w-100" style="border-radius: 0 0 8px 8px;">
                </div>
            </div>
        </div>
    </div>

@endsection

@push('css')
<style>
    .slider-type-panel {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e9ecef;
    }
    
    .slider-type-tabs .nav-link {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 8px;
        color: #344767;
        transition: all 0.3s ease;
    }
    
    .slider-type-tabs .nav-link:hover {
        background: #f8f9fa;
        border-color: #00b7bd;
        transform: translateX(5px);
    }
    
    .slider-type-tabs .nav-link.active {
        background: linear-gradient(135deg, #00b7bd 0%, #008b8f 100%);
        border-color: #00b7bd;
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 183, 189, 0.3);
    }
    
    .slider-type-tabs .nav-link.active .badge {
        background: rgba(255, 255, 255, 0.3) !important;
    }
    
    .slider-content-panel {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        border: 1px solid #e9ecef;
        min-height: 400px;
    }
    
    .slider-table-wrapper {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
    }
    
    tbody.slider-sortable .slider-row {
        transition: background-color 0.5s ease, transform 0.2s ease, border-left 0.5s ease;
        background: #fff;
        border-left: 4px solid transparent;
    }
    
    tbody.slider-sortable .slider-row:hover {
        background: #f1f5f9;
        transform: translateY(-2px);
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row {
        background-color: #ffcdd2 !important;
        border-left: 4px solid #f44336 !important;
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row:hover {
        background-color: #ef9a9a !important;
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row td {
        color: #c62828 !important;
        transition: color 0.5s ease;
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row .text-muted {
        color: #d32f2f !important;
        opacity: 1 !important;
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row .badge {
        background-color: #f44336 !important;
        color: white !important;
    }
    
    tbody.slider-sortable tr.slider-row.inactive-row .slider-thumbnail {
        opacity: 0.7;
        filter: grayscale(30%);
    }
    
    .slider-row.dragging {
        opacity: 0.5;
        background: #e3f2fd;
    }
    
    .slider-row.drag-over {
        border-top: 3px solid #00b7bd;
    }
    
    .drag-handle {
        cursor: grab;
    }
    
    .drag-handle:active {
        cursor: grabbing;
    }
    
    .cursor-grab {
        cursor: grab;
    }
    
    .cursor-grab:active {
        cursor: grabbing;
    }
    
    .slider-thumbnail {
        transition: transform 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .slider-thumbnail:hover {
        transform: scale(1.1);
    }
    
    .urut-badge {
        font-size: 14px;
        min-width: 30px;
    }
    
    .empty-state {
        padding: 40px;
    }
    
    .form-check-input:checked {
        background-color: #00b7bd;
        border-color: #00b7bd;
    }
    
    .slider-count {
        font-size: 12px;
        min-width: 24px;
    }
    
    /* Sortable placeholder */
    .sortable-ghost {
        opacity: 0.4;
        background: #e3f2fd;
    }
    
    .sortable-chosen {
        background: #fff3cd;
    }
    
    .order-changed {
        animation: highlight 0.5s ease;
    }
    
    @keyframes highlight {
        0% { background: #fff3cd; }
        100% { background: transparent; }
    }
</style>
@endpush

@push('js')
<!-- SortableJS for drag and drop -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    let orderChanged = {};
    
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Sortable for each slider type table
        document.querySelectorAll('.slider-sortable').forEach(function(tbody) {
            const type = tbody.dataset.type;
            
            new Sortable(tbody, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'sortable-ghost',
                chosenClass: 'sortable-chosen',
                onEnd: function(evt) {
                    updateUrutNumbers(type);
                    orderChanged[type] = true;
                    document.getElementById('save-order-' + type).style.display = 'flex';
                }
            });
        });
        
        // Handle status toggle
        document.querySelectorAll('.status-toggle').forEach(function(toggle) {
            toggle.addEventListener('change', function() {
                const sliderId = this.dataset.id;
                toggleSliderStatus(sliderId, this);
            });
        });
        
        // Handle image preview in add form
        document.getElementById('modal_image').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('image_preview').innerHTML = 
                        '<img src="' + e.target.result + '" class="img-fluid rounded" style="max-height: 200px;">';
                };
                reader.readAsDataURL(file);
            }
        });
        
        // Handle add slider form submit
        document.getElementById('addSliderForm').addEventListener('submit', function(e) {
            e.preventDefault();
            submitAddSlider();
        });
    });
    
    function updateUrutNumbers(type) {
        const tbody = document.querySelector('.slider-sortable[data-type="' + type + '"]');
        const rows = tbody.querySelectorAll('.slider-row');
        
        rows.forEach(function(row, index) {
            const newUrut = index + 1;
            row.dataset.urut = newUrut;
            row.querySelector('.urut-badge').textContent = newUrut;
            row.classList.add('order-changed');
            setTimeout(() => row.classList.remove('order-changed'), 500);
        });
    }
    
    function openAddSliderModal(type, typeName) {
        document.getElementById('modal_slider_type').value = type;
        document.getElementById('modal_slider_type_display').textContent = typeName;
        document.getElementById('addSliderForm').reset();
        document.getElementById('image_preview').innerHTML = 
            '<i class="fas fa-image fa-3x text-muted"></i><p class="text-muted mb-0 mt-2">Preview gambar akan muncul di sini</p>';
        
        new bootstrap.Modal(document.getElementById('addSliderModal')).show();
    }
    
    function submitAddSlider() {
        const form = document.getElementById('addSliderForm');
        const formData = new FormData(form);
        const submitBtn = document.getElementById('btnSubmitSlider');
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...';
        
        fetch('{{ url($url_menu) }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: data.message,
                    icon: 'success',
                    confirmButtonColor: '#00b7bd'
                }).then(() => {
                    location.reload();
                });
            } else {
                Swal.fire({
                    title: 'Gagal!',
                    text: data.message,
                    icon: 'error',
                    confirmButtonColor: '#00b7bd'
                });
            }
        })
        .catch(error => {
            Swal.fire({
                title: 'Error!',
                text: 'Terjadi kesalahan sistem',
                icon: 'error',
                confirmButtonColor: '#00b7bd'
            });
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="fas fa-save me-1"></i> Simpan';
        });
    }
    
    function saveOrder(type) {
        const tbody = document.querySelector('.slider-sortable[data-type="' + type + '"]');
        const rows = tbody.querySelectorAll('.slider-row');
        const orders = [];
        
        rows.forEach(function(row) {
            orders.push({
                id: parseInt(row.dataset.id),
                urut: parseInt(row.dataset.urut)
            });
        });
        
        fetch('{{ url($url_menu . "/ajax") }}', {
            method: 'POST',
            body: JSON.stringify({
                action: 'updateOrder',
                slider_type: type,
                orders: orders
            }),
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire({
                    title: 'Berhasil!',
                    text: data.message,
                    icon: 'success',
                    confirmButtonColor: '#00b7bd',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            } else {
                Swal.fire({
                    title: 'Gagal!',
                    text: data.message,
                    icon: 'error',
                    confirmButtonColor: '#00b7bd'
                });
            }
        })
        .catch(error => {
            Swal.fire({
                title: 'Error!',
                text: 'Terjadi kesalahan sistem',
                icon: 'error',
                confirmButtonColor: '#00b7bd'
            });
        });
    }
    
    function deleteSlider(id) {
        Swal.fire({
            title: 'Konfirmasi Hapus',
            text: 'Apakah Anda yakin ingin menghapus slider ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch('{{ url($url_menu . "/ajax") }}', {
                    method: 'POST',
                    body: JSON.stringify({ 
                        action: 'delete',
                        id: id 
                    }),
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: data.message,
                            icon: 'success',
                            confirmButtonColor: '#00b7bd'
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Gagal!',
                            text: data.message,
                            icon: 'error',
                            confirmButtonColor: '#00b7bd'
                        });
                    }
                });
            }
        });
    }
    
    function toggleSliderStatus(id, toggle) {
        const row = toggle.closest('tr');
        
        fetch('{{ url($url_menu . "/ajax") }}', {
            method: 'POST',
            body: JSON.stringify({ 
                action: 'toggle',
                id: id 
            }),
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Tambahkan animasi fade effect
                row.style.transition = 'opacity 0.3s ease';
                row.style.opacity = '0.5';
                
                setTimeout(() => {
                    if (data.newStatus === '1') {
                        // Aktifkan - hapus class dan reset inline style
                        row.classList.remove('inactive-row');
                        row.style.backgroundColor = '';
                        row.style.borderLeft = '';
                        
                        // Reset semua td text color
                        const cells = row.querySelectorAll('td');
                        cells.forEach(cell => {
                            cell.style.color = '';
                        });
                        
                        // Reset icon grip
                        const gripIcon = row.querySelector('.fa-grip-vertical');
                        if (gripIcon) {
                            gripIcon.parentElement.style.color = '';
                        }
                        
                        // Reset badge - hanya hapus inline style, biarkan class
                        const badge = row.querySelector('.badge');
                        if (badge) {
                            badge.style.backgroundColor = '';
                            badge.style.color = '';
                        }
                        
                        // Reset semua small text
                        const smallTexts = row.querySelectorAll('small');
                        smallTexts.forEach(small => {
                            small.style.color = '';
                        });
                    } else {
                        // Nonaktifkan - tambah class dan inline style untuk memastikan
                        row.classList.add('inactive-row');
                        row.style.backgroundColor = '#ffcdd2';
                        row.style.borderLeft = '4px solid #f44336';
                        
                        // Ubah text color semua kolom
                        const cells = row.querySelectorAll('td');
                        cells.forEach(cell => {
                            cell.style.color = '#c62828';
                        });
                        
                        // Ubah badge
                        const badge = row.querySelector('.badge');
                        if (badge) {
                            badge.style.backgroundColor = '#f44336';
                            badge.style.color = 'white';
                        }
                        
                        // Ubah small text color
                        const smallTexts = row.querySelectorAll('small');
                        smallTexts.forEach(small => {
                            small.style.color = '#d32f2f';
                        });
                    }
                    
                    row.style.opacity = '1';
                    
                    // Update count badge
                    updateSliderCounts();
                    
                    // Tampilkan notifikasi sukses kecil
                    const statusText = data.newStatus === '1' ? 'diaktifkan' : 'dinonaktifkan';
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    });
                    
                    Toast.fire({
                        icon: 'success',
                        title: 'Slider berhasil ' + statusText
                    });
                }, 200);
            } else {
                toggle.checked = !toggle.checked;
                Swal.fire({
                    title: 'Gagal!',
                    text: data.message,
                    icon: 'error',
                    confirmButtonColor: '#00b7bd'
                });
            }
        })
        .catch(error => {
            toggle.checked = !toggle.checked;
        });
    }
    
    function updateSliderCounts() {
        document.querySelectorAll('.slider-type-btn').forEach(function(btn) {
            const type = btn.dataset.type;
            const tbody = document.querySelector('.slider-sortable[data-type="' + type + '"]');
            const count = tbody.querySelectorAll('.slider-row').length;
            document.getElementById('count-' + type).textContent = count;
        });
    }
    
    function openImagePreview(src) {
        document.getElementById('previewImage').src = src;
        new bootstrap.Modal(document.getElementById('imagePreviewModal')).show();
    }
</script>
@endpush