@extends('backoffice.layouts.app')

@push('styles')
<style>
    .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">
                    Promotion Setting
                </h5>

                <small class="text-body-secondary">
                    Kelola data promotions
                </small>

            </div>

            <button type="button"
                    class="btn btn-success"
                    id="btnToggleAddPromo">

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

            </button>

        </div>

    </div>

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

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

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

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

        </div>

        <div class="card-body">

            <form method="POST"
                  action="{{ route('admin.promo.promotion.store') }}"
                  enctype="multipart/form-data"
                  id="addPromoForm">

                @csrf

                <div class="row g-3">

                    <div class="col-md-6">
                        <label class="form-label">Title</label>

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

                    <div class="col-md-3">
                        <label class="form-label">Category</label>

                        <input name="category"
                               class="form-control"
                               required
                               value="{{ old('category') }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Status</label>

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

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

                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Slug (opsional)</label>

                        <input name="slug"
                               class="form-control"
                               value="{{ old('slug') }}">
                    </div>

                    <div class="col-md-8">
                        <label class="form-label">Redirect URL</label>

                        <input name="redirect_url"
                               class="form-control"
                               value="{{ old('redirect_url') }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Start Date</label>

                        <input type="datetime-local"
                               name="start_date"
                               class="form-control"
                               value="{{ old('start_date') }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">End Date</label>

                        <input type="datetime-local"
                               name="end_date"
                               class="form-control"
                               value="{{ old('end_date') }}">
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Description</label>

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

                        <small class="text-body-secondary">
                            Isi deskripsi singkat promotion
                        </small>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Content Detail</label>

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

                        <small class="text-body-secondary">
                            Isi detail promotion lengkap
                        </small>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Image</label>

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

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

                            <img id="addPromoImagePreview"
                                 class="preview-img"
                                 alt="Preview">

                        </div>

                    </div>

                </div>

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

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

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

                    </button>

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

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

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

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

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

                Edit Promotion

            </h6>

            <small class="text-body-secondary">
                Update data promotion
            </small>

        </div>

        <div class="card-body">

            <form method="POST"
                  id="editPromoForm"
                  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 id="edit_title"
                               name="title"
                               class="form-control"
                               required>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Category</label>

                        <input id="edit_category"
                               name="category"
                               class="form-control"
                               required>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Status</label>

                        <select id="edit_is_active"
                                name="is_active"
                                class="form-select"
                                required>

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

                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Slug</label>

                        <input id="edit_slug"
                               name="slug"
                               class="form-control">
                    </div>

                    <div class="col-md-8">
                        <label class="form-label">Redirect URL</label>

                        <input id="edit_redirect_url"
                               name="redirect_url"
                               class="form-control">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Start Date</label>

                        <input type="datetime-local"
                               id="edit_start_date"
                               name="start_date"
                               class="form-control">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">End Date</label>

                        <input type="datetime-local"
                               id="edit_end_date"
                               name="end_date"
                               class="form-control">
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Description</label>

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

                    <div class="col-md-12">
                        <label class="form-label">Content Detail</label>

                        <textarea id="edit_content"
                                  name="content"
                                  rows="8"
                                  class="form-control"></textarea>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Image</label>

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

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

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

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

                        </div>

                    </div>

                </div>

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

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

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

                    </button>

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

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

                <small class="text-body-secondary">
                    Semua data promotion website
                </small>

            </div>

            <span class="badge rounded-pill bg-label-info px-3 py-2">
                {{ count($promotions) }} Promotion
            </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>Slug</th>
                            <th>Category</th>
                            <th>Image</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($promotions as $promo)

                            <tr>

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

                                <td>

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

                                </td>

                                <td>

                                    <div class="text-body-secondary">
                                        {{ $promo->slug ?: '-' }}
                                    </div>

                                </td>

                                <td>

                                    <span class="badge bg-label-info">
                                        {{ $promo->category }}
                                    </span>

                                </td>

                                <td>

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

                                                data-update-url="{{ route('admin.promo.promotion.update', $promo->id) }}"
                                                data-title="{{ e($promo->title) }}"
                                                data-description="{{ e($promo->description) }}"
                                                data-content="{{ e($promo->note) }}"
                                                data-slug="{{ e($promo->slug) }}"
                                                data-category="{{ e($promo->category) }}"
                                                data-redirect-url="{{ e($promo->redirect_url) }}"
                                                data-start-date="{{ $promo->start_date ? \Carbon\Carbon::parse($promo->start_date)->format('Y-m-d\TH:i') : '' }}"
                                                data-end-date="{{ $promo->end_date ? \Carbon\Carbon::parse($promo->end_date)->format('Y-m-d\TH:i') : '' }}"
                                                data-image="{{ Storage::url($promo->image) }}"
                                                data-active="{{ (int)$promo->is_active }}">

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

                                        </button>

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

                                            @csrf
                                            @method('DELETE')

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

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

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    Tidak ada data promotion

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>
@endsection

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

    const addCard = document.getElementById('addPromoCard');
    const editCard = document.getElementById('editPromoCard');

    const addForm = document.getElementById('addPromoForm');
    const editForm = document.getElementById('editPromoForm');

    const editTitle = document.getElementById('editPromoTitle');

    const addImageInput = document.getElementById('addPromoImage');
    const addImagePreview = document.getElementById('addPromoImagePreview');
    const addImageBox = document.getElementById('addPromoImageBox');

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

    const btnToggleAddPromo = document.getElementById('btnToggleAddPromo');

    const btnCancelAdd = document.getElementById('cancelPromoAdd');
    const btnCancelEdit = document.getElementById('cancelPromoEdit');

    function showCard(card) {

        if (card === 'add') {

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

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

        } else {

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

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

    function hideAddCard() {

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

        addForm.reset();

        addImagePreview.src = '';

        addImageBox.style.display = 'none';
    }

    function hideEditCard() {

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

        editForm.reset();

        editImagePreview.src = '';

        editImageBox.style.display = 'none';

        editTitle.textContent = 'Edit Promotion';
    }

    function setPreview(img, box, src) {

        if (src) {

            img.src = src;

            box.style.display = 'block';

        } else {

            img.src = '';

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

    function filePreview(img, box, file) {

        if (!file) return;

        img.src = URL.createObjectURL(file);

        box.style.display = 'block';
    }

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

        if (addCard.classList.contains('d-none')) {

            showCard('add');

        } else {

            hideAddCard();
        }
    });

    btnCancelAdd.addEventListener('click', function () {
        hideAddCard();
    });

    btnCancelEdit.addEventListener('click', function () {
        hideEditCard();
    });

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

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

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

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

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

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

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

            document.getElementById('edit_content').value =
                this.dataset.content || '';

            document.getElementById('edit_slug').value =
                this.dataset.slug || '';

            document.getElementById('edit_category').value =
                this.dataset.category || '';

            document.getElementById('edit_redirect_url').value =
                this.dataset.redirectUrl || '';

            document.getElementById('edit_start_date').value =
                this.dataset.startDate || '';

            document.getElementById('edit_end_date').value =
                this.dataset.endDate || '';

            document.getElementById('edit_is_active').value =
                this.dataset.active || '1';

            editImageInput.value = '';

            setPreview(
                editImagePreview,
                editImageBox,
                this.dataset.image || ''
            );

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

            showCard('edit');

        });

    });

});
</script>
@endpush