@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">
                    Management Balance
                </h5>

                <small class="text-body-secondary">
                    Tambah atau kurangi saldo member
                </small>

            </div>

            <span class="badge bg-label-primary px-3 py-2">
                Balance Manager
            </span>

        </div>

    </div>

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

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

            <div>

                <h6 class="mb-1 text-white fw-semibold">
                    Management Balance Users
                </h6>

                <small class="text-body-secondary">
                    Kelola saldo deposit dan withdraw member
                </small>

            </div>

        </div>

        <div class="card-body">

            <form method="POST"
                  action="{{ route('admin.members.managebalance.process') }}">

                @csrf

                <div class="row g-3">

                    {{-- USERNAME --}}
                    <div class="col-md-4">

                        <label class="form-label">
                            Username
                        </label>

                        <select name="username"
                                id="username_select"
                                class="form-select"
                                required
                                style="width:100%;">

                            @if(old('username'))

                                <option value="{{ old('username') }}"
                                        selected>

                                    {{ old('username') }}

                                </option>

                            @endif

                        </select>

                    </div>

                    {{-- TYPE --}}
                    <div class="col-md-4">

                        <label class="form-label">
                            Tipe
                        </label>

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

                            <option value="">
                                -- pilih --
                            </option>

                            <option value="deposit"
                                {{ old('type') === 'deposit' ? 'selected' : '' }}>

                                Tambah Saldo (Deposit)

                            </option>

                            <option value="withdraw"
                                {{ old('type') === 'withdraw' ? 'selected' : '' }}>

                                Kurangi Saldo (Withdraw)

                            </option>

                        </select>

                    </div>

                    {{-- AMOUNT --}}
                    <div class="col-md-4">

                        <label class="form-label">
                            Jumlah
                        </label>

                        <input type="number"
                               name="amount"
                               class="form-control"
                               required
                               min="1"
                               step="1"
                               value="{{ old('amount') }}"
                               placeholder="10000">

                    </div>

                    {{-- NOTE --}}
                    <div class="col-md-12">

                        <label class="form-label">
                            Catatan
                        </label>

                        <textarea name="note"
                                  class="form-control"
                                  rows="3"
                                  maxlength="255"
                                  placeholder="Alasan mutasi saldo (wajib)">{{ old('note') }}</textarea>

                    </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>
                        Proses

                    </button>

                    <button type="reset"
                            class="btn btn-outline-secondary">

                        Reset

                    </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">
                    History Mutasi
                </h6>

                <small class="text-body-secondary">
                    Semua riwayat perubahan saldo member
                </small>

            </div>

            <span class="badge rounded-pill bg-label-info px-3 py-2">
                {{ $logs->total() }} History
            </span>

        </div>

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

            <div class="table-responsive">

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

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>

                            <th>Username</th>

                            <th>Tipe</th>

                            <th>Jumlah</th>

                            <th>Saldo Sebelum</th>

                            <th>Saldo Sesudah</th>

                            <th>Catatan</th>

                            <th>Admin</th>

                            <th>Waktu</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($logs as $log)

                            <tr>

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

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

                                <td>

                                    @if($log->type === 'deposit')

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

                                    @else

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

                                    @endif

                                </td>

                                <td class="fw-semibold text-success">
                                    Rp {{ number_format((float) $log->amount, 0, ',', '.') }}
                                </td>

                                <td>
                                    Rp {{ number_format((float) $log->balance_before, 0, ',', '.') }}
                                </td>

                                <td>
                                    Rp {{ number_format((float) $log->balance_after, 0, ',', '.') }}
                                </td>

                                <td class="text-body-secondary">
                                    {{ $log->note }}
                                </td>

                                <td>
                                    {{ $log->admin_username ?? '-' }}
                                </td>

                                <td class="text-body-secondary">
                                    {{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d H:i:s') }}
                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    Belum ada riwayat mutasi

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        {{-- PAGINATION --}}
        @if ($logs->hasPages())

            <div class="card-footer border-top">

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

                    {{ $logs->links() }}

                </div>

            </div>

        @endif

    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

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

    const $ = window.jQuery || window.$;

    if (!$ || typeof $.fn.select2 !== 'function') return;

    $('#username_select').select2({
        placeholder: 'Pilih username member',
        allowClear: true,
        width: '100%',
        minimumInputLength: 0,

        ajax: {
            url: "{{ route('admin.members.managebalance.user-search') }}",
            type: 'GET',
            dataType: 'json',
            delay: 250,

            data: params => ({
                q: params.term || ''
            }),

            processResults: data => ({
                results: data.results || []
            }),

            cache: true
        }
    });

});
</script>
@endpush