@extends('backoffice.layouts.app')

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

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

    .maintenance-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;
    }

    .setting-switch .form-check-input {
        width: 3rem;
        height: 1.5rem;
        cursor: pointer;
        border: 0;
        background-color: rgba(148,163,184,.3);
    }

    .setting-switch .form-check-input:checked {
        background-color: #6366f1;
    }

    .setting-title {
        font-size: .95rem;
        font-weight: 600;
        color: #fff;
    }

    .setting-desc {
        font-size: .8rem;
        color: rgba(148,163,184,.85);
        line-height: 1.5;
    }

    .submit-loading {
        display: inline-flex;
        align-items: center;
    }
</style>
@endpush

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

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

        {{-- glow --}}
        <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">
                    Maintenance Settings
                </h5>

                <small class="text-body-secondary">
                    Manage global website configuration switches
                </small>

            </div>

            <span class="badge rounded-pill bg-label-primary px-3 py-2">
                System / Maintenance
            </span>

        </div>

    </div>

    {{-- ALERT --}}
    @if (session('success'))

        <div class="alert alert-success alert-dismissible" role="alert">

            {{ session('success') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    @if (session('error'))

        <div class="alert alert-danger alert-dismissible" role="alert">

            {{ session('error') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>

        </div>

    @endif

    <form method="POST"
          action="{{ route('admin.settings.maintenance.update') }}"
          id="maintenanceForm">

        @csrf

        <div class="row g-4">

            @forelse ($configs as $config)

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

                    <div class="card border-0 shadow-sm h-100 overflow-hidden glass-card maintenance-card">

                        <div class="card-body d-flex flex-column justify-content-between">

                            <div class="d-flex align-items-start justify-content-between gap-3">

                                <div class="flex-grow-1">

                                    <div class="setting-title text-capitalize mb-2">

                                        {{ str_replace('_', ' ', $config->key) }}

                                    </div>

                                    <div class="setting-desc">

                                        {{ $config->description ?? 'No description available.' }}

                                    </div>

                                </div>

                                <div class="form-check form-switch setting-switch m-0">

                                    <input type="hidden"
                                           name="{{ $config->key }}"
                                           value="0">

                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        role="switch"
                                        id="config_{{ $config->key }}"
                                        name="{{ $config->key }}"
                                        value="1"
                                        {{ (int) ($settings[$config->key] ?? 0) === 1 ? 'checked' : '' }}
                                    >

                                </div>

                            </div>

                            <div class="mt-4 d-flex justify-content-between align-items-center">

                                <small class="text-body-secondary">
                                    Current Status
                                </small>

                                @if((int) ($settings[$config->key] ?? 0) === 1)

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

                                @else

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

                                @endif

                            </div>

                        </div>

                    </div>

                </div>

            @empty

                <div class="col-12">

                    <div class="card border-0 shadow-sm overflow-hidden glass-card maintenance-card">

                        <div class="card-body text-center py-5 text-body-secondary">

                            No configuration found.

                        </div>

                    </div>

                </div>

            @endforelse

        </div>

        {{-- SAVE --}}
        <div class="card border-0 shadow-sm overflow-hidden glass-card maintenance-card mt-4">

            <div class="card-body d-flex justify-content-end">

                <button type="submit"
                        id="maintenanceSubmitBtn"
                        class="btn btn-primary px-4">

                    <span class="submit-text">

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

                    </span>

                    <span class="submit-loading d-none">

                        <span class="spinner-border spinner-border-sm me-1"
                              role="status"
                              aria-hidden="true">
                        </span>

                        Saving...

                    </span>

                </button>

            </div>

        </div>

    </form>

</div>
@endsection

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

    const form =
        document.getElementById('maintenanceForm');

    const btn =
        document.getElementById('maintenanceSubmitBtn');

    if (!form || !btn) return;

    // =========================
    // SUBMIT LOADING
    // =========================
    form.addEventListener('submit', function () {

        btn.disabled = true;

        btn.querySelector('.submit-text')
            ?.classList.add('d-none');

        btn.querySelector('.submit-loading')
            ?.classList.remove('d-none');

    });

    // =========================
    // LIVE BADGE STATUS
    // =========================
    document.querySelectorAll('.setting-switch .form-check-input')
        .forEach(function (toggle) {

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

                const card =
                    this.closest('.maintenance-card');

                if (!card) return;

                const badge =
                    card.querySelector('.badge');

                if (!badge) return;

                if (this.checked) {

                    badge.classList.remove('bg-danger');
                    badge.classList.add('bg-success');

                    badge.textContent = 'Enabled';

                } else {

                    badge.classList.remove('bg-success');
                    badge.classList.add('bg-danger');

                    badge.textContent = 'Disabled';

                }

            });

        });

});
</script>
@endpush