@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;
    }

    .page-banner-table {
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(148,163,184,.08);
    }

    .page-banner-table thead.table-dark th {
        background: rgba(255,255,255,.03) !important;
        border-bottom: 1px solid rgba(148,163,184,.08);
        color: #94a3b8;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: 1rem;
    }

    .page-banner-table tbody td {
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
        vertical-align: middle;
    }

    .page-banner-table tbody tr {
        transition: all .2s ease;
    }

    .page-banner-table tbody tr:hover {
        background: rgba(255,255,255,.025);
    }

    .banner-thumb {
        width: 110px;
        height: 52px;
        border-radius: 10px;
        object-fit: cover;
        border: 1px solid rgba(148,163,184,.12);
        background: rgba(255,255,255,.03);
    }

    .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);
    }
</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">
                    Page Banner Setting
                </h5>

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

            </div>

            <span class="badge bg-label-primary px-3 py-2">
                Banner Manager
            </span>

        </div>

    </div>

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

        <div class="card-header card-header-custom d-flex justify-content-between align-items-center">

            <div>

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

                    Edit Page Banner

                </h6>

                <small class="text-body-secondary">
                    Update banner desktop dan mobile
                </small>

            </div>

            <span class="badge bg-label-warning">
                Editing
            </span>

        </div>

        <div class="card-body">

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

                @csrf
                @method('PUT')

                <div class="row g-3">

                    {{-- IMAGE DESKTOP --}}
                    <div class="col-md-6">

                        <label class="form-label">
                            Image Desktop
                        </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">
                        </div>

                    </div>

                    {{-- IMAGE MOBILE --}}
                    <div class="col-md-6">

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

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

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

                        <div class="mt-3 preview-box">
                            <img id="edit_mobile_image_preview"
                                 class="preview-img">
                        </div>

                    </div>

                    {{-- STATUS --}}
                    <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>

                <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="btnCancelEditPageBanner">

                        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 List
            </h6>

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

        </div>

        <span class="badge rounded-pill bg-label-info px-3 py-2">
            {{ count($banners) }} Banner
        </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>Page</th>

                        <th>Title</th>

                        <th>Image</th>

                        <th>Status</th>

                        <th class="text-center">
                            Action
                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($banners as $banner)

                        <tr>

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

                            {{-- page --}}
                            <td>

                                <div class="fw-semibold text-white">
                                    {{ $banner->page }}
                                </div>

                            </td>

                            {{-- title --}}
                            <td>

                                <div class="text-body-secondary">
                                    {{ $banner->title }}
                                </div>

                            </td>

                            {{-- image --}}
                            <td>

                                <img src="{{ Storage::url($banner->image_url) }}"
                                     alt="{{ $banner->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>

                            {{-- status --}}
                            <td>

                                @if($banner->status)

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

                                @else

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

                                @endif

                            </td>

                            {{-- action --}}
                            <td class="text-center">

                                <button type="button"
                                        class="btn btn-sm btn-primary btn-edit-page-banner"

                                        data-update-url="{{ route('admin.banner.pagebanner.update', $banner->id) }}"
                                        data-title="{{ e($banner->title) }}"
                                        data-image-url="{{ Storage::url($banner->image_url) }}"
                                        data-mobile-image-url="{{ Storage::url($banner->mobile_image_url) }}"
                                        data-status="{{ (int) $banner->status }}">

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

                                </button>

                            </td>

                        </tr>

                    @empty

                        <tr>

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

                                Tidak ada data

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

</div>
@endsection

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

    const editForm = document.getElementById('editPageBannerForm');
    const editCard = document.getElementById('editPageBannerCard');

    const titleHeader = document.getElementById('editBannerTitle');

    const desktopInput = document.getElementById('edit_image');
    const mobileInput = document.getElementById('edit_mobile_image');

    const desktopPreview = document.getElementById('edit_image_preview');
    const mobilePreview = document.getElementById('edit_mobile_image_preview');

    function preview(img, file) {

        if (file) {

            img.src = URL.createObjectURL(file);

            img.parentElement.style.display = 'block';
        }
    }

    function showImage(img, url) {

        const box = img.parentElement;

        if (url) {

            img.src = url;

            box.style.display = 'block';

        } else {

            img.src = '';

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

    document.querySelectorAll('.btn-edit-page-banner')
        .forEach(btn => {

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

                editForm.action = this.dataset.updateUrl;

                titleHeader.textContent = this.dataset.title
                    ? 'Page : ' + this.dataset.title
                    : 'Edit Page Banner';

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

                showImage(
                    desktopPreview,
                    this.dataset.imageUrl
                );

                showImage(
                    mobilePreview,
                    this.dataset.mobileImageUrl
                );

                desktopInput.value = '';
                mobileInput.value = '';

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

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

            });

        });

    desktopInput.addEventListener(
        'change',
        e => preview(desktopPreview, e.target.files[0])
    );

    mobileInput.addEventListener(
        'change',
        e => preview(mobilePreview, e.target.files[0])
    );

    document.getElementById('btnCancelEditPageBanner')
        .addEventListener('click', () => {

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

            titleHeader.textContent =
                'Edit Page Banner';

        });

});
</script>
@endpush