@extends('backoffice.layouts.app')

@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,.16) 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">
                    Admin Management
                </h5>

                <small class="text-body-secondary">
                    Kelola role admin dari user yang sudah terdaftar
                </small>
            </div>

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

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

            </button>

        </div>

    </div>

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

        <div class="card-body">

            <form method="GET"
                  action="{{ route('admin.admin-users.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 username / fullname / email / role..."
                        >

                    </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.admin-users.index') }}"
                           class="btn btn-label-secondary">

                            Reset

                        </a>

                    @endif

                </div>

            </form>

        </div>

    </div>

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

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

            <h6 class="mb-0 text-white">
                Add Admin
            </h6>

        </div>

        <div class="card-body">

            <form id="addAdminForm"
                  method="POST"
                  action="{{ route('admin.admin-users.store') }}">

                @csrf

                <div class="form-section-title">
                    Admin Access Configuration
                </div>

                <div class="row g-4">

                    <div class="col-12">

                        <label class="form-label text-white">
                            Pilih User
                        </label>

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

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

                            @foreach($candidateUsers as $u)

                                <option value="{{ $u->id }}"
                                    {{ old('user_id') == $u->id ? 'selected' : '' }}>

                                    {{ $u->username }}
                                    -
                                    {{ $u->fullname ?: '-' }}
                                    ({{ $u->email ?: '-' }})

                                </option>

                            @endforeach

                        </select>

                        <small class="text-body-secondary">
                            Hanya user yang belum menjadi admin ditampilkan.
                        </small>

                    </div>

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

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

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

                            <option value="admin"
                                {{ old('role') === 'admin' ? 'selected' : '' }}>
                                admin
                            </option>

                            <option value="developer"
                                {{ old('role') === 'developer' ? 'selected' : '' }}>
                                developer
                            </option>

                            <option value="superadmin"
                                {{ old('role') === 'superadmin' ? 'selected' : '' }}>
                                superadmin
                            </option>

                            <option value="promotor"
                                {{ old('role') === 'promotor' ? 'selected' : '' }}>
                                promotor
                            </option>

                        </select>

                    </div>

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

                        <label class="form-label text-white">
                            Status Access
                        </label>

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

                            <option value="active"
                                {{ old('status', 'active') === 'active' ? 'selected' : '' }}>
                                active
                            </option>

                            <option value="inactive"
                                {{ old('status') === 'inactive' ? 'selected' : '' }}>
                                inactive
                            </option>

                        </select>

                    </div>

                </div>

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

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

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

                    </button>

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

                        Reset

                    </button>

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

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

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

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

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

                Edit Admin

            </h6>

        </div>

        <div class="card-body">

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

                @csrf
                @method('PUT')

                <div class="form-section-title">
                    Edit Access Permission
                </div>

                <div class="row g-4">

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

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

                        <input type="text"
                               id="e_user_display"
                               class="form-control"
                               readonly>

                    </div>

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

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

                        <select id="e_role"
                                name="role"
                                class="form-select"
                                required>

                            <option value="admin">admin</option>
                            <option value="developer">developer</option>
                            <option value="superadmin">superadmin</option>
                            <option value="promotor">promotor</option>

                        </select>

                    </div>

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

                        <label class="form-label text-white">
                            Status Access
                        </label>

                        <select id="e_status"
                                name="status"
                                class="form-select"
                                required>

                            <option value="active">active</option>
                            <option value="inactive">inactive</option>

                        </select>

                    </div>

                </div>

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

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

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

                    </button>

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

                        Reset

                    </button>

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

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden glass-card admin-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 Access</th>
                            <th>User</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Access Status</th>
                            <th>User Status</th>
                            <th class="text-center">Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($admins as $a)

                            <tr>

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

                                <td>

                                    <div class="admin-user-box">

                                        <span class="username">
                                            {{ $a->username }}
                                        </span>

                                        <span class="fullname">
                                            {{ $a->fullname ?: '-' }}
                                        </span>

                                    </div>

                                </td>

                                <td>

                                    <div class="info-label">
                                        Email
                                    </div>

                                    {{ $a->email ?: '-' }}

                                </td>

                                <td>

                                    <div class="info-label">
                                        Phone
                                    </div>

                                    {{ $a->no_handphone ?: '-' }}

                                </td>

                                <td>

                                    <span class="role-badge">
                                        {{ $a->role }}
                                    </span>

                                </td>

                                <td>

                                    @if($a->access_status === 'active')

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

                                    @else

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

                                    @endif

                                </td>

                                <td>

                                    @if($a->status_user == 'active')

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

                                    @elseif($a->status_user == 'suspend')

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

                                    @elseif($a->status_user == 'offgame')

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

                                    @endif

                                </td>

                                <td>

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

                                        <button type="button"
                                                class="btn btn-sm btn-primary btn-edit-admin"
                                                data-update-url="{{ route('admin.admin-users.update', $a->id) }}"
                                                data-user="{{ e($a->username) }}"
                                                data-fullname="{{ e($a->fullname) }}"
                                                data-role="{{ e($a->role) }}"
                                                data-status="{{ e($a->access_status) }}">

                                            Edit

                                        </button>

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

                                            @csrf
                                            @method('DELETE')

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

                                                Delete

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="8"
                                    class="text-center empty-state">

                                    Tidak ada data admin

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        <div class="card-body">

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

                {{ $admins->links() }}

            </div>

        </div>

    </div>

</div>
@endsection

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

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

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

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

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

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

    function showAddCard() {

        hideEditCard();

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

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

    }

    function hideAddCard() {

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

        addForm.reset();

    }

    function hideEditCard() {

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

        editForm.reset();

        editForm.action = '';

        editTitle.textContent =
            'Edit Admin';

    }

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

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

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

            addForm.reset();

        });

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

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

                hideAddCard();

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

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

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

                document.getElementById('e_user_display').value =
                    username + ' - ' + fullname;

                document.getElementById('e_role').value =
                    this.getAttribute('data-role') || 'admin';

                document.getElementById('e_status').value =
                    this.getAttribute('data-status') || 'active';

                editTitle.textContent =
                    'Edit: ' + username;

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

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

            });

        });

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

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

            editForm.reset();

        });

});
</script>
@endpush