@extends('backoffice.layouts.app')

@section('title', ' Iframe Logları')

@section('content')
<div class="container-fluid unfinished-deposits-page">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                <div>
                    <h2 class="mb-1 d-flex align-items-center gap-2">
                        <i class="bi bi-hourglass-split"></i>
                        <span>Iframe Logları</span>
                    </h2>
                    <p class="text-muted mb-0">Iframe üzerinden gelen yatırım oturumlarını takip edin.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('backoffice.unfinished-deposits.index') }}">
                <div class="row g-3 align-items-end">
                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Başlangıç Tarihi</label>
                        <input type="text" name="date_from" class="form-control datetimepicker" placeholder="dd/mm/yyyy hh:mm" value="{{ $dateFrom->format('d/m/Y H:i') }}">
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Bitiş Tarihi</label>
                        <input type="text" name="date_to" class="form-control datetimepicker" placeholder="dd/mm/yyyy hh:mm" value="{{ $dateTo->format('d/m/Y H:i') }}">
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <label class="form-label">Site</label>
                        <select name="sid" class="form-select">
                            <option value="">Tüm Siteler</option>
                            @foreach($sites as $site)
                                <option value="{{ $site->sid }}" {{ $selectedSid === (string) $site->sid ? 'selected' : '' }}>
                                    {{ $site->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-xl-2 col-lg-3 col-md-6">
                        <label class="form-label">Durum</label>
                        <select name="status" class="form-select">
                            <option value="unfinished" {{ $status === 'unfinished' ? 'selected' : '' }}>Tümü</option>
                            <option value="entered" {{ $status === 'entered' ? 'selected' : '' }}>Sadece Form Açılan</option>
                            <option value="initialized" {{ $status === 'initialized' ? 'selected' : '' }}>Başlatılıp Bırakılan</option>
                            <option value="blocked" {{ $status === 'blocked' ? 'selected' : '' }}>Engellenenler</option>
                        </select>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-8">
                        <label class="form-label">Arama</label>
                        <input
                            type="text"
                            name="q"
                            class="form-control"
                            value="{{ $search }}"
                            placeholder="Oyuncu, oyuncu ID, IP veya trx"
                        >
                    </div>
                    <div class="col-xl-12">
                        <div class="d-flex gap-2 justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-funnel me-1"></i>Filtrele
                            </button>
                            <a href="{{ route('backoffice.unfinished-deposits.index') }}" class="btn btn-light border">
                                <i class="bi bi-arrow-counterclockwise me-1"></i>Sıfırla
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="unfinishedDepositsTable" class="table align-middle mb-0 unfinished-deposits-table">
                    <thead class="table-light">
                        <tr>
                            <th>Giriş</th>
                            <th>Site</th>
                            <th>Oyuncu</th>
                            <th>Durum</th>
                            <th>IP</th>
                            <th>Detay</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sessions as $session)
                            @php($statusMeta = \App\Http\Controllers\Backoffice\UnfinishedDepositController::statusMeta($session->status))
                            <tr class="{{ $statusMeta['row_class'] }}">
                                <td>
                                    <div class="fw-semibold">{{ optional($session->entered_at)->format('d.m.Y H:i') ?: '-' }}</div>
                                    <div class="small text-muted">Init: {{ optional($session->initialized_at)->format('d.m.Y H:i') ?: '-' }}</div>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $siteNamesBySid[$session->sid] ?? optional($session->site)->name ?: '-' }}</div>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $session->player_name ?: '-' }}</div>
                                    <div class="small text-muted text-break">{{ $session->player_id ?: '-' }}</div>
                                </td>
                                <td>
                                    <span class="badge {{ $statusMeta['badge_class'] }}">{{ $statusMeta['label'] }}</span>
                                    <div class="small text-muted mt-1">{{ $session->blocked_reason ?: '-' }}</div>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $session->ip_address ?: '-' }}</div>
                                </td>
                                <td>
                                    <div class="small text-muted text-break ua-line">
                                        {{ \App\Http\Controllers\Backoffice\UnfinishedDepositController::summarizeUserAgent($session->user_agent) }}
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-5">Kayıt bulunamadı.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
<style>
    .unfinished-deposits-page .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .unfinished-deposits-page .dataTables_wrapper .dt-toolbar-end {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .unfinished-deposits-page .dt-search {
        margin-left: 0;
        display: flex;
        align-items: center;
    }
    .unfinished-deposits-page .dt-search input {
        margin-left: 0.5rem;
    }
    .unfinished-deposits-page .dt-buttons .btn-success {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: #fff;
    }
    .unfinished-deposits-page .dataTables_wrapper .row:first-child {
        padding: 1rem 1rem 0;
    }
    .unfinished-deposits-page .dataTables_wrapper .row:last-child {
        padding: 0 1rem 1rem;
    }
    .unfinished-deposits-table tbody tr.is-entered > td {
        background: #fffdf1;
    }
    .unfinished-deposits-table tbody tr.is-initialized > td {
        background: #f3fbff;
    }
    .unfinished-deposits-table tbody tr.is-blocked > td {
        background: #fff1f1;
    }
    .unfinished-deposits-table tbody tr.is-confirmed > td {
        background: #eefaf3;
    }
    .unfinished-deposits-table td,
    .unfinished-deposits-table th {
        vertical-align: top;
    }
    .ua-line {
        max-width: 340px;
        word-break: break-word;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (!window.jQuery || !jQuery.fn.DataTable) {
        return;
    }

    flatpickr('.datetimepicker', {
        enableTime: true,
        time_24hr: true,
        dateFormat: 'd/m/Y H:i',
        minuteIncrement: 1,
        allowInput: true
    });

    jQuery('#unfinishedDepositsTable').DataTable({
        ordering: false,
        searching: true,
        info: true,
        pageLength: 25,
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, 'Tüm Kayıtlar']],
        dom: "<'row align-items-center g-3'<'col-md-6'><'col-md-6 dt-toolbar-end'Bf>>" +
            "<'row'<'col-12'tr>>" +
            "<'row align-items-center g-3'<'col-md-5'i><'col-md-7'p>>",
        buttons: [
            {
                extend: 'excelHtml5',
                text: '<i class=\"bi bi-file-earmark-excel-fill\"></i>Excel',
                className: 'btn btn-sm btn-success',
                title: 'Iframe_Loglari'
            }
        ],
        language: {
            search: 'Tabloda Ara',
            searchPlaceholder: 'Oyuncu, IP, trx...',
            lengthMenu: '_MENU_ kayıt göster',
            info: '_TOTAL_ kayıttan _START_ - _END_ arası',
            infoEmpty: 'Kayıt yok',
            zeroRecords: 'Kayıt bulunamadı',
            emptyTable: 'Kayıt bulunamadı',
            paginate: {
                first: 'İlk',
                last: 'Son',
                next: 'Sonraki',
                previous: 'Önceki'
            }
        }
    });
});
</script>
@endpush
