@extends('layouts.backoffice.index', ['title' => 'Slider'])

@section('main')
<section class="section">
    <div class="card shadow">
        <div class="card-header">
            <div class="clearfix w-100">
                <div class="float-left">
                    <h5><b>Slider</b></h5>
                </div>
                <div class="float-right">
                    <a href="#" data-toggle="modal" data-target="#modal-add" class="btn btn-primary">
                        <i class="fa fa-plus"></i> Tambah Data
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row">
                @forelse ($sliders as $slider)
                    <div class="col-md-6">
                        <div class="card shadow-sm">
                            <img src="{{ asset('storage/' . $slider->media_path) }}"
                                 class="w-100"
                                 style="height:250px; object-fit:cover;">

                            <div class="card-body p-3">
                                @if ($slider->status == 'publish')
                                    <span class="badge badge-success">Publish</span>
                                @else
                                    <span class="badge badge-danger">Draft</span>
                                @endif

                                <div class="float-right">
                                    <button class="btn btn-warning btn-edit"
                                        data-id="{{ $slider->id }}"
                                        data-status="{{ $slider->status }}"
                                        data-media="{{ $slider->media_path }}"
                                        data-toggle="modal" data-target="#modal-edit">
                                        Edit
                                    </button>

                                    <button class="btn btn-danger btn-delete"
                                        data-id="{{ $slider->id }}"
                                        data-toggle="modal" data-target="#modal-delete">
                                        Hapus
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-12 text-center">
                        <div class="alert alert-warning">Data Tidak Ditemukan</div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</section>

{{-- ================= ADD MODAL ================= --}}
<div class="modal fade" id="modal-add">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form method="POST" action="{{ route('backoffice.slider.store') }}" class="w-100" enctype="multipart/form-data">
            @csrf

            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5>Tambah Slider</h5>
                </div>

                <div class="modal-body">

                    <div class="upload-area">
                        <input type="file" id="image-add" name="image"
                               class="upload-input"
                               accept="image/jpeg,image/png,image/webp" required>

                        <div class="upload-message" id="upload-message-add">
                            <i class="fas fa-image fa-3x text-primary"></i>
                            <p>Klik atau tarik gambar</p>
                            <small>JPG, PNG, WEBP (max 2MB)</small>
                        </div>
                    </div>

                    <div class="mt-3">
                        <label>Status</label><br>
                        <input type="radio" name="status" value="2"> Publish
                        <input type="radio" name="status" value="1" checked> Draft
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ================= EDIT MODAL ================= --}}
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form method="POST" class="w-100" id="form-edit" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5>Edit Slider</h5>
                </div>

                <div class="modal-body">

                    <div class="upload-area">
                        <input type="file" id="image-edit" name="image"
                               class="upload-input"
                               accept="image/jpeg,image/png,image/webp">

                        <div class="upload-message" id="upload-message-edit">
                            <!-- preview muncul disini -->
                        </div>
                    </div>

                    <div class="mt-3">
                        <label>Status</label><br>
                        <input type="radio" name="status" value="2"> Publish
                        <input type="radio" name="status" value="1"> Draft
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ================= DELETE MODAL ================= --}}
<div class="modal fade" id="modal-delete">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" id="form-delete" class="w-100">
            @csrf
            @method('DELETE')

            <div class="modal-content">
                <div class="modal-body text-center bg-warning">
                    Yakin hapus data?
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger">Hapus</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
.upload-area {
    position: relative;
    border: 2px dashed #6777ef;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
}
.upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
}
.upload-message img {
    max-height: 250px;
    width: 100%;
    object-fit: cover;
}
</style>
@endpush

@push('scripts')
<script>
function previewImage(input, target) {
    let file = input.files[0];
    if (!file) return;

    if (file.size > 2 * 1024 * 1024) {
        alert('Max 2MB');
        input.value = '';
        return;
    }

    let reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById(target).innerHTML =
            `<img src="${e.target.result}" class="w-100 rounded">`;
    };
    reader.readAsDataURL(file);
}

// ADD
document.getElementById('image-add')?.addEventListener('change', function() {
    previewImage(this, 'upload-message-add');
});

// EDIT
document.getElementById('image-edit')?.addEventListener('change', function() {
    previewImage(this, 'upload-message-edit');
});

// EDIT BUTTON
$(document).on('click', '.btn-edit', function() {
    let id = $(this).data('id');
    let status = $(this).data('status');
    let media = $(this).data('media');

    let url = "{{ route('backoffice.slider.update', ':id') }}".replace(':id', id);
    $('#form-edit').attr('action', url);

    $('#upload-message-edit').html(
        `<img src="{{ asset('storage') }}/${media}">`
    );

    let val = status === 'publish' ? 2 : 1;
    $('input[name="status"][value="'+val+'"]').prop('checked', true);
});

// DELETE
$(document).on('click', '.btn-delete', function() {
    let id = $(this).data('id');
    let url = "{{ route('backoffice.slider.destroy', ':id') }}".replace(':id', id);
    $('#form-delete').attr('action', url);
});
</script>
@endpush