@extends('layouts.app')

@section('title', 'Edit 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">
                        <a href="{{ route('pembayaran.show', $pembayaran->id) }}">
                            {{ $pembayaran->mahasiswa->nim }} - {{ $pembayaran->jenis_ujian }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active">Edit</li>
                </ol>
            </nav>

            <div class="card shadow">
                <div class="card-header bg-warning text-dark">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-edit me-2"></i>Edit Pembayaran
                    </h4>
                </div>
                
                <div class="card-body">
                    <form action="{{ route('pembayaran.update', $pembayaran->id) }}" method="POST" enctype="multipart/form-data" id="form-pembayaran">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <!-- Kolom Kiri -->
                            <div class="col-md-6">
                                <!-- Info Mahasiswa (Read Only) -->
                                <div class="card mb-3 bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title text-primary">
                                            <i class="fas fa-user me-1"></i>Informasi Mahasiswa
                                        </h6>
                                        <div class="row mb-2">
                                            <div class="col-sm-4"><strong>NIM:</strong></div>
                                            <div class="col-sm-8">{{ $pembayaran->mahasiswa->nim }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-sm-4"><strong>Nama:</strong></div>
                                            <div class="col-sm-8">{{ $pembayaran->mahasiswa->nama }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-sm-4"><strong>Jurusan:</strong></div>
                                            <div class="col-sm-8">{{ $pembayaran->mahasiswa->jurusan }}</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4"><strong>Semester:</strong></div>
                                            <div class="col-sm-8">{{ $pembayaran->mahasiswa->semester }}</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Hidden field untuk mahasiswa_id -->
                                <input type="hidden" name="mahasiswa_id" value="{{ $pembayaran->mahasiswa_id }}">

                                <!-- 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', $pembayaran->jenis_ujian) == 'UTS' ? 'selected' : '' }}>
                                            UTS (Ujian Tengah Semester)
                                        </option>
                                        <option value="UAS" {{ old('jenis_ujian', $pembayaran->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', $pembayaran->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>

                                <!-- 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', $pembayaran->status) == 'pending' ? 'selected' : '' }}>
                                            <i class="fas fa-clock"></i> Pending
                                        </option>
                                        <option value="lunas" {{ old('status', $pembayaran->status) == 'lunas' ? 'selected' : '' }}>
                                            <i class="fas fa-check-circle"></i> Lunas
                                        </option>
                                        <option value="gagal" {{ old('status', $pembayaran->status) == 'gagal' ? 'selected' : '' }}>
                                            <i class="fas fa-times-circle"></i> Gagal
                                        </option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Kolom Kanan -->
                            <div class="col-md-6">
                                <!-- 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', $pembayaran->metode_pembayaran) == 'Transfer Bank' ? 'selected' : '' }}>
                                            Transfer Bank
                                        </option>
                                        <option value="E-Wallet" {{ old('metode_pembayaran', $pembayaran->metode_pembayaran) == 'E-Wallet' ? 'selected' : '' }}>
                                            E-Wallet (OVO, GoPay, DANA)
                                        </option>
                                        <option value="Tunai" {{ old('metode_pembayaran', $pembayaran->metode_pembayaran) == 'Tunai' ? 'selected' : '' }}>
                                            Tunai
                                        </option>
                                        <option value="Kartu Kredit" {{ old('metode_pembayaran', $pembayaran->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', $pembayaran->tanggal_bayar ? \Carbon\Carbon::parse($pembayaran->tanggal_bayar)->format('Y-m-d\TH:i') : '') }}">
                                    @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 Lama -->
                                @if($pembayaran->bukti_pembayaran)
                                <div class="mb-3">
                                    <label class="form-label">
                                        <i class="fas fa-receipt me-1"></i>Bukti Pembayaran Saat Ini
                                    </label>
                                    <div class="border rounded p-3">
                                        @if(in_array(pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                                            <img src="{{ asset('storage/pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                                                 alt="Bukti Pembayaran" 
                                                 class="img-fluid rounded" 
                                                 style="max-height: 200px;">
                                        @else
                                            <div class="text-center">
                                                <i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
                                                <p class="mb-0">{{ $pembayaran->bukti_pembayaran }}</p>
                                                <a href="{{ asset('storage/pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                                                   target="_blank" 
                                                   class="btn btn-sm btn-primary mt-2">
                                                    <i class="fas fa-download me-1"></i>Download
                                                </a>
                                            </div>
                                        @endif
                                        
                                        <div class="mt-2">
                                            <div class="form-check">
                                                <input class="form-check-input" 
                                                       type="checkbox" 
                                                       id="hapus_bukti_lama" 
                                                       name="hapus_bukti_lama" 
                                                       value="1">
                                                <label class="form-check-label text-danger" for="hapus_bukti_lama">
                                                    <i class="fas fa-trash me-1"></i>Hapus bukti pembayaran ini
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Upload Bukti Pembayaran Baru -->
                                <div class="mb-3">
                                    <label for="bukti_pembayaran" class="form-label">
                                        <i class="fas fa-receipt me-1"></i>
                                        {{ $pembayaran->bukti_pembayaran ? 'Ganti' : 'Upload' }} 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. Kosongkan jika tidak ingin mengubah.
                                    </div>
                                </div>

                                <!-- Preview Bukti Baru -->
                                <div class="mb-3" id="preview-container" style="display: none;">
                                    <label class="form-label">Preview Bukti Pembayaran Baru</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>

                                <!-- Info Update -->
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title text-info">
                                            <i class="fas fa-info-circle me-1"></i>Informasi Update
                                        </h6>
                                        <small class="text-muted">
                                            <strong>Dibuat:</strong> {{ $pembayaran->created_at->format('d/m/Y H:i') }}<br>
                                            <strong>Terakhir diubah:</strong> {{ $pembayaran->updated_at->format('d/m/Y H:i') }}
                                        </small>
                                    </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.show', $pembayaran->id) }}" class="btn btn-secondary">
                                        <i class="fas fa-arrow-left me-1"></i>Kembali
                                    </a>
                                    <div>
                                        <a href="{{ route('pembayaran.edit', $pembayaran->id) }}" class="btn btn-warning me-2">
                                            <i class="fas fa-undo me-1"></i>Reset
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-1"></i>Update Pembayaran
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // 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') {
            // Tidak mengosongkan otomatis, biarkan user yang menentukan
        }
    });

    // Preview bukti pembayaran baru
    $('#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('');
        }
    });

    // Trigger terbilang saat halaman load
    $('#jumlah_bayar').trigger('input');

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

        if (!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;
        }

        // Konfirmasi jika mengubah status
        const originalStatus = '{{ $pembayaran->status }}';
        if (status !== originalStatus) {
            const confirmation = confirm(`Anda akan mengubah status pembayaran dari "${originalStatus}" menjadi "${status}". Lanjutkan?`);
            if (!confirmation) {
                e.preventDefault();
                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