@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;
    }

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

    .provider-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;
    }

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

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

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

    .provider-thumb {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        object-fit: cover;
        border: 1px solid rgba(148,163,184,.12);
        background: rgba(255,255,255,.03);
        flex-shrink: 0;
    }

    .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;
    }
</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">
                    Provider List
                </h5>

                <small class="text-body-secondary">
                    Manage game providers, codes, types, and status
                </small>

            </div>

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

        </div>

    </div>

    {{-- ALERT --}}
    @if (session('success'))

        <div class="alert alert-success alert-dismissible mb-4"
             role="alert">

            {{ session('success') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close"></button>

        </div>

    @endif

    @if (session('error'))

        <div class="alert alert-danger alert-dismissible mb-4"
             role="alert">

            {{ session('error') }}

            <button type="button"
                    class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close"></button>

        </div>

    @endif

    {{-- 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 Provider
                </h6>

                <small class="text-body-secondary">
                    Cari provider berdasarkan nama, code, atau type
                </small>

            </div>

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

                <button type="button"
                        class="btn btn-label-primary"
                        disabled>

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

                </button>

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

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

                </button>

            </div>

        </div>

        <div class="card-body">

            <form id="searchForm"
                  method="POST"
                  action="{{ route('admin.games.providers.index') }}">

                @csrf

                <div class="d-flex flex-wrap gap-2 align-items-center">

                    <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 provider / code / type..."
                            value="{{ old('search', $search ?? '') }}"
                            minlength="2"
                            maxlength="100"
                            autocomplete="off">

                    </div>

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

                        Search

                    </button>

                    @if (!empty($search))

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

                            Reset

                        </a>

                    @endif

                </div>

            </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">
                    Provider Data
                </h6>

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

            </div>

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

        </div>

        {{-- TABLE --}}
        <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 style="width:80px;">
                                ID
                            </th>

                            <th>
                                Provider
                            </th>

                            <th>
                                Code
                            </th>

                            <th>
                                Type
                            </th>

                            <th>
                                Status
                            </th>

                            <th class="text-center"
                                style="width:160px;">

                                Action

                            </th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse ($providers as $p)

                            <tr>

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

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

                                    <div class="d-flex align-items-center gap-3">

                                        <img
                                            src="{{ $p->provider_image ?: asset('images/provider/default.png') }}"
                                            alt="{{ $p->provider_name }}"
                                            class="provider-thumb"
                                            loading="lazy"
                                            onerror="this.onerror=null;this.src='{{ asset('images/provider/default.png') }}';"
                                        >

                                        <div>

                                            <div class="fw-semibold text-white">
                                                {{ $p->provider_name }}
                                            </div>

                                        </div>

                                    </div>

                                </td>

                                {{-- CODE --}}
                                <td>

                                    <span class="text-body-secondary">
                                        {{ $p->provider_code }}
                                    </span>

                                </td>

                                {{-- TYPE --}}
                                <td>

                                    <span class="text-body-secondary">
                                        {{ ucfirst((string) $p->provider_type) }}
                                    </span>

                                </td>

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

                                    @if ((int) $p->provider_status === 1)

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

                                    @else

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

                                    @endif

                                </td>

                                {{-- ACTION --}}
                                <td class="text-center">

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

                                        <button type="button"
                                                class="btn btn-sm btn-primary"
                                                disabled>

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

                                        </button>

                                        <button type="button"
                                                class="btn btn-sm btn-danger"
                                                disabled>

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

                                        </button>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

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

                                    Tidak ada data

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

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

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

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

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

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

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

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

                            </a>

                        </li>

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

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

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

                            </a>

                        </li>

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

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

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

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

                                    {{ $i }}

                                </a>

                            </li>

                        @endfor

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

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

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

                            </a>

                        </li>

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

                            <a class="page-link"
                               href="{{ $providers->hasMorePages() ? $providers->url($providers->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 form = document.getElementById('searchForm');

    if (!form || typeof FormValidation === 'undefined') {
        return;
    }

    FormValidation.formValidation(form, {

        fields: {

            search: {

                validators: {

                    stringLength: {

                        min: 2,
                        max: 100,
                        message: 'Minimal 2 karakter dan maksimal 100 karakter.'

                    }

                }

            }

        },

        plugins: {

            trigger: new FormValidation.plugins.Trigger(),

            bootstrap5: new FormValidation.plugins.Bootstrap5({
                rowSelector: '.input-group'
            }),

        }

    });

});
</script>
@endpush