@extends('layouts.app')

@section('title', 'Pengaturan Slide Beranda')

@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1><i class="fas fa-images mr-2"></i>Slide Beranda</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.pengaturan.index') }}">Pengaturan</a></li>
                        <li class="breadcrumb-item active">Slide</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="fas fa-check-circle mr-1"></i>{{ session('success') }}
                </div>
            @endif

            <form action="{{ route('admin.pengaturan.slide.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="card">
                    <div class="card-header bg-primary d-flex justify-content-between align-items-center">
                        <h3 class="card-title"><i class="fas fa-sliders-h mr-2"></i>Kelola Slide</h3>
                        <div class="custom-control custom-switch">
                            <input type="checkbox" name="slide_aktif" class="custom-control-input" id="slide_aktif" value="1" {{ $slideAktif ? 'checked' : '' }}>
                            <label class="custom-control-label text-white" for="slide_aktif">Tampilkan Slide</label>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="slide-container">
                            @forelse($slides as $i => $slide)
                                <div class="slide-item card card-outline card-info mb-3" data-index="{{ $i }}">
                                    <div class="card-header">
                                        <h5 class="card-title"><i class="fas fa-image mr-1"></i>Slide {{ $i + 1 }}</h5>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool btn-remove-slide">
                                                <i class="fas fa-trash text-danger"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label>Judul Slide</label>
                                                    <input type="text" name="slide_judul[]" class="form-control" value="{{ $slide['judul'] ?? '' }}" placeholder="Judul slide...">
                                                </div>
                                                <div class="form-group">
                                                    <label>Deskripsi</label>
                                                    <textarea name="slide_deskripsi[]" class="form-control" rows="2" placeholder="Deskripsi singkat...">{{ $slide['deskripsi'] ?? '' }}</textarea>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Teks Tombol</label>
                                                            <input type="text" name="slide_tombol[]" class="form-control" value="{{ $slide['tombol'] ?? 'Selengkapnya' }}" placeholder="Teks tombol...">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Link Tombol</label>
                                                            <input type="text" name="slide_link[]" class="form-control" value="{{ $slide['link'] ?? '#' }}" placeholder="URL link...">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Gambar Slide</label>
                                                    <input type="file" name="slide_gambar[{{ $i }}]" class="form-control-file" accept="image/*">
                                                    <input type="hidden" name="slide_gambar_existing[{{ $i }}]" value="{{ $slide['gambar'] ?? '' }}">
                                                    @if(!empty($slide['gambar']))
                                                        @if(\Illuminate\Support\Facades\Storage::disk('public')->exists($slide['gambar']))
                                                            <img src="{{ asset('storage/' . $slide['gambar']) }}" class="img-thumbnail mt-2" style="max-height: 120px;">
                                                        @else
                                                            <img src="{{ asset($slide['gambar']) }}" class="img-thumbnail mt-2" style="max-height: 120px;">
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="slide-item card card-outline card-info mb-3" data-index="0">
                                    <div class="card-header">
                                        <h5 class="card-title"><i class="fas fa-image mr-1"></i>Slide 1</h5>
                                        <div class="card-tools">
                                            <button type="button" class="btn btn-tool btn-remove-slide">
                                                <i class="fas fa-trash text-danger"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label>Judul Slide</label>
                                                    <input type="text" name="slide_judul[]" class="form-control" placeholder="Judul slide...">
                                                </div>
                                                <div class="form-group">
                                                    <label>Deskripsi</label>
                                                    <textarea name="slide_deskripsi[]" class="form-control" rows="2" placeholder="Deskripsi singkat..."></textarea>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Teks Tombol</label>
                                                            <input type="text" name="slide_tombol[]" class="form-control" value="Selengkapnya" placeholder="Teks tombol...">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>Link Tombol</label>
                                                            <input type="text" name="slide_link[]" class="form-control" value="#" placeholder="URL link...">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Gambar Slide</label>
                                                    <input type="file" name="slide_gambar[0]" class="form-control-file" accept="image/*">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>

                        <button type="button" class="btn btn-outline-primary btn-block" id="btn-add-slide">
                            <i class="fas fa-plus mr-1"></i>Tambah Slide
                        </button>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i>Simpan Slide
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
    let slideIndex = document.querySelectorAll('.slide-item').length;

    document.getElementById('btn-add-slide').addEventListener('click', function() {
        const container = document.getElementById('slide-container');
        const newSlide = document.createElement('div');
        newSlide.className = 'slide-item card card-outline card-info mb-3';
        newSlide.dataset.index = slideIndex;
        newSlide.innerHTML = `
            <div class="card-header">
                <h5 class="card-title"><i class="fas fa-image mr-1"></i>Slide ${slideIndex + 1}</h5>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool btn-remove-slide">
                        <i class="fas fa-trash text-danger"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>Judul Slide</label>
                            <input type="text" name="slide_judul[]" class="form-control" placeholder="Judul slide...">
                        </div>
                        <div class="form-group">
                            <label>Deskripsi</label>
                            <textarea name="slide_deskripsi[]" class="form-control" rows="2" placeholder="Deskripsi singkat..."></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Teks Tombol</label>
                                    <input type="text" name="slide_tombol[]" class="form-control" value="Selengkapnya" placeholder="Teks tombol...">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Link Tombol</label>
                                    <input type="text" name="slide_link[]" class="form-control" value="#" placeholder="URL link...">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Gambar Slide</label>
                            <input type="file" name="slide_gambar[${slideIndex}]" class="form-control-file" accept="image/*">
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.appendChild(newSlide);
        slideIndex++;
        bindRemoveButtons();
    });

    function bindRemoveButtons() {
        document.querySelectorAll('.btn-remove-slide').forEach(btn => {
            btn.onclick = function() {
                const items = document.querySelectorAll('.slide-item');
                if (items.length > 1) {
                    this.closest('.slide-item').remove();
                    // Reindex
                    document.querySelectorAll('.slide-item').forEach((item, idx) => {
                        item.dataset.index = idx;
                        item.querySelector('.card-title').innerHTML = `<i class="fas fa-image mr-1"></i>Slide ${idx + 1}`;
                    });
                } else {
                    alert('Minimal harus ada 1 slide.');
                }
            };
        });
    }

    bindRemoveButtons();
</script>
@endpush