@extends('backoffice.layouts.app')

@push('styles')
<style>
    .modal {
        z-index: 2000 !important;
    }

    .modal-backdrop {
        z-index: 1990 !important;
    }

    .preview-box {
        width: 100%;
        max-width: 240px;
        height: 120px;
        border: 1px solid rgba(148,163,184,.12);
        border-radius: 14px;
        overflow: hidden;
        display: none;
        background: rgba(255,255,255,.03);
        box-shadow: 0 8px 24px rgba(15,23,42,.18);
    }

    .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .edit-highlight {
        border: 1px solid rgba(245,158,11,.18) !important;
        box-shadow: 0 12px 30px rgba(245,158,11,.08);
    }

    .add-highlight {
        border: 1px solid rgba(34,197,94,.16) !important;
        box-shadow: 0 12px 30px rgba(34,197,94,.08);
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:220px;
                height:220px;
                background:
                radial-gradient(circle,
                rgba(99,102,241,.14) 0%,
                transparent 72%);
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Banner Slide Setting
                </h5>

                <small class="text-body-secondary">
                    Kelola banner slide promosi website
                </small>

            </div>

            <button type="button"
                    class="btn btn-primary"
                    id="btnShowAddSlide">

                <i class="ti tabler-plus me-1"></i>
                Tambah Slide

            </button>

        </div>

    </div>

    {{-- ADD FORM --}}
    <div class="card border-0 shadow-sm mb-4 d-none glass-card add-highlight"
         id="addSlideCard">

        <div class="card-header card-header-custom">

            <h6 class="mb-1 text-white fw-semibold">
                Tambah Banner Slide
            </h6>

            <small class="text-body-secondary">
                Tambahkan banner slide baru
            </small>

        </div>

        <div class="card-body">

            <form method="POST"
                  action="{{ route('admin.banner.bannerslide.store') }}"
                  enctype="multipart/form-data">

                @csrf

                <div class="row g-3">

                    <div class="col-md-6">

                        <label class="form-label">
                            Title
                        </label>

                        <input type="text"
                               name="title"
                               class="form-control"
                               value="{{ old('title') }}"
                               required>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Status
                        </label>

                        <select name="status"
                                class="form-select"
                                required>

                            <option value="1"
                                {{ old('status', '1') == '1' ? 'selected' : '' }}>
                                Active
                            </option>

                            <option value="0"
                                {{ old('status') == '0' ? 'selected' : '' }}>
                                Inactive
                            </option>

                        </select>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Description
                        </label>

                        <textarea name="description"
                                  class="form-control"
                                  rows="4">{{ old('description') }}</textarea>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Note
                        </label>

                        <textarea name="note"
                                  class="form-control"
                                  rows="4">{{ old('note') }}</textarea>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Image
                        </label>

                        <input type="file"
                               name="image"
                               id="add_image"
                               class="form-control"
                               accept="image/*"
                               required>

                        <div class="mt-3 preview-box"
                             id="add_image_preview_box">

                            <img id="add_image_preview"
                                 class="preview-img"
                                 alt="Preview Add">

                        </div>

                    </div>

                </div>

                <div class="mt-4 d-flex gap-2">

                    <button type="submit"
                            class="btn btn-success">

                        <i class="ti tabler-device-floppy me-1"></i>
                        Tambah Slide

                    </button>

                    <button type="button"
                            class="btn btn-outline-secondary"
                            id="btnCancelAddSlide">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- EDIT FORM --}}
    <div class="card border-0 shadow-sm mb-4 d-none glass-card edit-highlight"
         id="editSlideCard">

        <div class="card-header card-header-custom">

            <h6 class="mb-1 text-white fw-semibold"
                id="editSlideTitle">

                Edit Banner Slide

            </h6>

            <small class="text-body-secondary">
                Update banner slide website
            </small>

        </div>

        <div class="card-body">

            <form id="editSlideForm"
                  method="POST"
                  action=""
                  enctype="multipart/form-data">

                @csrf
                @method('PUT')

                <div class="row g-3">

                    <div class="col-md-6">

                        <label class="form-label">
                            Title
                        </label>

                        <input type="text"
                               id="edit_title"
                               name="title"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Status
                        </label>

                        <select class="form-select"
                                id="edit_status"
                                name="status"
                                required>

                            <option value="1">
                                Active
                            </option>

                            <option value="0">
                                Inactive
                            </option>

                        </select>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Description
                        </label>

                        <textarea id="edit_description"
                                  name="description"
                                  class="form-control"
                                  rows="4"></textarea>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Note
                        </label>

                        <textarea id="edit_note"
                                  name="note"
                                  class="form-control"
                                  rows="4"></textarea>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Image
                        </label>

                        <input type="file"
                               class="form-control"
                               id="edit_image"
                               name="image"
                               accept="image/*">

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

                        <div class="mt-3 preview-box">

                            <img id="edit_image_preview"
                                 class="preview-img"
                                 alt="Preview Edit">

                        </div>

                    </div>

                </div>

                <div class="mt-4 d-flex gap-2">

                    <button type="submit"
                            class="btn btn-primary">

                        <i class="ti tabler-device-floppy me-1"></i>
                        Simpan

                    </button>

                    <button type="button"
                            class="btn btn-outline-secondary"
                            id="btnCancelEditSlide">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden">

        {{-- header --}}
        <div class="card-header border-0 bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h6 class="mb-1 fw-semibold text-white">
                    Banner Slide List
                </h6>

                <small class="text-body-secondary">
                    Semua banner slide website
                </small>

            </div>

            <span class="badge rounded-pill bg-label-info px-3 py-2">
                {{ count($slides ?? []) }} Slide
            </span>

        </div>

        {{-- table --}}
        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0 text-nowrap">

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Image</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($slides as $slide)

                            <tr>

                                <td class="fw-semibold text-body-secondary">
                                    #{{ $slide->id }}
                                </td>

                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $slide->title }}
                                    </div>

                                </td>

                                <td>

                                    <div class="text-body-secondary text-truncate"
                                         style="max-width:260px;">

                                        {{ $slide->description }}

                                    </div>

                                </td>

                                <td>

                                    <img src="{{ Storage::url($slide->image) }}"
                                         alt="{{ $slide->title }}"
                                         style="
                                            width:100px;
                                            height:52px;
                                            object-fit:cover;
                                            border-radius:10px;
                                            border:1px solid rgba(148,163,184,.12);
                                            background: rgba(255,255,255,.03);">

                                </td>

                                <td>

                                    @if((int) $slide->status === 1)

                                        <span class="badge bg-success">
                                            Active
                                        </span>

                                    @else

                                        <span class="badge bg-danger">
                                            Inactive
                                        </span>

                                    @endif

                                </td>

                                <td class="text-center">

                                    <div class="d-flex justify-content-center gap-2">

                                        <button type="button"
                                                class="btn btn-sm btn-primary btn-edit-slide"

                                                data-update-url="{{ route('admin.banner.bannerslide.update', $slide->id) }}"
                                                data-title="{{ e($slide->title) }}"
                                                data-description="{{ e($slide->description) }}"
                                                data-note="{{ e($slide->note) }}"
                                                data-image="{{ Storage::url($slide->image) }}"
                                                data-status="{{ (int) $slide->status }}">

                                            <i class="ti tabler-edit me-1"></i>
                                            Edit

                                        </button>

                                        <form method="POST"
                                              action="{{ route('admin.banner.bannerslide.destroy', $slide->id) }}">

                                            @csrf
                                            @method('DELETE')

                                            <button class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Hapus slide ini?')">

                                                <i class="ti tabler-trash me-1"></i>
                                                Delete

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="6"
                                    class="text-center py-5 text-body-secondary">

                                    Tidak ada data slide

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const editCard = document.getElementById('editSlideCard');
    const addCard = document.getElementById('addSlideCard');

    const editForm = document.getElementById('editSlideForm');
    const editTitle = document.getElementById('editSlideTitle');

    const editImageInput = document.getElementById('edit_image');
    const editImagePreview = document.getElementById('edit_image_preview');

    const addImageInput = document.getElementById('add_image');
    const addImagePreview = document.getElementById('add_image_preview');
    const addImagePreviewBox = document.getElementById('add_image_preview_box');

    const btnShowAdd = document.getElementById('btnShowAddSlide');
    const btnCancelAdd = document.getElementById('btnCancelAddSlide');
    const btnCancelEdit = document.getElementById('btnCancelEditSlide');

    function showImage(imgEl, url) {

        const box = imgEl.parentElement;

        if (url) {

            imgEl.src = url;

            box.style.display = 'block';

        } else {

            imgEl.src = '';

            box.style.display = 'none';
        }
    }

    function previewFile(imgEl, file) {

        if (!file) return;

        const box = imgEl.parentElement;

        imgEl.src = URL.createObjectURL(file);

        box.style.display = 'block';
    }

    function closeEdit() {

        editCard.classList.add('d-none');

        editForm.reset();

        showImage(editImagePreview, '');

        editTitle.textContent = 'Edit Banner Slide';
    }

    function closeAdd() {

        addCard.classList.add('d-none');

        addImageInput.value = '';

        addImagePreview.src = '';

        addImagePreviewBox.style.display = 'none';
    }

    document.querySelectorAll('.btn-edit-slide').forEach(function (btn) {

        btn.addEventListener('click', function () {

            closeAdd();

            editForm.action = this.dataset.updateUrl || '';

            document.getElementById('edit_title').value =
                this.dataset.title || '';

            document.getElementById('edit_description').value =
                this.dataset.description || '';

            document.getElementById('edit_note').value =
                this.dataset.note || '';

            document.getElementById('edit_status').value =
                this.dataset.status || '1';

            editImageInput.value = '';

            showImage(
                editImagePreview,
                this.dataset.image || ''
            );

            editTitle.textContent = this.dataset.title
                ? 'Edit: ' + this.dataset.title
                : 'Edit Banner Slide';

            editCard.classList.remove('d-none');

            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });

        });

    });

    btnShowAdd.addEventListener('click', function () {

        closeEdit();

        addCard.classList.remove('d-none');

        addCard.scrollIntoView({
            behavior: 'smooth'
        });

    });

    btnCancelEdit.addEventListener('click', closeEdit);

    btnCancelAdd.addEventListener('click', closeAdd);

    editImageInput.addEventListener('change', function (e) {
        previewFile(editImagePreview, e.target.files[0]);
    });

    addImageInput.addEventListener('change', function (e) {
        previewFile(addImagePreview, e.target.files[0]);
    });

});
</script>
@endpush