@extends('adminlte::page')

@section('title', 'Smart Billing Matrix | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                <i class="fas fa-magic text-purple mr-2"></i> Smart Billing Engine
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Atur nominal biaya yang berbeda-beda secara otomatis berdasarkan kategori siswa.
            </p>
        </div>
        <div class="mt-3 mt-md-0">
            <ol class="breadcrumb bg-transparent p-0 m-0">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('keuangan.dashboard') }}" class="text-muted">Keuangan</a></li>
                <li class="breadcrumb-item active text-purple font-weight-bold">Smart Tarif</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">

    {{-- Alert Messages --}}
    @if(session('success'))
        <div class="alert bg-light-success text-success border-0 shadow-sm mb-4 rounded-lg fade show">
            <i class="fas fa-check-circle mr-2"></i> <b>Sukses!</b> {{ session('success') }}
            <button type="button" class="close text-success" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert bg-light-danger text-danger border-0 shadow-sm mb-4 rounded-lg fade show">
            <i class="fas fa-exclamation-triangle mr-2"></i> <b>Gagal!</b> {{ session('error') }}
            <button type="button" class="close text-danger" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
        
        {{-- TABS NAVIGATION --}}
        <div class="card-header bg-white p-0 border-bottom border-light">
            <ul class="nav nav-tabs nav-justified border-0" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active font-weight-bold py-3 px-4 border-0 text-muted transition-theme" id="kategori-tab" data-toggle="tab" href="#kategori" role="tab">
                        <i class="fas fa-tags text-purple mr-2"></i> 1. Master Kategori Siswa
                    </a>
                </li>
                <li class="nav-item border-left border-light">
                    <a class="nav-link font-weight-bold py-3 px-4 border-0 text-muted transition-theme" id="matriks-tab" data-toggle="tab" href="#matriks" role="tab">
                        <i class="fas fa-table text-primary mr-2"></i> 2. Setting Matriks Tarif
                    </a>
                </li>
            </ul>
        </div>

        <div class="tab-content" id="myTabContent">
            
            {{-- ========================================================= --}}
            {{-- TAB 1: KATEGORI SISWA --}}
            {{-- ========================================================= --}}
            <div class="tab-pane fade show active p-4 p-md-5" id="kategori" role="tabpanel">
                <div class="row">
                    {{-- Form Tambah Kategori --}}
                    <div class="col-md-4 mb-4">
                        <div class="card bg-light border-0 rounded-xl shadow-none">
                            <div class="card-body p-4">
                                <h6 class="font-weight-bold text-dark mb-4">
                                    <i class="fas fa-plus-circle text-purple mr-2"></i>Tambah Kategori Baru
                                </h6>
                                <form action="{{ route('keuangan.kategori.store') }}" method="POST">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <label class="text-muted text-xs font-weight-bold text-uppercase">Nama Kategori <span class="text-danger">*</span></label>
                                        <input type="text" name="nama_kategori" class="form-control form-control-solid" placeholder="Contoh: Beasiswa Prestasi, Anak Guru..." required>
                                    </div>
                                    <div class="form-group mb-4">
                                        <label class="text-muted text-xs font-weight-bold text-uppercase">Keterangan (Opsional)</label>
                                        <textarea name="keterangan" class="form-control form-control-solid" rows="3" placeholder="Penjelasan singkat kategori ini..."></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-apex-purple btn-block rounded-pill font-weight-bold py-2 shadow-sm hover-lift">
                                        <i class="fas fa-save mr-2"></i> Simpan Kategori
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Tabel List Kategori --}}
                    <div class="col-md-8">
                        <h6 class="font-weight-bold text-dark mb-3">Daftar Kategori Tersedia</h6>
                        <div class="table-responsive border rounded-xl">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr class="text-muted text-uppercase text-xs font-weight-bold">
                                        <th class="pl-4 py-3" width="40%">Nama Kategori</th>
                                        <th class="py-3" width="60%">Keterangan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($kategoris as $kat)
                                    <tr>
                                        <td class="pl-4 py-3">
                                            <span class="badge bg-light-purple text-purple px-3 py-2 rounded-pill font-weight-bold shadow-sm" style="font-size: 0.85rem;">
                                                <i class="fas fa-tag mr-1"></i> {{ $kat->nama_kategori }}
                                            </span>
                                        </td>
                                        <td class="text-muted text-sm py-3">
                                            {{ $kat->keterangan ?? 'Tidak ada keterangan khusus.' }}
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="2" class="text-center py-5">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                                    <i class="fas fa-tags fa-2x text-muted opacity-50"></i>
                                                </div>
                                                <h6 class="font-weight-bold text-dark">Belum Ada Kategori</h6>
                                                <p class="text-muted small">Buat kategori pertama Anda melalui form di samping kiri.</p>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ========================================================= --}}
            {{-- TAB 2: MATRIKS TARIF (SMART ENGINE) --}}
            {{-- ========================================================= --}}
            <div class="tab-pane fade p-4 p-md-5" id="matriks" role="tabpanel">
                @if(count($kategoris) > 0 && count($posBiayas) > 0)
                    
                    <div class="d-flex align-items-start bg-light-info p-4 rounded-xl border-0 mb-4">
                        <div class="bg-white text-info rounded-circle p-2 mr-3 shadow-sm d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; flex-shrink: 0;">
                            <i class="fas fa-lightbulb fa-lg"></i>
                        </div>
                        <div>
                            <h6 class="text-info font-weight-bold mb-1">Panduan Pengaturan Matriks Tarif</h6>
                            <p class="text-muted text-sm mb-0" style="line-height: 1.6;">
                                Masukkan nominal tarif khusus untuk masing-masing kategori siswa. Biarkan angka <b>0</b> jika kategori tersebut digratiskan. Sistem secara otomatis akan membebankan tarif ini ke siswa sesuai kategorinya saat Anda melakukan <i>Generate Tagihan</i>.
                            </p>
                        </div>
                    </div>

                    <form action="{{ route('keuangan.tarif.update_massal') }}" method="POST">
                        @csrf
                        <div class="table-responsive border rounded-xl mb-4 shadow-sm">
                            <table class="table table-bordered table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="text-center align-middle bg-white" style="width: 250px; border-bottom: 2px solid #E4E6EF;">
                                            <span class="text-uppercase text-muted text-xs font-weight-bolder letter-spacing-1">
                                                Master Pos Biaya
                                            </span>
                                        </th>
                                        
                                        {{-- Render Kolom Berdasarkan Kategori --}}
                                        @foreach($kategoris as $kat)
                                            <th class="text-center align-middle bg-light-purple border-bottom-0">
                                                <div class="text-purple font-weight-bold text-sm mb-1">{{ strtoupper($kat->nama_kategori) }}</div>
                                                <span class="badge bg-white text-purple shadow-sm px-2 text-xs">Tarif Khusus</span>
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Render Baris Berdasarkan Pos Biaya --}}
                                    @foreach($posBiayas as $pos)
                                        <tr>
                                            <td class="align-middle bg-white pl-4">
                                                <div class="font-weight-bold text-dark" style="font-size: 0.95rem;">
                                                    <i class="fas fa-wallet text-muted mr-2"></i>{{ $pos->nama_pembayaran }}
                                                </div>
                                                <div class="text-xs text-muted mt-1">
                                                    Tarif Reguler/Default: <strong class="text-dark">Rp {{ number_format($pos->nominal_default, 0, ',', '.') }}</strong>
                                                </div>
                                            </td>
                                            
                                            {{-- Render Input Sel Matriks --}}
                                            @foreach($kategoris as $kat)
                                                @php
                                                    $key = $pos->id . '_' . $kat->id;
                                                    // Ambil nilai tarif jika sudah pernah di-setting, jika belum tampilkan 0
                                                    $nominal = isset($tarifExisting[$key]) ? $tarifExisting[$key]->nominal : 0;
                                                @endphp
                                                <td class="p-3 align-middle" style="background-color: #FAFBFC;">
                                                    <div class="input-group input-group-solid shadow-sm rounded-lg" style="overflow: hidden;">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text bg-white border-0 text-muted font-weight-bold">Rp</span>
                                                        </div>
                                                        <input type="text" 
                                                               name="tarif[{{ $pos->id }}][{{ $kat->id }}]" 
                                                               class="form-control border-0 text-right font-weight-bolder text-dark format-rupiah" 
                                                               value="{{ number_format($nominal, 0, '', '.') }}" 
                                                               style="background-color: #white; font-size: 1rem;">
                                                    </div>
                                                </td>
                                            @endforeach

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="text-right">
                            <button type="submit" class="btn btn-apex-purple px-5 py-3 font-weight-bold rounded-pill shadow hover-lift" style="font-size: 1.1rem;">
                                <i class="fas fa-save mr-2"></i> Terapkan & Simpan Matriks
                            </button>
                        </div>
                    </form>
                @else
                    <div class="text-center py-5">
                        <div class="bg-light-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 100px; height: 100px;">
                            <i class="fas fa-exclamation-triangle fa-3x text-warning"></i>
                        </div>
                        <h4 class="font-weight-bold text-dark">Data Persyaratan Belum Lengkap</h4>
                        <p class="text-muted" style="max-width: 500px; margin: 0 auto;">
                            Anda harus memiliki minimal <b>1 Master Pos Biaya</b> (di menu Pos Biaya) dan <b>1 Kategori Siswa</b> (di Tab 1 sebelah kiri) terlebih dahulu agar sistem dapat membentuk Matriks Tarif Otomatis.
                        </p>
                    </div>
                @endif
            </div>

        </div>
    </div>
</div>
@stop

@section('css')
<style>
    /* Gradient Button Theme */
    .btn-apex-purple { 
        background: linear-gradient(135deg, #2E1451 0%, #7B2CBF 100%); 
        color: white; 
        border: none; 
        transition: all 0.3s ease; 
    }
    .btn-apex-purple:hover { 
        background: linear-gradient(135deg, #7B2CBF 0%, #2E1451 100%); 
        color: white; 
        transform: translateY(-2px); 
        box-shadow: 0 8px 20px rgba(123, 44, 191, 0.3) !important; 
    }
    
    /* Colors & Backgrounds */
    .text-purple { color: #7B2CBF !important; }
    .bg-light-purple { background-color: rgba(123, 44, 191, 0.08) !important; }
    .bg-light-info { background-color: #F0F8FF !important; }
    .bg-light-success { background-color: #E8FFF3 !important; }
    .bg-light-warning { background-color: #FFF4DE !important; }

    /* Inputs Modern */
    .form-control-solid { 
        background-color: #F5F8FA; 
        border: 1px solid #F5F8FA; 
        color: #5E6278; 
        border-radius: 10px; 
        height: 45px; 
    }
    .form-control-solid:focus { 
        background-color: #EEF3F7; 
        border-color: #EEF3F7; 
        box-shadow: none; 
    }
    .input-group-solid {
        background-color: #FFF;
        border: 1px solid #E4E6EF;
    }
    .input-group-solid:focus-within {
        border-color: #7B2CBF;
        box-shadow: 0 0 0 0.2rem rgba(123, 44, 191, 0.1);
    }
    .input-group-solid input {
        box-shadow: none !important;
    }
    
    /* Utilities & Layout */
    .rounded-xl { border-radius: 15px !important; }
    .hover-lift:hover { transform: translateY(-2px); transition: all 0.2s ease-in-out; }
    .letter-spacing-1 { letter-spacing: 0.5px; }
    
    /* Nav Tabs Custom Styling */
    .nav-tabs .nav-link { 
        color: #A1A5B7; 
        background: transparent; 
        border-bottom: 3px solid transparent !important;
    }
    .nav-tabs .nav-link:hover {
        color: #7B2CBF;
    }
    .nav-tabs .nav-link.active { 
        color: #7B2CBF !important; 
        background: transparent;
        border-bottom: 3px solid #7B2CBF !important; 
    }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        
        // 1. Script Auto-format angka ribuan (Rupiah) saat mengetik
        $('.format-rupiah').on('input', function() {
            // Hapus semua karakter selain angka
            var val = $(this).val().replace(/\D/g, '');
            
            if(val != "") {
                // Format ulang menggunakan standard ribuan Indonesia
                var formatted = new Intl.NumberFormat('id-ID').format(val);
                $(this).val(formatted);
            } else {
                // Jika kosong, kembalikan ke 0
                $(this).val('0');
            }
        });

        // Pastikan saat form pertama dimuat, jika val kosong ubah jadi 0
        $('.format-rupiah').each(function() {
            if($(this).val() === '') {
                $(this).val('0');
            }
        });

    });
</script>
@stop