@extends('layouts.admin')
@section('title', 'Maintenance Games')

@section('content')
<style>
/* ===== FINAL MAINTENANCE WITH BUTTON SWITCH ===== */

.maintenance-container {
    max-width: 960px;
}

/* Header */
.maintenance-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
}
.maintenance-desc {
    color: #b9c1dd;
    margin-top: 6px;
}

/* Panel */
.maintenance-panel {
    margin-top: 30px;
    padding: 28px 30px;
    background: #2b314b;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Info */
.maintenance-info h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.maintenance-info p {
    margin: 6px 0 0;
    color: #b9c1dd;
    font-size: 14px;
}

/* Status */
.maintenance-status {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}
.maintenance-status.on {
    color: #ff6b6b;
}
.maintenance-status.off {
    color: #2ecc71;
}

/* ===== BUTTON SWITCH ===== */
.maintenance-action button {
    min-width: 160px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}

/* ON = merah */
.btn-maintenance-on {
    background: #ff5b5b;
    color: #fff;
}
.btn-maintenance-on:hover {
    background: #ff4040;
}

/* OFF = hijau */
.btn-maintenance-off {
    background: #2ecc71;
    color: #0f2f1d;
}
.btn-maintenance-off:hover {
    background: #25b863;
}
</style>

<div class="container-xxl container-p-y maintenance-container">

    <!-- HEADER -->
    <div>
        <div class="maintenance-title">Maintenance Games</div>
        <div class="maintenance-desc">
            Pengaturan global untuk mengaktifkan atau menonaktifkan seluruh game
        </div>
    </div>

    <!-- PANEL -->
    <div class="maintenance-panel">

        <div class="maintenance-info">
            <h5>Maintenance Game</h5>
            <p>Jika diaktifkan, semua game akan dinonaktifkan sementara</p>

            @if(getSetting('maintenance_game'))
                <div class="maintenance-status on">
                    Status: AKTIF — semua game nonaktif
                </div>
            @else
                <div class="maintenance-status off">
                    Status: NONAKTIF — semua game aktif
                </div>
            @endif
        </div>

        <!-- ACTION BUTTON -->
        <div class="maintenance-action">
            @if(getSetting('maintenance_game'))
                <button id="maintenanceBtn"
                        class="btn-maintenance-off"
                        data-value="0">
                    Aktifkan Game
                </button>
            @else
                <button id="maintenanceBtn"
                        class="btn-maintenance-on"
                        data-value="1">
                    Aktifkan Maintenance
                </button>
            @endif
        </div>

    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('maintenanceBtn');
    if (!btn) return;

    btn.addEventListener('click', function () {
        btn.disabled = true;
        btn.innerText = 'Memproses...';

        fetch("{{ route('admin.settings.maintenance-game') }}", {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                maintenance_game: this.dataset.value
            })
        })
        .then(() => location.reload())
        .catch(() => {
            btn.disabled = false;
            btn.innerText = 'Gagal, coba lagi';
        });
    });
});
</script>
@endsection