@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .history-table {
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(148,163,184,.08);
    }

    .history-table thead.table-dark th {
        background: rgba(255,255,255,.03) !important;
        border-bottom: 1px solid rgba(148,163,184,.08);
        color: #94a3b8;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: 1rem;
    }

    .history-table tbody td {
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
        vertical-align: middle;
    }

    .history-table tbody tr {
        transition: all .2s ease;
    }

    .history-table tbody tr:hover {
        background: rgba(255,255,255,.025);
    }

    .search-box {
        max-width: 420px;
    }

    .pagination .page-link {
        background: rgba(255,255,255,.03);
        border-color: rgba(148,163,184,.08);
        color: #cbd5e1;
    }

    .pagination .page-item.active .page-link {
        background: #696cff;
        border-color: #696cff;
        color: #fff;
    }

    .pagination .page-link:hover {
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .balance-box {
        line-height: 1.6;
    }
</style>
@endpush

@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">
                    History Launch Game
                </h5>

                <small class="text-body-secondary">
                    Monitoring game launch activity
                </small>

            </div>

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

                <small class="text-body-secondary">
                    Cari berdasarkan user, game, atau provider
                </small>

            </div>

        </div>

        <div class="card-body">

            <form method="POST"
                  action="{{ route('admin.games.history.launch') }}"
                  class="d-flex flex-wrap gap-2 align-items-center">

                @csrf

                <div class="input-group search-box">

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

                    <input type="text"
                           name="search"
                           class="form-control"
                           placeholder="Search user / game / provider..."
                           value="{{ $search }}">

                </div>

                <button class="btn btn-primary">

                    Search

                </button>

                @if(!empty($search))

                    <a href="{{ route('admin.games.history.launch.reset') }}"
                       class="btn btn-outline-secondary">

                        Reset

                    </a>

                @endif

            </form>

        </div>

    </div>

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

        {{-- HEADER --}}
        <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">
                    Launch History Data
                </h6>

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

            </div>

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

        </div>

        {{-- TABLE --}}
        <div class="card-body p-0">

            <div class="table-responsive">

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

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>

                            <th>User</th>

                            <th>Game</th>

                            <th>Provider</th>

                            <th>Balance</th>

                            <th>Bet</th>

                            <th>Win</th>

                            <th>Status</th>

                            <th>IP</th>

                            <th>Date</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($histories as $row)

                            <tr>

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

                                {{-- USER --}}
                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $row->extplayer }}
                                    </div>

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

                                </td>

                                {{-- GAME --}}
                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $row->game_name }}
                                    </div>

                                    <small class="text-body-secondary">
                                        {{ $row->game_code }}
                                    </small>

                                </td>

                                {{-- PROVIDER --}}
                                <td>

                                    <span class="text-body-secondary">
                                        {{ $row->game_provider }}
                                    </span>

                                </td>

                                {{-- BALANCE --}}
                                <td>

                                    <div class="balance-box">

                                        <small class="text-body-secondary d-block">
                                            Before:
                                            {{ $row->balance_before }}
                                        </small>

                                        <small class="text-body-secondary d-block">
                                            After:
                                            {{ $row->balance_after }}
                                        </small>

                                    </div>

                                </td>

                                {{-- BET --}}
                                <td>

                                    <span class="text-warning fw-semibold">
                                        {{ $row->bet_amount }}
                                    </span>

                                </td>

                                {{-- WIN --}}
                                <td>

                                    <span class="text-success fw-semibold">
                                        {{ $row->win_amount }}
                                    </span>

                                </td>

                                {{-- STATUS --}}
                                <td>

                                    @if($row->status == 'success')

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

                                    @else

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

                                    @endif

                                </td>

                                {{-- IP --}}
                                <td>

                                    <span class="text-body-secondary">
                                        {{ $row->ip_address }}
                                    </span>

                                </td>

                                {{-- DATE --}}
                                <td>

                                    <span class="text-body-secondary">
                                        {{ $row->created_at }}
                                    </span>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    Tidak ada data

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

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

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

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

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

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

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

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

                            </a>

                        </li>

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

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

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

                            </a>

                        </li>

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

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

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

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

                                    {{ $i }}

                                </a>

                            </li>

                        @endfor

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

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

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

                            </a>

                        </li>

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

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

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

                            </a>

                        </li>

                    </ul>

                </div>

            </div>

        @endif

    </div>

</div>
@endsection