@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 / Slider / 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">Slider</h5>
                    <p class="text-muted small mb-0 mt-1">Edit Slider</p>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('application.slider.edit.post', $slider->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="name"
                                value="{{ old('name', $slider->title) }}"
                                required>
                            @error('name')
                            <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">
                                Ganti Image (Opsional)
                            </label>
                            <input
                                type="file"
                                class="form-control form-control-lg shadow-none border-1"
                                name="image"
                                accept="image/*"
                                onchange="previewImage(event)">

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

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

                            <div class="mt-3" id="imagePreviewContainer">
                                <label class="form-label fw-medium text-dark mb-2">Preview:</label>
                                <div class="border rounded-3 p-2 bg-light" style="max-width: 400px;">
                                    <img
                                        id="imagePreview"
                                        src="{{ asset('storage/images/slider/'.$slider->image) }}"
                                        class="slider-img img-fluid rounded">
                                </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" {{ $slider->status == 1 ? 'selected' : '' }}>Aktif</option>
                                <option value="0" {{ $slider->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 previewImage(event) {
            const file = event.target.files[0];
            const preview = document.getElementById('imagePreview');

            if (file) {
                if (!file.type.match('image.*')) {
                    alert('File harus berupa gambar');
                    event.target.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        }
    </script>
@endsection