@extends('master')

@section('style')
    <style>
        .slider-img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
    </style>
@endsection

@section('content')
    <div class="mb-4"></div>
    <div class="container-fluid px-4 mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Aplikasi / Artikel / Edit</div>
            </div>
        </div>
    </div>

    <div class="body grow">
        <div class="container-lg px-4 py-4">
            <div class="card border-0 shadow-sm rounded-3 h-100">

                <div class="card-header bg-white border-0 pt-4 px-4 pb-3">
                    <h5 class="mb-0 fw-semibold text-dark">Artikel</h5>
                    <p class="text-muted small mb-0 mt-1">Edit Artikel</p>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('application.article.edit.post', $article->id) }}" method="POST" enctype="multipart/form-data">
                        {{csrf_field()}}

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2">
                                Judul <span class="text-danger">*</span>
                            </label>
                            <input
                                type="text"
                                class="form-control form-control-lg shadow-none border-1"
                                name="title"
                                value="{{ old('title', $article->title) }}"
                                required>
                            @error('title')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2" for="name">
                                Deskripsi <span class="text-danger">*</span>
                            </label>
                            <textarea
                                class="form-control form-control-lg shadow-none border"
                                id="desc"
                                name="desc"
                                placeholder="Berikan Deskripsi"
                                rows="3"
                                required>{{ old('desc', $article->desc) }}</textarea>
                            @error('desc')
                            <div class="text-danger small mt-2">
                                <i class="bi bi-exclamation-circle me-1"></i> {{ $message }}
                            </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2">
                                Images (Opsional) <span class="text-danger">*</span>
                            </label>
                            <input
                                type="file"
                                class="form-control form-control-lg shadow-none border-1"
                                id="images"
                                name="images[]"
                                accept="image/*"
                                onchange="previewMultipleImages(event)"
                                multiple>

                            <small class="text-muted">Kosongkan jika tidak ingin menambah/mengganti gambar.</small>

                            @error('images')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                            @enderror

                            <div class="mt-4" id="multiImagePreviewContainer">
                                <label class="form-label fw-medium text-dark mb-2">Preview Gambar Saat Ini & Baru:</label>
                                <div id="previewList" class="row g-3">

                                    @foreach($article->images as $img)
                                        <div class="col-md-3 mb-3">
                                            <div class="card h-100">
                                                <img src="{{ asset('storage/images/article/'.$img->image) }}" class="card-img-top slider-img">

                                                <div class="card-footer bg-white border-0">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="remove_images[]" value="{{ $img->id }}" id="img{{ $img->id }}">
                                                        <label class="form-check-label text-danger small" for="img{{ $img->id }}">
                                                            Hapus
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

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

                        <div class="mb-4">
                            <label class="form-label fw-medium text-dark mb-2">
                                Status <span class="text-danger">*</span>
                            </label>
                            <select class="form-select form-select-lg shadow-none border" name="status" required>
                                <option value="1" {{ $article->status == 1 ? 'selected' : '' }}>Aktif</option>
                                <option value="0" {{ $article->status == 0 ? 'selected' : '' }}>Tidak Aktif</option>
                            </select>
                            @error('status')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex gap-2 justify-content-end pt-3">
                            <button type="submit" class="btn btn-lg btn-primary px-4">
                                Update
                            </button>
                        </div>

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

    <script>
        function previewMultipleImages(event) {
            const files = event.target.files;
            const previewList = document.getElementById('previewList');

            const newPreviews = previewList.querySelectorAll('.new-image-preview');
            newPreviews.forEach(el => el.remove());

            if (files) {
                Array.from(files).forEach(file => {
                    if (!file.type.match('image.*')) return;

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const col = document.createElement('div');
                        col.className = 'col-md-3 col-6 new-image-preview'; // Beri class pembeda
                        col.innerHTML = `
                    <div class="card h-100 border-primary shadow-sm">
                        <img src="${e.target.result}" class="card-img-top slider-img" style="height: 120px; object-fit: cover;">
                        <div class="card-footer p-1 text-center bg-primary text-white border-0">
                            <small style="font-size: 10px;">Baru: ${file.name}</small>
                        </div>
                    </div>
                `;
                        previewList.appendChild(col);
                    }
                    reader.readAsDataURL(file);
                });
            }
        }
    </script>
@endsection