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

                <small class="text-body-secondary">
                    Data upline dan downline member
                </small>

            </div>

            <span class="badge bg-label-primary px-3 py-2">
                {{ $referrals->total() }} Referral
            </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 Referral
                </h6>

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

            </div>

        </div>

        <div class="card-body">

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

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

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

                        <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"
                                value="{{ $search }}"
                                class="form-control"
                                placeholder="Search referral code / username / email..."
                            >

                        </div>

                        <select name="per_page"
                                class="form-select w-auto">

                            @foreach([10,20,50,100] as $size)

                                <option value="{{ $size }}"
                                    {{ (int) $perPage === $size ? 'selected' : '' }}>

                                    {{ $size }} / page

                                </option>

                            @endforeach

                        </select>

                        @if(request('no_referral') == '1')

                            <input type="hidden"
                                   name="no_referral"
                                   value="1">

                        @endif

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

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

                                Search

                            </button>

                            @if($search || request('per_page') || request('no_referral'))

                                <a href="{{ route('admin.members.referral') }}"
                                   class="btn btn-outline-secondary text-nowrap">

                                    Batal

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

                        <a href="{{ route('admin.members.referral', array_merge(request()->except('page'), ['no_referral' => request('no_referral') == '1' ? 0 : 1])) }}"
                           class="btn {{ request('no_referral') == '1' ? 'btn-warning' : 'btn-label-warning' }} text-nowrap">

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

                            {{ request('no_referral') == '1'
                                ? 'No Referral: ON'
                                : 'Filter No Referral' }}

                        </a>

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

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

                        </button>

                    </div>

                </div>

            </div>

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

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

            </div>

            <span class="badge rounded-pill bg-label-info px-3 py-2">
                {{ $referrals->currentPage() }} / {{ $referrals->lastPage() }}
            </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>Downline</th>

                            <th>Upline</th>

                            <th>Level</th>

                            <th>Referral Code</th>

                            <th>Total Deposit</th>

                            <th>Total Turnover</th>

                            <th>Total Bonus</th>

                            <th>Status</th>

                            <th>Created</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($referrals as $r)

                            <tr>

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

                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $r->downline_username ?? '-' }}
                                    </div>

                                    <small class="text-body-secondary">
                                        ID: {{ $r->user_id }}
                                    </small>

                                </td>

                                <td>

                                    <div class="fw-semibold text-white">

                                        @if(request('no_referral') == '1')

                                            NO UPLINE

                                        @else

                                            {{ $r->upline_username ?? '-' }}

                                        @endif

                                    </div>

                                    <small class="text-body-secondary">

                                        ID:

                                        @if(request('no_referral') == '1')

                                            -

                                        @else

                                            {{ $r->upline_id ?? '-' }}

                                        @endif

                                    </small>

                                </td>

                                <td>
                                    <span class="badge bg-label-info">
                                        Level {{ $r->level }}
                                    </span>
                                </td>

                                <td class="fw-semibold text-warning">
                                    {{ $r->referral_code ?? '-' }}
                                </td>

                                <td>
                                    {{ number_format((float)($r->total_deposit ?? 0), 0, ',', '.') }}
                                </td>

                                <td>
                                    {{ number_format((float)($r->total_turnover ?? 0), 0, ',', '.') }}
                                </td>

                                <td class="fw-semibold text-success">
                                    {{ number_format((float)($r->total_bonus ?? 0), 0, ',', '.') }}
                                </td>

                                <td>

                                    @if($r->status == 'active')

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

                                    @else

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

                                    @endif

                                </td>

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

                            </tr>

                        @empty

                            <tr>

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

                                    Tidak ada data referral

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        {{-- PAGINATION --}}
        @if ($referrals->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 {{ $referrals->onFirstPage() ? 'disabled' : '' }}">

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

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

                            </a>

                        </li>

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

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

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

                            </a>

                        </li>

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

                        @for ($i = $start; $i <= $end; $i++)

                            <li class="page-item {{ $i == $referrals->currentPage() ? 'active' : '' }}">

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

                                    {{ $i }}

                                </a>

                            </li>

                        @endfor

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

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

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

                            </a>

                        </li>

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

                            <a class="page-link"
                               href="{{ $referrals->hasMorePages() ? $referrals->url($referrals->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 btnExport = document.getElementById('btn-export');

    if (!btnExport) return;

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

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

        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