@extends('layouts.app')

@section('title', 'Tambah Pembayaran')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('pembayaran.index') }}">
                            <i class="fas fa-credit-card me-1"></i>Pembayaran
                        </a>
                    </li>
                    <li class="breadcrumb-item active">Tambah Pembayaran</li>
                </ol>
            </nav>

            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-plus-circle me-2"></i>Tambah Pembayaran Baru
                    </h4>
                </div>
                
                <div class="card-body">
                    <form action="{{ route('pembayaran.store') }}" method="POST" enctype="multipart/form-data" id="form-pembayaran">
                        @csrf
                        
                        <div class="row">
                            <!-- Kolom Kiri -->
                            <div class="col-md-6">
                                <!-- Pilih Mahasiswa -->
                                <div class="mb-3">
                                    <label for="mahasiswa_id" class="form-label">
                                        <i class="fas fa-user me-1"></i>Pilih Mahasiswa <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select @error('mahasiswa_id') is-invalid @enderror" 
                                            id="mahasiswa_id" 
                                            name="mahasiswa_id" 
                                            required>
                                        <option value="">-- Pilih Mahasiswa --</option>
                                        @foreach($mahasiswas as $mahasiswa)
                                            <option value="{{ $mahasiswa->id }}" 
                                                    {{ old('mahasiswa_id') == $mahasiswa->id ? 'selected' : '' }}
                                                    data-nim="{{ $mahasiswa->nim }}"
                                                    data-nama="{{ $mahasiswa->nama }}"
                                                    data-jurusan="{{ $mahasiswa->jurusan }}">
                                                {{ $mahasiswa->nim }} - {{ $mahasiswa->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('mahasiswa_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Info Mahasiswa -->
                                <div class="card mb-3" id="info-mahasiswa" style="display: none;">
                                    <div class="card-body">
                                        <h6 class="card-title text-primary">
                                            <i class="fas fa-info-circle me-1"></i>Informasi Mahasiswa
                                        </h6>
                                        <div class="row">
                                            <div class="col-sm-4"><strong>NIM:</strong></div>
                                            <div class="col-sm-8" id="display-nim">-</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4"><strong>Nama:</strong></div>
                                            <div class="col-sm-8" id="display-nama">-</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4"><strong>Jurusan:</strong></div>
                                            <div class="col-sm-8" id="display-jurusan">-</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Jenis Ujian -->
                                <div class="mb-3">
                                    <label for="jenis_ujian" class="form-label">
                                        <i class="fas fa-clipboard-list me-1"></i>Jenis Ujian <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select @error('jenis_ujian') is-invalid @enderror" 
                                            id="jenis_ujian" 
                                            name="jenis_ujian" 
                                            required>
                                        <option value="">-- Pilih Jenis Ujian --</option>
                                        <option value="UTS" {{ old('jenis_ujian') == 'UTS' ? 'selected' : '' }}>
                                            UTS (Ujian Tengah Semester)
                                        </option>
                                        <option value="UAS" {{ old('jenis_ujian') == 'UAS' ? 'selected' : '' }}>
                                            UAS (Ujian Akhir Semester)
                                        </option>
                                    </select>
                                    @error('jenis_ujian')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Jumlah Bayar -->
                                <div class="mb-3">
                                    <label for="jumlah_bayar" class="form-label">
                                        <i class="fas fa-money-bill-wave me-1"></i>Jumlah Bayar <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="number" 
                                               class="form-control @error('jumlah_bayar') is-invalid @enderror" 
                                               id="jumlah_bayar" 
                                               name="jumlah_bayar" 
                                               value="{{ old('jumlah_bayar') }}"
                                               placeholder="0"
                                               min="0"
                                               step="0.01"
                                               required>
                                    </div>
                                    @error('jumlah_bayar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <span id="terbilang"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Kolom Kanan -->
                            <div class="col-md-6">
                                <!-- Status Pembayaran -->
                                <div class="mb-3">
                                    <label for="status" class="form-label">
                                        <i class="fas fa-flag me-1"></i>Status Pembayaran <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select @error('status') is-invalid @enderror" 
                                            id="status" 
                                            name="status" 
                                            required>
                                        <option value="pending" {{ old('status', 'pending') == 'pending' ? 'selected' : '' }}>
                                            <i class="fas fa-clock"></i> Pending
                                        </option>
                                        <option value="lunas" {{ old('status') == 'lunas' ? 'selected' : '' }}>
                                            <i class="fas fa-check-circle"></i> Lunas
                                        </option>
                                        <option value="gagal" {{ old('status') == 'gagal' ? 'selected' : '' }}>
                                            <i class="fas fa-times-circle"></i> Gagal
                                        </option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Metode Pembayaran -->
                                <div class="mb-3">
                                    <label for="metode_pembayaran" class="form-label">
                                        <i class="fas fa-credit-card me-1"></i>Metode Pembayaran
                                    </label>
                                    <select class="form-select @error('metode_pembayaran') is-invalid @enderror" 
                                            id="metode_pembayaran" 
                                            name="metode_pembayaran">
                                        <option value="">-- Pilih Metode Pembayaran --</option>
                                        <option value="Transfer Bank" {{ old('metode_pembayaran') == 'Transfer Bank' ? 'selected' : '' }}>
                                            Transfer Bank
                                        </option>
                                        <option value="E-Wallet" {{ old('metode_pembayaran') == 'E-Wallet' ? 'selected' : '' }}>
                                            E-Wallet (OVO, GoPay, DANA)
                                        </option>
                                        <option value="Tunai" {{ old('metode_pembayaran') == 'Tunai' ? 'selected' : '' }}>
                                            Tunai
                                        </option>
                                        <option value="Kartu Kredit" {{ old('metode_pembayaran') == 'Kartu Kredit' ? 'selected' : '' }}>
                                            Kartu Kredit
                                        </option>
                                    </select>
                                    @error('metode_pembayaran')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Tanggal Bayar -->
                                <div class="mb-3">
                                    <label for="tanggal_bayar" class="form-label">
                                        <i class="fas fa-calendar me-1"></i>Tanggal Bayar
                                    </label>
                                    <input type="datetime-local" 
                                           class="form-control @error('tanggal_bayar') is-invalid @enderror" 
                                           id="tanggal_bayar" 
                                           name="tanggal_bayar" 
                                           value="{{ old('tanggal_bayar') }}">
                                    @error('tanggal_bayar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Kosongkan jika belum dibayar
                                    </div>
                                </div>

                                <!-- Bukti Pembayaran -->
                                <div class="mb-3">
                                    <label for="bukti_pembayaran" class="form-label">
                                        <i class="fas fa-receipt me-1"></i>Bukti Pembayaran
                                    </label>
                                    <input type="file" 
                                           class="form-control @error('bukti_pembayaran') is-invalid @enderror" 
                                           id="bukti_pembayaran" 
                                           name="bukti_pembayaran" 
                                           accept="image/*,application/pdf">
                                    @error('bukti_pembayaran')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Format: JPG, PNG, PDF. Maksimal 2MB
                                    </div>
                                </div>

                                <!-- Preview Bukti -->
                                <div class="mb-3" id="preview-container" style="display: none;">
                                    <label class="form-label">Preview Bukti Pembayaran</label>
                                    <div class="border rounded p-2">
                                        <img id="preview-image" src="" alt="Preview" class="img-fluid" style="display: none; max-height: 200px;">
                                        <div id="preview-pdf" style="display: none;">
                                            <i class="fas fa-file-pdf fa-3x text-danger"></i>
                                            <p class="mt-2 mb-0">File PDF siap diupload</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tombol Aksi -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('pembayaran.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </a>
                                    <div>
                                        <button type="reset" class="btn btn-warning me-2">
                                            <i class="fas fa-undo me-1"></i>Reset
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-1"></i>Simpan Pembayaran
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Fungsi untuk menampilkan info mahasiswa
    $('#mahasiswa_id').change(function() {
        const selectedOption = $(this).find('option:selected');
        if (selectedOption.val()) {
            $('#display-nim').text(selectedOption.data('nim'));
            $('#display-nama').text(selectedOption.data('nama'));
            $('#display-jurusan').text(selectedOption.data('jurusan'));
            $('#info-mahasiswa').show();
        } else {
            $('#info-mahasiswa').hide();
        }
    });

    // Auto-fill tanggal bayar berdasarkan status
    $('#status').change(function() {
        if ($(this).val() === 'lunas' && !$('#tanggal_bayar').val()) {
            const now = new Date();
            const formatted = now.toISOString().slice(0, 16);
            $('#tanggal_bayar').val(formatted);
        } else if ($(this).val() === 'pending' || $(this).val() === 'gagal') {
            $('#tanggal_bayar').val('');
        }
    });

    // Preview bukti pembayaran
    $('#bukti_pembayaran').change(function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#preview-container').show();
                
                if (file.type.includes('image')) {
                    $('#preview-image').attr('src', e.target.result).show();
                    $('#preview-pdf').hide();
                } else if (file.type.includes('pdf')) {
                    $('#preview-image').hide();
                    $('#preview-pdf').show();
                }
            };
            reader.readAsDataURL(file);
        } else {
            $('#preview-container').hide();
        }
    });

    // Format angka dan terbilang
    $('#jumlah_bayar').on('input', function() {
        const value = parseInt($(this).val()) || 0;
        if (value > 0) {
            $('#terbilang').text(terbilang(value) + ' rupiah');
        } else {
            $('#terbilang').text('');
        }
    });

    // Validasi form sebelum submit
    $('#form-pembayaran').on('submit', function(e) {
        const mahasiswa = $('#mahasiswa_id').val();
        const jenisUjian = $('#jenis_ujian').val();
        const jumlahBayar = $('#jumlah_bayar').val();
        const status = $('#status').val();

        if (!mahasiswa || !jenisUjian || !jumlahBayar || !status) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi!');
            return false;
        }

        if (parseFloat(jumlahBayar) <= 0) {
            e.preventDefault();
            alert('Jumlah bayar harus lebih dari 0!');
            return false;
        }
    });
});

// Fungsi terbilang sederhana
function terbilang(angka) {
    const satuan = ['', 'satu', 'dua', 'tiga', 'empat', 'lima', 'enam', 'tujuh', 'delapan', 'sembilan'];
    const belasan = ['sepuluh', 'sebelas', 'dua belas', 'tiga belas', 'empat belas', 'lima belas', 'enam belas', 'tujuh belas', 'delapan belas', 'sembilan belas'];
    
    if (angka < 10) {
        return satuan[angka];
    } else if (angka < 20) {
        return belasan[angka - 10];
    } else if (angka < 100) {
        return satuan[Math.floor(angka / 10)] + ' puluh ' + satuan[angka % 10];
    } else if (angka < 1000) {
        return satuan[Math.floor(angka / 100)] + ' ratus ' + terbilang(angka % 100);
    } else if (angka < 1000000) {
        return terbilang(Math.floor(angka / 1000)) + ' ribu ' + terbilang(angka % 1000);
    } else if (angka < 1000000000) {
        return terbilang(Math.floor(angka / 1000000)) + ' juta ' + terbilang(angka % 1000000);
    }
    return 'angka terlalu besar';
}
</script>
@endpush
@endsection