@extends('adminlte::page')

@section('title', 'Kasir Pembayaran | Smart Cendekia')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center py-3">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Poppins', sans-serif; font-size: 1.75rem;">
                Kasir Pembayaran
            </h1>
            <p class="text-muted font-weight-medium mb-0" style="font-size: 0.95rem;">
                Scan kartu RFID atau cari siswa untuk memulai transaksi.
            </p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Home</a></li>
            <li class="breadcrumb-item active text-purple font-weight-bold">Kasir</li>
        </ol>
    </div>
@stop

@section('content')
    <div class="container-fluid px-0">
        
        {{-- HERO SECTION: PENCARIAN --}}
        <div class="row justify-content-center">
            <div class="col-lg-9 col-xl-8">
                <div class="card apex-card border-0 shadow-lg hover-lift mb-5">
                    <div class="card-body py-5 px-4 text-center bg-white position-relative overflow-hidden">
                        
                        {{-- Dekorasi Latar Belakang --}}
                        <div class="position-absolute" style="top: -20px; left: -20px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(91,36,122,0.05) 0%, rgba(255,255,255,0) 70%); border-radius: 50%;"></div>
                        <div class="position-absolute" style="bottom: -20px; right: -20px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(20,184,166,0.05) 0%, rgba(255,255,255,0) 70%); border-radius: 50%;"></div>

                        {{-- Animasi Ikon Scan --}}
                        <div class="mb-5 position-relative z-10">
                            <div class="symbol symbol-100px bg-light-purple rounded-circle d-inline-flex align-items-center justify-content-center p-4 mb-4 position-relative shadow-sm hover-scale">
                                <i class="fas fa-wifi fa-4x text-purple" style="transform: rotate(90deg);"></i>
                                <span class="position-absolute bg-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="bottom: 0px; right: 0px; width: 40px; height: 40px; border: 3px solid #fff;">
                                    <i class="fas fa-id-card text-dark"></i>
                                </span>
                            </div>
                            <h3 class="font-weight-bold text-dark mb-2 font-poppins">Mode Scan Aktif</h3>
                            <p class="text-muted mx-auto" style="max-width: 500px;">
                                Tempelkan kartu pada RFID Reader atau ketik Nama/NIS siswa secara manual pada kolom di bawah.
                            </p>
                        </div>

                        {{-- PERBAIKAN: Arahkan ke route index --}}
<form action="{{ route('keuangan.transaksi.index') }}" method="GET" id="searchForm" class="position-relative z-10">
    <div class="form-group mx-auto" style="max-width: 600px;">
        <div class="input-group input-group-lg apex-search-box shadow-sm rounded-pill overflow-hidden bg-white">
            <div class="input-group-prepend">
                <span class="input-group-text border-0 bg-transparent pl-4">
                    <i class="fas fa-search text-purple fa-lg"></i>
                </span>
            </div>
            {{-- Pastikan name="keyword" agar terbaca di controller --}}
            <input type="text" name="keyword" id="searchInput" class="form-control border-0 font-weight-bold text-center text-dark" 
                   placeholder="Scan Kartu / Ketik Nama Siswa..." value="{{ request('keyword') }}" 
                   autofocus autocomplete="off" style="font-size: 1.25rem; height: 60px;">
            <div class="input-group-append">
                <button class="btn btn-apex-primary px-5 font-weight-bold rounded-pill m-1" type="submit">
                    CARI <i class="fas fa-arrow-right ml-2"></i>
                </button>
            </div>
        </div>
               <div class="mt-3 d-flex align-items-center justify-content-center text-muted small">
                                    <span class="badge bg-light-success text-success mr-2 px-2 py-1 rounded"><i class="fas fa-check mr-1"></i> Auto-Focus</span>
                                    <span>Pastikan kursor berkedip di kolom input.</span>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        {{-- HASIL PENCARIAN --}}
        @if(isset($siswas))
        <div class="row justify-content-center animate__animated animate__fadeInUp">
            <div class="col-lg-10 col-xl-9">
                <div class="card apex-card border-0 shadow-sm">
                    <div class="card-header bg-white py-4 px-4 border-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase text-muted font-weight-bold mb-1" style="font-size: 0.75rem; letter-spacing: 1px;">Hasil Pencarian</h6>
                            <h5 class="font-weight-bold text-dark mb-0 font-poppins">
                                {{ $siswas->count() }} Data Ditemukan
                            </h5>
                        </div>
                        <div class="bg-light-purple text-purple rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-list-ul"></i>
                        </div>
                    </div>
                    
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0 w-100">
                                <thead class="bg-light">
                                    <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                                        <th class="pl-4 py-3 border-0">Profil Siswa</th>
                                        <th class="border-0">Identitas</th>
                                        <th class="border-0">Kelas</th>
                                        <th class="border-0">Status</th>
                                        <th class="text-right pr-4 border-0">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($siswas as $siswa)
                                        <tr class="group-row transition-bg">
                                            <td class="pl-4 py-3 border-top-0 border-bottom-light">
                                                <div class="d-flex align-items-center">
                                                    <div class="symbol symbol-50px mr-3">
                                                        {{-- Avatar Dinamis dengan Warna Pastel --}}
                                                        @php
                                                            $colors = ['bg-light-primary', 'bg-light-success', 'bg-light-warning', 'bg-light-danger', 'bg-light-info', 'bg-light-purple'];
                                                            $randomColor = $colors[$loop->index % count($colors)];
                                                            $textColor = str_replace('bg-light-', 'text-', $randomColor);
                                                        @endphp
                                                        <div class="{{ $randomColor }} {{ $textColor }} font-weight-bold rounded-circle d-flex align-items-center justify-content-center text-uppercase shadow-sm" 
                                                             style="width: 50px; height: 50px; font-size: 1.25rem;">
                                                            {{ substr($siswa->nama_lengkap, 0, 1) }}
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <span class="d-block font-weight-bold text-dark text-lg">{{ $siswa->nama_lengkap }}</span>
                                                        <small class="text-muted font-weight-medium">
                                                            <i class="fas fa-school mr-1 text-xs"></i> {{ $siswa->sekolah->nama_sekolah ?? '-' }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="border-top-0 border-bottom-light">
                                                <div class="d-flex flex-column">
                                                    <span class="text-dark font-weight-bold font-monospace">{{ $siswa->nis }}</span>
                                                    <small class="text-muted">NISN: {{ $siswa->nisn ?? '-' }}</small>
                                                </div>
                                            </td>
                                            <td class="border-top-0 border-bottom-light">
                                                <span class="badge bg-white border border-gray text-dark rounded-pill px-3 py-2 font-weight-bold shadow-sm">
                                                    {{ $siswa->kelas->nama_kelas ?? 'Tanpa Kelas' }}
                                                </span>
                                            </td>
                                            <td class="border-top-0 border-bottom-light">
                                                @if($siswa->status_siswa == 'Aktif')
                                                    <span class="badge bg-light-success text-success rounded-pill px-3 py-2 font-weight-bold">
                                                        <i class="fas fa-check-circle mr-1"></i> Aktif
                                                    </span>
                                                @else
                                                    <span class="badge bg-light-secondary text-secondary rounded-pill px-3 py-2 font-weight-bold">
                                                        {{ ucfirst($siswa->status_siswa) }}
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="text-right pr-4 border-top-0 border-bottom-light">
                                                <a href="{{ route('keuangan.transaksi.show', $siswa->id) }}" class="btn btn-apex-primary btn-sm rounded-pill px-4 py-2 font-weight-bold shadow-md hover-lift">
                                                    Proses Bayar <i class="fas fa-chevron-right ml-2"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-5 border-0">
                                                <div class="d-flex flex-column align-items-center justify-content-center opacity-75">
                                                    <div class="bg-light-danger rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                                        <i class="fas fa-user-slash fa-3x text-danger"></i>
                                                    </div>
                                                    <h5 class="font-weight-bold text-dark mb-1">Siswa Tidak Ditemukan</h5>
                                                    <p class="text-muted">Silakan periksa kembali kata kunci pencarian Anda.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

    </div>
@stop

{{-- =================================================================== --}}
{{-- CUSTOM CSS: APEX MODERN THEME --}}
{{-- =================================================================== --}}
@section('css')
<style>
    /* 1. Typography & Colors */
    .font-poppins { font-family: 'Poppins', sans-serif !important; }
    .font-monospace { font-family: 'Consolas', monospace !important; }
    
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    .bg-light-success { background-color: #E8FFF3 !important; }
    .text-success { color: #50CD89 !important; }
    .bg-light-primary { background-color: #E1F0FF !important; }
    .text-primary { color: #3699FF !important; }
    .bg-light-danger { background-color: #FFE2E5 !important; }
    .text-danger { color: #F64E60 !important; }
    .bg-light-warning { background-color: #FFF4DE !important; }
    .text-warning { color: #FFA800 !important; }
    .bg-light-info { background-color: #E1F0FF !important; }
    .text-info { color: #7239EA !important; } /* Info slightly purple */

    /* 2. Apex Card & Container */
    .apex-card {
        border-radius: 20px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* 3. Search Box Styling (Solid Style) */
    .apex-search-box {
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }
    .apex-search-box:focus-within {
        border-color: #5B247A; /* Primary Purple Border */
        box-shadow: 0 0 0 4px rgba(91, 36, 122, 0.15) !important;
    }
    .form-control:focus {
        background-color: #fff;
        box-shadow: none;
    }

    /* 4. Buttons (Pill & Gradient) */
    .btn-apex-primary {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white;
        border: none;
        transition: all 0.3s ease;
    }
    .btn-apex-primary:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }

    /* 5. Table Styling (Clean) */
    .border-bottom-light { border-bottom: 1px solid #F3F6F9 !important; }
    .transition-bg { transition: background-color 0.2s ease; }
    .transition-bg:hover { background-color: #F9F9F9; }

    /* 6. Animations */
    .hover-lift:hover { transform: translateY(-5px); }
    .hover-scale:hover { transform: scale(1.05); transition: transform 0.3s ease; }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        // Auto Focus Input (UX Critical)
        $('#searchInput').focus();

        // Optional: Kembalikan fokus jika klik di area kosong
        /*
        $(document).click(function(e) { 
            if(!$(e.target).closest('a, button, input').length) {
                $('#searchInput').focus(); 
            }
        });
        */
    });
</script>
@stop