@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .style-card {
        border: 1px solid rgba(99,102,241,.12) !important;
        box-shadow: 0 12px 30px rgba(15,23,42,.18);
        transition: all .25s ease;
    }

    .style-card:hover {
        transform: translateY(-2px);
        border-color: rgba(99,102,241,.24) !important;
    }

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

    .color-chip {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        border: 1px solid rgba(148,163,184,.18);
        display: inline-block;
        background: #f5f5f9;
        flex-shrink: 0;
    }

    .palette-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
        gap: 10px;
        max-width: 460px;
    }

    .palette-btn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.08);
        cursor: pointer;
        transition: all .18s ease;
    }

    .palette-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }

    .value-preview-box {
        border: 1px dashed rgba(148,163,184,.18);
        border-radius: 16px;
        padding: 1rem;
        background: rgba(255,255,255,.03);
    }

    .mono {
        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            "Liberation Mono",
            monospace;
    }

    .table-dark th {
        background: #0f172a !important;
    }

    .style-key {
        font-size: .82rem;
        background: rgba(99,102,241,.12);
        color: #c7d2fe;
        border: 1px solid rgba(99,102,241,.18);
        padding: .4rem .7rem;
        border-radius: 10px;
    }

    .style-value {
        max-width: 420px;
        font-size: .82rem;
    }

    .template-preview-title {
        font-size: .82rem;
        color: #94a3b8;
    }

    .submit-loading {
        display: inline-flex;
        align-items: center;
    }
</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:240px;
                height:240px;
                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-3">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Style Customize
                </h5>

                <small class="text-body-secondary">
                    Kelola key-value style website dan palette warna
                </small>

            </div>

            <div class="d-flex flex-wrap gap-2">

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

                    <i class="ti tabler-plus me-1"></i>
                    Add Style

                </button>

                <form method="POST"
                      action="{{ route('admin.style.costume.cache-clear') }}">

                    @csrf

                    <button type="submit"
                            class="btn btn-label-warning">

                        <i class="ti tabler-refresh me-1"></i>
                        Clear Cache

                    </button>

                </form>

            </div>

        </div>

    </div>

    {{-- SEARCH --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card style-card mb-4">

        <div class="card-body">

            <form method="GET"
                  action="{{ route('admin.style.costume.index') }}"
                  class="row g-2">

                <div class="col-12 col-lg">

                    <div class="input-group">

                        <span class="input-group-text border-0 bg-body">
                            <i class="ti tabler-search"></i>
                        </span>

                        <input
                            type="text"
                            name="search"
                            class="form-control border-0"
                            value="{{ $search }}"
                            placeholder="Search key/value..."
                        >

                    </div>

                </div>

                <div class="col-12 col-lg-auto d-grid d-lg-flex gap-2">

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

                        Search

                    </button>

                    @if($search)

                        <a href="{{ route('admin.style.costume.index') }}"
                           class="btn btn-label-secondary">

                            Reset

                        </a>

                    @endif

                </div>

            </form>

        </div>

    </div>

    {{-- APPLY TEMPLATE --}}
    <div class="card border-0 shadow-sm overflow-hidden mb-4 d-none glass-card style-card"
         id="addStyleCard">

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

            <h6 class="mb-0 text-white">
                Apply Style Template
            </h6>

        </div>

        <div class="card-body">

            <form id="addStyleForm"
                  method="POST"
                  action="{{ route('admin.style.costume.apply-template') }}">

                @csrf

                <div class="row g-4">

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

                        <label class="form-label text-white">
                            Template Style
                        </label>

                        <select name="template"
                                id="add_template_select"
                                class="form-select"
                                required>

                            <option value="">
                                -- Pilih Template --
                            </option>

                            <option value="default">
                                Default
                            </option>

                            <option value="ocean">
                                Ocean Blue
                            </option>

                            <option value="dark">
                                Dark Modern
                            </option>

                            <option value="casino_gold">
                                Casino Gold
                            </option>

                        </select>

                        <small class="text-body-secondary">
                            Template akan mengisi banyak key style sekaligus.
                        </small>

                    </div>

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

                        <label class="form-label text-white">
                            Preview Template
                        </label>

                        <div class="value-preview-box">

                            <div class="palette-grid mb-3"
                                 id="template_palette_preview">
                            </div>

                            <small class="template-preview-title"
                                   id="template_desc">

                                Pilih template untuk lihat preview warna.

                            </small>

                        </div>

                    </div>

                </div>

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

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

                        <i class="ti tabler-check me-1"></i>
                        Apply Template

                    </button>

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

                        Reset

                    </button>

                    <button class="btn btn-outline-danger"
                            type="button"
                            id="btnCancelAddStyle">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- EDIT CARD --}}
    <div class="card border-0 shadow-sm overflow-hidden mb-4 d-none glass-card style-card"
         id="editStyleCard">

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

            <h6 class="mb-0 text-white"
                id="editStyleTitle">

                Edit Style

            </h6>

        </div>

        <div class="card-body">

            <form id="editStyleForm"
                  method="POST"
                  action="">

                @csrf
                @method('PUT')

                <div class="row g-4">

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

                        <label class="form-label text-white">
                            Key
                        </label>

                        <input type="text"
                               id="edit_key"
                               name="key"
                               class="form-control"
                               required
                               maxlength="100">

                    </div>

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

                        <label class="form-label text-white">
                            Value
                        </label>

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

                            <input type="text"
                                   id="edit_value"
                                   name="value"
                                   class="form-control mono"
                                   maxlength="5000">

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

                                Copy

                            </button>

                        </div>

                    </div>

                    <div class="col-12">

                        <div class="value-preview-box d-flex align-items-center gap-3">

                            <span class="color-chip"
                                  id="edit_color_chip">
                            </span>

                            <small class="text-body-secondary"
                                   id="edit_value_hint">

                                Preview otomatis jika value adalah warna valid.

                            </small>

                        </div>

                    </div>

                    <div class="col-12">

                        <label class="form-label mb-3 text-white">
                            Quick Palette
                        </label>

                        <div class="palette-grid"
                             id="edit_palette">
                        </div>

                    </div>

                </div>

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

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

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

                    </button>

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

                        Reset

                    </button>

                    <button class="btn btn-outline-danger"
                            type="button"
                            id="btnCancelEditStyle">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

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

        <div class="card-body p-0">

            <div class="table-responsive">

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

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>
                            <th>Key</th>
                            <th>Color</th>
                            <th>Value</th>
                            <th>Updated</th>
                            <th class="text-center">Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($styles as $style)

                            <tr>

                                <td>
                                    {{ $style->id }}
                                </td>

                                <td>

                                    <span class="style-key mono">
                                        {{ $style->key }}
                                    </span>

                                </td>

                                <td>

                                    <span class="color-chip js-row-color"
                                          data-color="{{ e($style->value) }}">
                                    </span>

                                </td>

                                <td class="style-value text-truncate mono">

                                    {{ $style->value }}

                                </td>

                                <td>

                                    {{ optional($style->updated_at)->format('Y-m-d H:i:s') }}

                                </td>

                                <td>

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

                                        <button type="button"
                                                class="btn btn-sm btn-primary btn-edit-style"
                                                data-update-url="{{ route('admin.style.costume.update', $style->id) }}"
                                                data-key="{{ e($style->key) }}"
                                                data-value="{{ e($style->value) }}">

                                            Edit

                                        </button>

                                        <button type="button"
                                                class="btn btn-sm btn-label-secondary btn-copy-row-value"
                                                data-value="{{ e($style->value) }}">

                                            Copy

                                        </button>

                                        <form method="POST"
                                              action="{{ route('admin.style.costume.destroy', $style->id) }}"
                                              class="m-0">

                                            @csrf
                                            @method('DELETE')

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

                                                Delete

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    Tidak ada data style

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        {{-- PAGINATION --}}
        <div class="card-body">

            <div class="d-flex justify-content-center overflow-auto">

                <ul class="pagination pagination-rounded mb-0 flex-nowrap">

                    <li class="page-item {{ $styles->onFirstPage() ? 'disabled' : '' }}">

                        <a class="page-link"
                           href="{{ $styles->url(1) }}">

                            <i class="ti tabler-chevrons-left"></i>

                        </a>

                    </li>

                    <li class="page-item {{ $styles->onFirstPage() ? 'disabled' : '' }}">

                        <a class="page-link"
                           href="{{ $styles->previousPageUrl() }}">

                            <i class="ti tabler-chevron-left"></i>

                        </a>

                    </li>

                    @php
                        $start = max(1, $styles->currentPage() - 2);
                        $end = min($styles->lastPage(), $styles->currentPage() + 2);
                    @endphp

                    @for ($i = $start; $i <= $end; $i++)

                        <li class="page-item {{ $i == $styles->currentPage() ? 'active' : '' }}">

                            <a class="page-link"
                               href="{{ $styles->url($i) }}">

                                {{ $i }}

                            </a>

                        </li>

                    @endfor

                    <li class="page-item {{ !$styles->hasMorePages() ? 'disabled' : '' }}">

                        <a class="page-link"
                           href="{{ $styles->nextPageUrl() }}">

                            <i class="ti tabler-chevron-right"></i>

                        </a>

                    </li>

                    <li class="page-item {{ !$styles->hasMorePages() ? 'disabled' : '' }}">

                        <a class="page-link"
                           href="{{ $styles->url($styles->lastPage()) }}">

                            <i class="ti tabler-chevrons-right"></i>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </div>

</div>
@endsection

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

    const PALETTE = [
        '#7367f0','#8b5cf6','#3b82f6','#06b6d4','#10b981','#22c55e',
        '#84cc16','#f59e0b','#f97316','#ef4444','#ec4899','#64748b',
        '#111827','#ffffff','#000000','#e5e7eb','#f8fafc','#334155'
    ];

    const TEMPLATE_PREVIEWS = {
        default: ['#7367f0','#808390','#28c76f','#ea5455','#ff9f43','#00cfe8','#f8f7fa','#2f2b3d'],
        ocean: ['#0ea5e9','#64748b','#10b981','#ef4444','#f59e0b','#06b6d4','#f0f9ff','#0f172a'],
        dark: ['#8b5cf6','#94a3b8','#22c55e','#f43f5e','#f59e0b','#38bdf8','#0f172a','#e2e8f0'],
        casino_gold: ['#d4af37','#6b7280','#22c55e','#dc2626','#f59e0b','#0ea5e9','#111827','#f9fafb']
    };

    const addCard =
        document.getElementById('addStyleCard');

    const editCard =
        document.getElementById('editStyleCard');

    const addForm =
        document.getElementById('addStyleForm');

    const editForm =
        document.getElementById('editStyleForm');

    const addTemplateSelect =
        document.getElementById('add_template_select');

    const templatePalette =
        document.getElementById('template_palette_preview');

    const templateDesc =
        document.getElementById('template_desc');

    const editValue =
        document.getElementById('edit_value');

    const editChip =
        document.getElementById('edit_color_chip');

    const editHint =
        document.getElementById('edit_value_hint');

    function isValidColor(value) {

        if (!value) return false;

        const s =
            new Option().style;

        s.color = '';
        s.color = String(value).trim();

        return s.color !== '';

    }

    function setColorPreview(value, chipEl, hintEl) {

        if (!chipEl || !hintEl) return;

        const v =
            (value || '').trim();

        if (isValidColor(v)) {

            chipEl.style.background = v;

            hintEl.textContent =
                'Color terdeteksi: ' + v;

        } else {

            chipEl.style.background =
                '#f5f5f9';

            hintEl.textContent =
                'Preview otomatis jika value adalah warna valid.';

        }

    }

    function renderPalette(containerId, targetInput, targetChip, targetHint) {

        const box =
            document.getElementById(containerId);

        if (!box || !targetInput) return;

        box.innerHTML = '';

        PALETTE.forEach(color => {

            const btn =
                document.createElement('button');

            btn.type = 'button';
            btn.className = 'palette-btn';
            btn.style.background = color;
            btn.title = color;
            btn.dataset.color = color;

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

                targetInput.value =
                    this.dataset.color;

                setColorPreview(
                    targetInput.value,
                    targetChip,
                    targetHint
                );

            });

            box.appendChild(btn);

        });

    }

    function renderTemplatePreview(name) {

        if (!templatePalette || !templateDesc) return;

        templatePalette.innerHTML = '';

        const colors =
            TEMPLATE_PREVIEWS[name] || [];

        if (!colors.length) {

            templateDesc.textContent =
                'Pilih template untuk lihat preview warna.';

            return;

        }

        colors.forEach(color => {

            const chip =
                document.createElement('span');

            chip.className = 'palette-btn';
            chip.style.background = color;
            chip.title = color;

            templatePalette.appendChild(chip);

        });

        templateDesc.textContent =
            'Template "' + name + '" siap diterapkan.';

    }

    function copyText(text) {

        if (!text) return;

        navigator.clipboard
            .writeText(text)
            .catch(() => {});

    }

    function showAddCard() {

        hideEditCard();

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

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

    }

    function hideAddCard() {

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

        addForm.reset();

        renderTemplatePreview('');

    }

    function hideEditCard() {

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

        editForm.reset();

        editForm.action = '';

        document.getElementById('editStyleTitle').textContent =
            'Edit Style';

        setColorPreview('', editChip, editHint);

    }

    renderPalette(
        'edit_palette',
        editValue,
        editChip,
        editHint
    );

    document.getElementById('btnShowAddStyle')
        .addEventListener('click', showAddCard);

    document.getElementById('btnCancelAddStyle')
        .addEventListener('click', hideAddCard);

    document.getElementById('btnResetAddStyle')
        .addEventListener('click', function () {

            addForm.reset();

            renderTemplatePreview('');

        });

    document.getElementById('btnCancelEditStyle')
        .addEventListener('click', hideEditCard);

    document.getElementById('btnResetEditStyle')
        .addEventListener('click', function () {

            editForm.reset();

            setColorPreview('', editChip, editHint);

        });

    if (addTemplateSelect) {

        addTemplateSelect.addEventListener('change', function () {

            renderTemplatePreview(this.value);

        });

    }

    if (editValue) {

        editValue.addEventListener('input', function () {

            setColorPreview(
                this.value,
                editChip,
                editHint
            );

        });

    }

    const btnCopyEdit =
        document.getElementById('btnCopyEditValue');

    if (btnCopyEdit) {

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

            copyText(editValue ? editValue.value : '');

        });

    }

    document.querySelectorAll('.btn-copy-row-value')
        .forEach(btn => {

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

                copyText(this.dataset.value || '');

            });

        });

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

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

                hideAddCard();

                editForm.action =
                    this.getAttribute('data-update-url') || '';

                const key =
                    this.getAttribute('data-key') || '';

                const value =
                    this.getAttribute('data-value') || '';

                document.getElementById('edit_key').value =
                    key;

                document.getElementById('edit_value').value =
                    value;

                document.getElementById('editStyleTitle').textContent =
                    'Edit: ' + key;

                setColorPreview(
                    value,
                    editChip,
                    editHint
                );

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

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

            });

        });

    document.querySelectorAll('.js-row-color')
        .forEach(el => {

            const color =
                el.dataset.color || '';

            if (isValidColor(color.trim())) {

                el.style.background =
                    color.trim();

            }

        });

    renderTemplatePreview('');

    setColorPreview(
        editValue ? editValue.value : '',
        editChip,
        editHint
    );

});
</script>
@endpush