@extends('layout.app')

@section('title', 'Buat Tagihan - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Buat Tagihan Baru" 
    :action="route('tagihan.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;">receipt</i> Form Buat Tagihan
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('tagihan.store') }}">
                    @csrf
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Pelanggan <span class="text-danger">*</span></label>
                        <select class="form-control @error('pelanggan_id') is-invalid @enderror" 
                                id="pelanggan_id" name="pelanggan_id" required>
                            <option value="">Pilih Pelanggan</option>
                            @php
                                $pelangganList = $pelangganList ?? collect([]);
                            @endphp
                            @if($pelangganList && $pelangganList->count() > 0)
                                @foreach($pelangganList as $p)
                                    @if($p->paket)
                                    <option value="{{ $p->id }}" 
                                            data-paket="{{ $p->paket->nama_paket ?? '' }}"
                                            data-harga="{{ $p->paket->harga ?? 0 }}"
                                            data-prorata="{{ $p->prorata_enabled ? '1' : '0' }}"
                                            data-biaya-tambahan-1="{{ $p->biaya_tambahan_1 ?? 0 }}"
                                            data-biaya-tambahan-2="{{ $p->biaya_tambahan_2 ?? 0 }}"
                                            data-diskon="{{ $p->diskon ?? 0 }}"
                                            {{ old('pelanggan_id', $selectedPelangganId ?? '') == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama }} - {{ $p->nomor_telepon }} ({{ $p->paket->nama_paket ?? 'No Paket' }})
                                    </option>
                                    @endif
                                @endforeach
                            @else
                                <option value="" disabled>Tidak ada pelanggan aktif</option>
                            @endif
                        </select>
                        @error('pelanggan_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group input-group-outline mb-3">
                                <label class="form-label">Tanggal Tagihan <span class="text-danger">*</span></label>
                                <input type="date" 
                                       class="form-control @error('tanggal_tagihan') is-invalid @enderror" 
                                       id="tanggal_tagihan" 
                                       name="tanggal_tagihan" 
                                       value="{{ old('tanggal_tagihan', now()->format('Y-m-d')) }}" 
                                       required>
                                @error('tanggal_tagihan')
                                    <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">Tanggal Jatuh Tempo <span class="text-danger">*</span></label>
                                <input type="date" 
                                       class="form-control @error('tanggal_jatuh_tempo') is-invalid @enderror" 
                                       id="tanggal_jatuh_tempo" 
                                       name="tanggal_jatuh_tempo" 
                                       value="{{ old('tanggal_jatuh_tempo', now()->addDays(7)->format('Y-m-d')) }}" 
                                       required>
                                @error('tanggal_jatuh_tempo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="periode_awal" class="form-label">Periode Awal <span class="text-danger">*</span></label>
                                <input type="date" 
                                       class="form-control @error('periode_awal') is-invalid @enderror" 
                                       id="periode_awal" 
                                       name="periode_awal" 
                                       value="{{ old('periode_awal', now()->startOfMonth()->format('Y-m-d')) }}" 
                                       required>
                                @error('periode_awal')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="periode_akhir" class="form-label">Periode Akhir <span class="text-danger">*</span></label>
                                <input type="date" 
                                       class="form-control @error('periode_akhir') is-invalid @enderror" 
                                       id="periode_akhir" 
                                       name="periode_akhir" 
                                       value="{{ old('periode_akhir', now()->endOfMonth()->format('Y-m-d')) }}" 
                                       required>
                                @error('periode_akhir')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="jumlah_tagihan" class="form-label">Jumlah Tagihan <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_tagihan') is-invalid @enderror" 
                                           id="jumlah_tagihan" 
                                           name="jumlah_tagihan" 
                                           value="{{ old('jumlah_tagihan') }}" 
                                           min="0" 
                                           required>
                                </div>
                                @error('jumlah_tagihan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="denda" class="form-label">Denda</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" 
                                           class="form-control @error('denda') is-invalid @enderror" 
                                           id="denda" 
                                           name="denda" 
                                           value="{{ old('denda', 0) }}" 
                                           min="0">
                                </div>
                                @error('denda')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="total_tagihan" class="form-label">Total Tagihan <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" 
                                   class="form-control @error('total_tagihan') is-invalid @enderror" 
                                   id="total_tagihan" 
                                   name="total_tagihan" 
                                   value="{{ old('total_tagihan') }}" 
                                   min="0" 
                                   readonly
                                   required>
                        </div>
                        <small class="text-muted">Total = Jumlah Tagihan + Denda</small>
                        @error('total_tagihan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="status_tagihan" class="form-label">Status Tagihan <span class="text-danger">*</span></label>
                        <select class="form-control @error('status_tagihan') is-invalid @enderror" 
                                id="status_tagihan" name="status_tagihan" required>
                            <option value="Belum Bayar" {{ old('status_tagihan', 'Belum Bayar') == 'Belum Bayar' ? 'selected' : '' }}>
                                Belum Bayar
                            </option>
                            <option value="Lunas" {{ old('status_tagihan') == 'Lunas' ? 'selected' : '' }}>
                                Lunas
                            </option>
                            <option value="Jatuh Tempo" {{ old('status_tagihan') == 'Jatuh Tempo' ? 'selected' : '' }}>
                                Jatuh Tempo
                            </option>
                        </select>
                        @error('status_tagihan')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="keterangan" 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">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Simpan Tagihan
                        </button>
                                <a href="{{ route('tagihan.index') }}" class="btn bg-gradient-secondary mb-0">
                            <i class="fas fa-times me-2"></i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi</h6>
            </div>
            <div class="card-body">
                <div id="paket-info" style="display: none;">
                    <div class="alert alert-info">
                        <strong><i class="fas fa-info-circle me-2"></i>Info Paket:</strong>
                        <div class="mt-2">
                            <strong>Paket:</strong> <span id="info-paket">-</span><br>
                            <strong>Harga:</strong> Rp <span id="info-harga">0</span>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-warning">
                    <strong><i class="fas fa-exclamation-triangle me-2"></i>Catatan:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Pilih pelanggan untuk auto-fill jumlah tagihan</li>
                        <li>Nomor invoice akan di-generate otomatis</li>
                        <li>Total tagihan = Jumlah + Denda + PPN (jika PPN diaktifkan)</li>
                        <li>PPN akan otomatis ditambahkan jika diaktifkan di pengaturan</li>
                        <li>Jatuh tempo default 7 hari dari tanggal tagihan</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Auto-fill jumlah tagihan from selected pelanggan
document.getElementById('pelanggan_id').addEventListener('change', function() {
    updateTagihanFromPelanggan();
});

// Update tagihan calculation when periode changes
document.getElementById('periode_awal').addEventListener('change', function() {
    updateTagihanFromPelanggan();
});

document.getElementById('periode_akhir').addEventListener('change', function() {
    updateTagihanFromPelanggan();
});

function updateTagihanFromPelanggan() {
    const pelangganSelect = document.getElementById('pelanggan_id');
    const selectedOption = pelangganSelect.options[pelangganSelect.selectedIndex];
    
    if (!selectedOption || !selectedOption.value) {
        document.getElementById('paket-info').style.display = 'none';
        return;
    }
    
    const harga = parseFloat(selectedOption.getAttribute('data-harga')) || 0;
    const paket = selectedOption.getAttribute('data-paket') || '-';
    const prorataEnabled = selectedOption.getAttribute('data-prorata') === '1';
    const biayaTambahan1 = parseFloat(selectedOption.getAttribute('data-biaya-tambahan-1')) || 0;
    const biayaTambahan2 = parseFloat(selectedOption.getAttribute('data-biaya-tambahan-2')) || 0;
    const diskon = parseFloat(selectedOption.getAttribute('data-diskon')) || 0;
    
    const periodeAwal = document.getElementById('periode_awal').value;
    const periodeAkhir = document.getElementById('periode_akhir').value;
    
    // Update info
    document.getElementById('info-paket').textContent = paket;
    document.getElementById('info-harga').textContent = parseInt(harga).toLocaleString('id-ID');
    document.getElementById('paket-info').style.display = 'block';
    
    let jumlahTagihan = harga;
    let prorataInfo = '';
    
    // If prorata enabled and periode is set, call API
    if (prorataEnabled && periodeAwal && periodeAkhir) {
        fetch('{{ route("tagihan.calculate-prorata") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                pelanggan_id: pelangganSelect.value,
                periode_awal: periodeAwal,
                periode_akhir: periodeAkhir
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update prorata info
                if (data.is_prorata && data.prorata_info) {
                    document.getElementById('info-prorata').textContent = 'Ya';
                    document.getElementById('info-hari').textContent = data.prorata_info.days;
                    document.getElementById('info-total-hari').textContent = data.prorata_info.total_days;
                    document.getElementById('info-harga-prorata').textContent = parseInt(data.prorata_info.amount).toLocaleString('id-ID');
                    document.getElementById('prorata-info').style.display = 'block';
                } else {
                    document.getElementById('prorata-info').style.display = 'none';
                }
                
                // Update biaya tambahan info
                if (data.total_biaya_tambahan > 0 || data.diskon > 0) {
                    document.getElementById('info-biaya-tambahan').textContent = parseInt(data.total_biaya_tambahan).toLocaleString('id-ID');
                    document.getElementById('info-diskon').textContent = parseInt(data.diskon).toLocaleString('id-ID');
                    document.getElementById('biaya-tambahan-info').style.display = 'block';
                } else {
                    document.getElementById('biaya-tambahan-info').style.display = 'none';
                }
                
                // Update jumlah tagihan
                document.getElementById('jumlah_tagihan').value = Math.round(data.jumlah_tagihan);
                calculateTotal();
            }
        })
        .catch(error => {
            console.error('Error calculating prorata:', error);
            // Fallback to basic calculation
            const totalBiayaTambahan = biayaTambahan1 + biayaTambahan2;
            document.getElementById('jumlah_tagihan').value = Math.round(harga + totalBiayaTambahan - diskon);
            calculateTotal();
        });
    } else {
        // No prorata, use basic calculation
        document.getElementById('prorata-info').style.display = 'none';
        const totalBiayaTambahan = biayaTambahan1 + biayaTambahan2;
        if (totalBiayaTambahan > 0 || diskon > 0) {
            document.getElementById('info-biaya-tambahan').textContent = parseInt(totalBiayaTambahan).toLocaleString('id-ID');
            document.getElementById('info-diskon').textContent = parseInt(diskon).toLocaleString('id-ID');
            document.getElementById('biaya-tambahan-info').style.display = 'block';
        } else {
            document.getElementById('biaya-tambahan-info').style.display = 'none';
        }
        document.getElementById('jumlah_tagihan').value = Math.round(harga + totalBiayaTambahan - diskon);
        calculateTotal();
    }
}

// Calculate total tagihan
function calculateTotal() {
    const jumlah = parseFloat(document.getElementById('jumlah_tagihan').value) || 0;
    const denda = parseFloat(document.getElementById('denda').value) || 0;
    const total = jumlah + denda;
    
    document.getElementById('total_tagihan').value = total;
}

// Listen to changes
document.getElementById('jumlah_tagihan').addEventListener('input', calculateTotal);
document.getElementById('denda').addEventListener('input', calculateTotal);

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const pelangganSelect = document.getElementById('pelanggan_id');
    if (pelangganSelect.value) {
        pelangganSelect.dispatchEvent(new Event('change'));
    }
    calculateTotal();
});
</script>
@endsection