@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: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">
                        Members Data
                    </h5>

                    <small class="text-body-secondary">
                        Manage member data
                    </small>

                </div>

                <span class="badge bg-label-primary px-3 py-2">
                    {{ $users->total() }} Members
                </span>

            </div>

        </div>

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

            <div class="card-header card-header-custom d-flex justify-content-between align-items-center flex-wrap gap-3">

                <div>

                    <h6 class="mb-1 fw-semibold text-white">
                        Search Member
                    </h6>

                    <small class="text-body-secondary">
                        Cari username, email, phone, atau fullname
                    </small>

                </div>

            </div>

            <div class="card-body">

                <div class="row g-2 align-items-center">

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

                        <form id="searchForm" method="POST" action="{{ route('admin.members.search') }}"
                            class="d-flex flex-column flex-md-row gap-2">

                            @csrf

                            <div class="input-group flex-grow-1 search-box">

                                <span class="input-group-text">
                                    <i class="ti tabler-search"></i>
                                </span>

                                <input type="text" name="search" class="form-control"
                                    placeholder="Search username / email / phone / fullname..." value="{{ $search }}">

                            </div>

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

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

                                    Search

                                </button>

                                @if (!empty($search))
                                    <a href="{{ route('admin.members.reset') }}"
                                        class="btn btn-outline-secondary text-nowrap">

                                        Reset

                                    </a>
                                @endif

                            </div>

                        </form>

                    </div>

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

                        <div class="d-grid d-sm-flex gap-2 justify-content-lg-end">

                            <button type="button" class="btn btn-label-primary text-nowrap" id="btn-export"
                                data-module="members">

                                <i class="ti tabler-upload me-1"></i>
                                Export

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

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

            <div class="card-header card-header-custom d-flex justify-content-between align-items-center">

                <div>

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

                        Edit Member

                    </h6>

                    <small class="text-body-secondary">
                        Update member information
                    </small>

                </div>

                <span class="badge bg-label-warning">
                    Editing
                </span>

            </div>

            <div class="card-body">

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

                    @csrf
                    @method('PUT')

                    <div class="row g-3">

                        <div class="col-md-4">
                            <label class="form-label">Extplayer</label>
                            <input type="text" id="edit_extplayer" name="extplayer" class="form-control" maxlength="50">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Username</label>
                            <input type="text" id="edit_username" name="username" class="form-control" required
                                maxlength="20">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Password (opsional)</label>
                            <input type="password" id="edit_password" name="password" class="form-control" minlength="8"
                                maxlength="100">

                            <small class="text-body-secondary">
                                Kosongkan jika tidak diubah
                            </small>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Fullname</label>
                            <input type="text" id="edit_fullname" name="fullname" class="form-control" maxlength="50">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" id="edit_email" name="email" class="form-control" maxlength="100">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Phone</label>
                            <input type="text" id="edit_phone" name="no_handphone" class="form-control" maxlength="15">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Payment Method</label>
                            <input type="text" id="edit_payment_method" name="payment_method" class="form-control"
                                maxlength="50">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Bank</label>
                            <input type="text" id="edit_bank" name="bank" class="form-control" maxlength="100">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Emoney</label>
                            <input type="text" id="edit_emoney" name="emoney" class="form-control" maxlength="100">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label">Nama Rekening</label>
                            <input type="text" id="edit_nama_rekening" name="nama_rekening" class="form-control"
                                maxlength="100">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Nomor Rekening</label>
                            <input type="text" id="edit_nomor_rekening" name="nomor_rekening" class="form-control"
                                maxlength="50">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Referral</label>
                            <input type="text" id="edit_referral" name="referral" class="form-control"
                                maxlength="50">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Upline User</label>
                            <input type="text" id="edit_upline_user" name="upline_user" class="form-control"
                                maxlength="50">
                        </div>

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

                            <select id="edit_status" name="status_user" class="form-select" required>

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

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

                            </select>

                        </div>

                    </div>

                    <div class="mt-4 d-flex 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="btnCancelEditUser">

                            Batal

                        </button>

                    </div>

                </form>

            </div>

        </div>

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

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

                    <small class="text-body-secondary">
                        Showing {{ $users->count() }} of {{ $users->total() }} records
                    </small>

                </div>

                <span class="badge rounded-pill bg-label-info px-3 py-2">
                    {{ $users->currentPage() }} / {{ $users->lastPage() }}
                </span>

            </div>

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

                <div class="table-responsive">

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

                        <thead class="table-dark">

                            <tr>

                                <th>ID</th>

                                <th>Username</th>

                                <th>Fullname</th>

                                <th>Email</th>

                                <th class="d-none d-lg-table-cell">
                                    Phone
                                </th>

                                <th>Balance</th>

                                <th>Status</th>

                                <th class="text-center">
                                    Action
                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            @forelse($users as $user)
                                <tr>

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

                                    <td class="fw-semibold text-white">
                                        {{ $user->username }}
                                    </td>

                                    <td>
                                        {{ $user->fullname }}
                                    </td>

                                    <td class="text-truncate text-body-secondary" style="max-width:180px;">

                                        {{ $user->email }}

                                    </td>

                                    <td class="d-none d-lg-table-cell">
                                        {{ $user->no_handphone }}
                                    </td>

                                    <td class="fw-semibold text-warning">

                                        Rp
                                        {{ number_format((float) (optional($user->balance)->active ?? 0), 0, ',', '.') }}

                                    </td>

                                    <td>

                                        @if ($user->status_user == 'active')
                                            <span class="badge bg-success">
                                                Active
                                            </span>
                                        @elseif($user->status_user == 'suspend')
                                            <span class="badge bg-danger">
                                                Suspend
                                            </span>
                                        @elseif($user->status_user == 'offgame')
                                            <span class="badge bg-danger">
                                                GameOff
                                            </span>
                                        @endif

                                    </td>

                                    <td>

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

                                            <button type="button" class="btn btn-sm btn-primary btn-edit-user"
                                                data-update-url="{{ route('admin.members.update', $user->id) }}"
                                                data-username="{{ e($user->username) }}"
                                                data-fullname="{{ e($user->fullname) }}"
                                                data-email="{{ e($user->email) }}"
                                                data-phone="{{ e($user->no_handphone) }}"
                                                data-extplayer="{{ e($user->extplayer) }}"
                                                data-payment-method="{{ e($user->payment_method) }}"
                                                data-bank="{{ e($user->bank) }}" data-emoney="{{ e($user->emoney) }}"
                                                data-nama-rekening="{{ e($user->nama_rekening) }}"
                                                data-nomor-rekening="{{ e($user->nomor_rekening) }}"
                                                data-referral="{{ e($user->referral) }}"
                                                data-upline-user="{{ e($user->upline_user) }}"
                                                data-status="{{ (int) $user->status_user }}">

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

                                            </button>

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

                                                @csrf
                                                @method('DELETE')

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

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

                                                </button>

                                            </form>

                                        </div>

                                    </td>

                                </tr>

                            @empty

                                <tr>

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

                                        Tidak ada data

                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

            {{-- PAGINATION --}}
            @if ($users->hasPages())
                <div class="card-footer border-top">

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

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

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

                                <a class="page-link" href="{{ $users->onFirstPage() ? '#' : $users->url(1) }}">

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

                                </a>

                            </li>

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

                                <a class="page-link" href="{{ $users->previousPageUrl() ?: '#' }}">

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

                                </a>

                            </li>

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

                            @for ($i = $start; $i <= $end; $i++)
                                <li class="page-item {{ $i == $users->currentPage() ? 'active' : '' }}">

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

                                        {{ $i }}

                                    </a>

                                </li>
                            @endfor

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

                                <a class="page-link" href="{{ $users->nextPageUrl() ?: '#' }}">

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

                                </a>

                            </li>

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

                                <a class="page-link"
                                    href="{{ $users->hasMorePages() ? $users->url($users->lastPage()) : '#' }}">

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

                                </a>

                            </li>

                        </ul>

                    </div>

                </div>
            @endif

        </div>

    </div>
@endsection

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

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

            if (searchForm && typeof FormValidation !== 'undefined') {

                FormValidation.formValidation(searchForm, {
                    fields: {
                        search: {
                            validators: {
                                stringLength: {
                                    min: 2,
                                    max: 100,
                                    message: 'Minimal 2 karakter'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9@._+\-\s]+$/,
                                    message: 'Karakter tidak valid'
                                }
                            }
                        }
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap5: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.input-group'
                        }),
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        autoFocus: new FormValidation.plugins.AutoFocus()
                    }
                });

            }

            const editCard = document.getElementById('editUserCard');
            const editForm = document.getElementById('editUserForm');
            const editTitle = document.getElementById('editUserTitle');

            function closeEditCard() {

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

                editForm.reset();

                editForm.action = '';

                editTitle.textContent = 'Edit Member';
            }

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

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

                        document.getElementById('edit_username').value =
                            this.getAttribute('data-username') || '';

                        document.getElementById('edit_fullname').value =
                            this.getAttribute('data-fullname') || '';

                        document.getElementById('edit_email').value =
                            this.getAttribute('data-email') || '';

                        document.getElementById('edit_phone').value =
                            this.getAttribute('data-phone') || '';

                        document.getElementById('edit_status').value =
                            this.getAttribute('data-status') || '0';

                        document.getElementById('edit_extplayer').value =
                            this.getAttribute('data-extplayer') || '';

                        document.getElementById('edit_payment_method').value =
                            this.getAttribute('data-payment-method') || '';

                        document.getElementById('edit_bank').value =
                            this.getAttribute('data-bank') || '';

                        document.getElementById('edit_emoney').value =
                            this.getAttribute('data-emoney') || '';

                        document.getElementById('edit_nama_rekening').value =
                            this.getAttribute('data-nama-rekening') || '';

                        document.getElementById('edit_nomor_rekening').value =
                            this.getAttribute('data-nomor-rekening') || '';

                        document.getElementById('edit_referral').value =
                            this.getAttribute('data-referral') || '';

                        document.getElementById('edit_upline_user').value =
                            this.getAttribute('data-upline-user') || '';

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

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

                        editTitle.textContent =
                            'Edit: ' +
                            (this.getAttribute('data-username') || 'Member');

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

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

                    });

                });

            document.getElementById('btnCancelEditUser')
                .addEventListener('click', closeEditCard);

            const btnExport = document.getElementById('btn-export');

            if (btnExport) {

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

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

                    const url = new URL(
                        "{{ route('admin.exports.module', ['module' => '__MODULE__']) }}"
                        .replace('__MODULE__', module),
                        window.location.origin
                    );

                    const currentParams =
                        new URLSearchParams(window.location.search);

                    currentParams.forEach((value, key) => {
                        url.searchParams.set(key, value);
                    });

                    window.location.href = url.toString();

                });

            }

        });
    </script>
@endpush