@extends('layout.app')

@section('title', 'Catat Pembayaran - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Catat Pembayaran" 
    :action="route('pembayaran.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">payment</i> Form Catat Pembayaran
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('pembayaran.store') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Tagihan <span class="text-danger">*</span></label>
                        <select class="form-control @error('tagihan_id') is-invalid @enderror" 
                                id="tagihan_id" name="tagihan_id" required>
                            <option value="">Pilih Tagihan</option>
                            @foreach($tagihanList as $t)
                            <option value="{{ $t->id }}" 
                                    data-total="{{ $t->total_tagihan }}"
                                    {{ (old('tagihan_id') ?? $tagihan?->id) == $t->id ? 'selected' : '' }}>
                                {{ $t->nomor_invoice }} - {{ $t->pelanggan->nama ?? 'Pelanggan tidak tersedia' }} 
                                (Rp {{ number_format($t->total_tagihan, 0, ',', '.') }})
                            </option>
                            @endforeach
                        </select>
                        @error('tagihan_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    @if($tagihan)
                    <div class="alert alert-info text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>
                        <strong>Info Tagihan:</strong><br>
                        No. Invoice: {{ $tagihan->nomor_invoice }}<br>
                        Pelanggan: {{ $tagihan->pelanggan->nama ?? 'Pelanggan tidak tersedia' }}<br>
                        Total Tagihan: Rp {{ number_format($tagihan->total_tagihan, 0, ',', '.') }}
                    </div>
                    @endif
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Pembayaran <span class="text-danger">*</span></label>
                                <input type="datetime-local" 
                                       class="form-control @error('tanggal_pembayaran') is-invalid @enderror" 
                                       id="tanggal_pembayaran" 
                                       name="tanggal_pembayaran" 
                                       value="{{ old('tanggal_pembayaran', now()->format('Y-m-d\TH:i')) }}" 
                                       required>
                                @error('tanggal_pembayaran')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Jumlah Pembayaran <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_pembayaran') is-invalid @enderror" 
                                           id="jumlah_pembayaran" 
                                           name="jumlah_pembayaran" 
                                           value="{{ old('jumlah_pembayaran') }}" 
                                           min="0" 
                                           required>
                                </div>
                                @error('jumlah_pembayaran')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Metode Pembayaran <span class="text-danger">*</span></label>
                                <select class="form-control @error('metode_pembayaran') is-invalid @enderror" 
                                        id="metode_pembayaran" name="metode_pembayaran" required>
                                    <option value="">Pilih Metode</option>
                                    @php
                                        $hasActiveGateway = isset($paymentGateways) && $paymentGateways->count() > 0;
                                        $defaultMethod = old('metode_pembayaran', $hasActiveGateway ? 'Payment Gateway' : 'Transfer');
                                    @endphp
                                    <option value="Payment Gateway" {{ $defaultMethod == 'Payment Gateway' ? 'selected' : '' }}>
                                        Payment Gateway (Otomatis)
                                    </option>
                                    <option value="Transfer" {{ $defaultMethod == 'Transfer' ? 'selected' : '' }}>
                                        Transfer Bank (Manual)
                                    </option>
                                    <option value="Manual" {{ $defaultMethod == 'Manual' ? 'selected' : '' }}>
                                        Tunai/Cash
                                    </option>
                                </select>
                                @error('metode_pembayaran')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                @if($hasActiveGateway)
                                    <small class="text-success d-block mt-1">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">check_circle</i>Payment Gateway aktif dan siap digunakan
                                    </small>
                                @else
                                    <small class="text-warning d-block mt-1">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">warning</i>Payment Gateway belum dikonfigurasi
                                    </small>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3" id="gateway-field" style="display: none;">
                                <label class="form-label">Payment Gateway <span class="text-danger">*</span></label>
                                <select class="form-control @error('payment_gateway_id') is-invalid @enderror" 
                                        id="payment_gateway_id" name="payment_gateway_id">
                                    <option value="">Pilih Gateway</option>
                                    @if(isset($paymentGateways) && $paymentGateways->count() > 0)
                                        @foreach($paymentGateways as $gateway)
                                            @php
                                                // Auto-select first active gateway if no old value
                                                $isSelected = old('payment_gateway_id') 
                                                    ? old('payment_gateway_id') == $gateway->id 
                                                    : $loop->first;
                                            @endphp
                                            <option value="{{ $gateway->id }}" {{ $isSelected ? 'selected' : '' }}>
                                                {{ $gateway->name }} ({{ strtoupper($gateway->gateway_type) }})
                                            </option>
                                        @endforeach
                                    @else
                                        <option value="" disabled>Tidak ada gateway aktif</option>
                                    @endif
                                </select>
                                @error('payment_gateway_id')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                    <small class="text-muted d-block mt-1">
                                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">info</i>Pelanggan akan diarahkan ke halaman pembayaran gateway
                                    </small>
                            </div>
                            <div class="input-group input-group-outline mb-3" id="kode-field">
                                <label class="form-label">Kode Pembayaran/Referensi</label>
                                <input type="text" 
                                       class="form-control @error('kode_pembayaran') is-invalid @enderror" 
                                       id="kode_pembayaran" 
                                       name="kode_pembayaran" 
                                       value="{{ old('kode_pembayaran') }}"
                                       placeholder="Contoh: TRX123456">
                                @error('kode_pembayaran')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="input-group input-group-outline mb-3" id="bukti-field" style="display: none;">
                        <label class="form-label">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">
                        <small class="text-muted">Format: JPG, PNG, PDF. Maksimal 2MB</small>
                        @error('bukti_pembayaran')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                  id="keterangan" 
                                  name="keterangan" 
                                  rows="3">{{ old('keterangan') }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Simpan Pembayaran
                        </button>
                        <a href="{{ route('pembayaran.index') }}" class="btn bg-gradient-secondary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-success text-white">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">auto_awesome</i>Payment Gateway Otomatis:</strong>
                    <ul class="mb-0 mt-2">
                        <li><strong>Tripay/Flip</strong> - Pembayaran otomatis terintegrasi</li>
                        <li>Virtual Account, QRIS, E-Wallet</li>
                        <li>Konfirmasi otomatis tanpa perlu approval admin</li>
                        <li>Real-time notification status pembayaran</li>
                    </ul>
                </div>
                
                <div class="alert alert-info text-white">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i>Metode Lain:</strong>
                    <ul class="mb-0 mt-2">
                        <li><strong>Transfer Bank</strong> - Perlu upload bukti & konfirmasi admin</li>
                        <li><strong>Tunai/Cash</strong> - Langsung disetujui sistem</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning text-white">
                    <strong><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>Penting:</strong>
                    <p class="mb-0 mt-2">Gunakan Payment Gateway untuk proses pembayaran yang lebih cepat dan otomatis.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Show/hide fields based on metode pembayaran
document.getElementById('metode_pembayaran').addEventListener('change', function() {
    const buktiField = document.getElementById('bukti-field');
    const gatewayField = document.getElementById('gateway-field');
    const kodeField = document.getElementById('kode-field');
    const paymentGatewaySelect = document.getElementById('payment_gateway_id');
    
    if (this.value === 'Transfer') {
        buktiField.style.display = 'block';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
    } else if (this.value === 'Payment Gateway') {
        buktiField.style.display = 'none';
        gatewayField.style.display = 'block';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.setAttribute('required', 'required');
    } else {
        buktiField.style.display = 'none';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
    }
});

// Auto-fill jumlah pembayaran from selected tagihan
document.getElementById('tagihan_id').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const totalTagihan = selectedOption.getAttribute('data-total');
    if (totalTagihan) {
        document.getElementById('jumlah_pembayaran').value = totalTagihan;
    }
});

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const metode = document.getElementById('metode_pembayaran').value;
    const buktiField = document.getElementById('bukti-field');
    const gatewayField = document.getElementById('gateway-field');
    const kodeField = document.getElementById('kode-field');
    const paymentGatewaySelect = document.getElementById('payment_gateway_id');
    
    // Function to update field visibility
    function updateFieldVisibility(methodValue) {
        if (methodValue === 'Transfer') {
            buktiField.style.display = 'block';
            gatewayField.style.display = 'none';
            kodeField.style.display = 'block';
            if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
        } else if (methodValue === 'Payment Gateway') {
            buktiField.style.display = 'none';
            gatewayField.style.display = 'block';
            kodeField.style.display = 'block';
            if (paymentGatewaySelect) paymentGatewaySelect.setAttribute('required', 'required');
        } else {
            buktiField.style.display = 'none';
            gatewayField.style.display = 'none';
            kodeField.style.display = 'block';
            if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
        }
    }
    
    // Initialize on load
    updateFieldVisibility(metode);
    
    // Auto-fill if tagihan is pre-selected
    const tagihanSelect = document.getElementById('tagihan_id');
    if (tagihanSelect.value) {
        const selectedOption = tagihanSelect.options[tagihanSelect.selectedIndex];
        const totalTagihan = selectedOption.getAttribute('data-total');
        if (totalTagihan && !document.getElementById('jumlah_pembayaran').value) {
            document.getElementById('jumlah_pembayaran').value = totalTagihan;
        }
    }
});
</script>
@endsection