@extends('adminlte::page')

@section('title', 'Input Transaksi Baru | Smart Pesantren')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0 text-dark font-weight-bold">Transaksi Pembayaran</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right bg-transparent p-0">
                <li class="breadcrumb-item"><a href="{{ route('pesantren.keuangan.transaksi.index') }}">Riwayat</a></li>
                <li class="breadcrumb-item active">Input Baru</li>
            </ol>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            
            {{-- KARTU FORMULIR --}}
            <div class="card shadow-lg border-0 rounded-lg">
                <div class="card-header bg-gradient-royal text-white py-3">
                    <h3 class="card-title font-weight-bold"><i class="fas fa-cash-register mr-2"></i> Form Pembayaran</h3>
                </div>
                
                <form action="{{ route('pesantren.keuangan.transaksi.store') }}" method="POST">
                    @csrf
                    
                    <div class="card-body p-4">

                        {{-- [LOGIKA PENTING] DETEKSI PEMBAYARAN TAGIHAN SPESIFIK --}}
                        {{-- Bagian ini menangkap tagihan_id dari URL agar Controller bisa memotong saldo --}}
                        @if(request()->has('tagihan_id'))
                            <input type="hidden" name="tagihan_id" value="{{ request('tagihan_id') }}">
                            
                            {{-- Ambil data tagihan untuk ditampilkan di Alert --}}
                            @php 
                                $tagihanInfo = \App\Models\Keuangan\Tagihan::find(request('tagihan_id'));
                            @endphp

                            <div class="alert alert-info border-0 shadow-sm rounded-lg mb-4">
                                <div class="d-flex align-items-center">
                                    <div class="icon-circle bg-white text-info mr-3 shadow-sm" style="width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-file-invoice-dollar"></i>
                                    </div>
                                    <div>
                                        <h6 class="font-weight-bold mb-0">Pembayaran Tagihan</h6>
                                        <small class="d-block">
                                            Anda sedang membayar: <strong>{{ $tagihanInfo->jenisPembayaran->nama_pembayaran ?? 'Tagihan' }}</strong>
                                            <br>Kode: {{ $tagihanInfo->kode_tagihan ?? '-' }}
                                        </small>
                                        {{-- Jika ada sisa tagihan, tampilkan sebagai saran nominal --}}
                                        @if($tagihanInfo)
                                            <small class="badge badge-light mt-1">Sisa Hutang: Rp {{ number_format($tagihanInfo->sisa_tagihan, 0, ',', '.') }}</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- 1. PILIH SANTRI --}}
                        <div class="form-group mb-4">
                            <label class="font-weight-bold text-muted text-uppercase text-xs ls-1">Nama Santri <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white border-right-0"><i class="fas fa-user-graduate text-royal"></i></span>
                                </div>
                                <select name="santri_id" class="form-control select2 border-left-0" required style="width: 100%;">
                                    <option value="">-- Cari Nama Santri --</option>
                                    @foreach($santris as $s)
                                        <option value="{{ $s->id }}" 
                                            {{-- Auto Select jika URL membawa ID Santri --}}
                                            {{ (old('santri_id') == $s->id || request('santri_id') == $s->id) ? 'selected' : '' }}>
                                            {{ $s->nama_lengkap }} - {{ $s->nis }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- 2. JENIS PEMBAYARAN --}}
                        <div class="form-group mb-4">
                            <label class="font-weight-bold text-muted text-uppercase text-xs ls-1">Jenis Pembayaran <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white border-right-0"><i class="fas fa-tags text-royal"></i></span>
                                </div>
                                <select name="jenis_pembayaran_id" class="form-control border-left-0" required>
                                    <option value="">-- Pilih Pos Pembayaran --</option>
                                    @foreach($jenisPembayaran as $j)
                                        <option value="{{ $j->id }}" 
                                            {{-- Auto Select jika tagihan yang dipilih punya jenis pembayaran ini --}}
                                            {{ (old('jenis_pembayaran_id') == $j->id || (isset($tagihanInfo) && $tagihanInfo->jenis_pembayaran_id == $j->id)) ? 'selected' : '' }}>
                                            {{ $j->nama_pembayaran }} ({{ ucfirst($j->tipe) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- 3. NOMINAL BAYAR --}}
                        <div class="form-group mb-4">
                            <label class="font-weight-bold text-muted text-uppercase text-xs ls-1">Nominal yang Dibayarkan (Rp) <span class="text-danger">*</span></label>
                            <div class="input-group input-group-lg shadow-sm rounded-pill overflow-hidden">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-royal text-white font-weight-bold border-0 px-4">Rp</span>
                                </div>
                                {{-- Jika ada sisa tagihan, otomatis isi kolom ini, tapi user tetap bisa ubah --}}
                                <input type="number" name="jumlah_bayar" class="form-control border-0 pl-3 font-weight-bold text-dark" 
                                    placeholder="0" min="100" 
                                    value="{{ old('jumlah_bayar', isset($tagihanInfo) ? $tagihanInfo->sisa_tagihan : '') }}" 
                                    required style="font-size: 1.5rem;">
                            </div>
                            <small class="form-text text-muted mt-2 ml-2">
                                <i class="fas fa-info-circle mr-1"></i> Masukkan jumlah uang yang diterima dari wali santri.
                            </small>
                        </div>

                        {{-- 4. KETERANGAN (Opsional) --}}
                        <div class="form-group mb-3">
                            <label class="font-weight-bold text-muted text-uppercase text-xs ls-1">Keterangan Tambahan</label>
                            <textarea name="keterangan" class="form-control" rows="2" placeholder="Contoh: Titipan ustadz, Transfer bank, dll..."></textarea>
                        </div>

                    </div>
                    
                    <div class="card-footer bg-white p-4 border-top-0 d-flex justify-content-between">
                        <a href="{{ route('pesantren.keuangan.transaksi.index') }}" class="btn btn-light text-muted font-weight-bold rounded-pill px-4">Batal</a>
                        <button type="submit" class="btn btn-royal font-weight-bold rounded-pill px-5 shadow-md hover-lift">
                            <i class="fas fa-save mr-2"></i> Simpan Transaksi
                        </button>
                    </div>
                </form>
            </div>

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

{{-- STYLE TAMBAHAN --}}
@section('css')
<style>
    /* Styling Royal Purple */
    :root {
        --royal: #5B247A;
        --bg-canvas: #F5F8FA;
    }
    .text-royal { color: var(--royal) !important; }
    .bg-royal { background-color: var(--royal) !important; }
    .bg-gradient-royal { background: linear-gradient(135deg, #5B247A 0%, #3e1654 100%); }
    
    .ls-1 { letter-spacing: 1px; }
    .text-xs { font-size: 0.75rem; }
    
    .hover-lift:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3); 
    }
    
    /* Input Focus Styles */
    .form-control:focus {
        border-color: var(--royal);
        box-shadow: 0 0 0 0.2rem rgba(91, 36, 122, 0.25);
    }
    
    /* Hide Arrow on Number Input */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
    }
</style>
{{-- Select2 CSS (Pastikan AdminLTE sudah include Select2, jika belum tambahkan CDN) --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
@stop

{{-- JAVASCRIPT --}}
@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        // Aktifkan Select2
        $('.select2').select2({
            theme: 'bootstrap4',
            placeholder: "Pilih Santri",
            allowClear: true
        });
    });
</script>
@stop