@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Edit Tagihan" 
    :action="route('tagihan.show', $tagihan)" 
    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;">edit</i> Form Edit Tagihan
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('tagihan.update', $tagihan) }}">
                    @csrf
                    @method('PUT')
                    
                    <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>
                            @foreach($pelangganList as $p)
                            <option value="{{ $p->id }}" 
                                    data-paket="{{ $p->paket->nama_paket }}"
                                    data-harga="{{ $p->paket->harga }}"
                                    {{ old('pelanggan_id', $tagihan->pelanggan_id) == $p->id ? 'selected' : '' }}>
                                {{ $p->nama }} - {{ $p->nomor_telepon }} ({{ $p->paket->nama_paket }})
                            </option>
                            @endforeach
                        </select>
                        @error('pelanggan_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Nomor Invoice <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('nomor_invoice') is-invalid @enderror" 
                               id="nomor_invoice" 
                               name="nomor_invoice" 
                               value="{{ old('nomor_invoice', $tagihan->nomor_invoice) }}" 
                               required
                               readonly>
                        <small class="text-muted">Nomor invoice tidak dapat diubah</small>
                        @error('nomor_invoice')
                            <div class="invalid-feedback d-block">{{ $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', $tagihan->tanggal_tagihan->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', $tagihan->tanggal_jatuh_tempo->format('Y-m-d')) }}" 
                                       required>
                                @error('tanggal_jatuh_tempo')
                                    <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">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', $tagihan->periode_awal->format('Y-m-d')) }}" 
                                       required>
                                @error('periode_awal')
                                    <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">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', $tagihan->periode_akhir->format('Y-m-d')) }}" 
                                       required>
                                @error('periode_akhir')
                                    <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">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', $tagihan->jumlah_tagihan) }}" 
                                           min="0" 
                                           required>
                                </div>
                                @error('jumlah_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">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', $tagihan->denda) }}" 
                                           min="0">
                                </div>
                                @error('denda')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label 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', $tagihan->total_tagihan) }}" 
                                   min="0" 
                                   readonly
                                   required>
                        </div>
                        <small class="text-muted">Total = Jumlah Tagihan + Denda</small>
                        @error('total_tagihan')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label 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', $tagihan->status_tagihan) == 'Belum Bayar' ? 'selected' : '' }}>
                                Belum Bayar
                            </option>
                            <option value="Lunas" {{ old('status_tagihan', $tagihan->status_tagihan) == 'Lunas' ? 'selected' : '' }}>
                                Lunas
                            </option>
                            <option value="Jatuh Tempo" {{ old('status_tagihan', $tagihan->status_tagihan) == 'Jatuh Tempo' ? 'selected' : '' }}>
                                Jatuh Tempo
                            </option>
                        </select>
                        @error('status_tagihan')
                            <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', $tagihan->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>Update Tagihan
                        </button>
                        <a href="{{ route('tagihan.show', $tagihan) }}" 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 mb-3">
            <div class="card-header pb-0 pt-3">
                <h6 class="mb-0">Informasi Tagihan</h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>No. Invoice:</strong>
                    <div class="text-muted">{{ $tagihan->nomor_invoice }}</div>
                </div>
                <div class="mb-2">
                    <strong>Dibuat:</strong>
                    <div class="text-muted">{{ $tagihan->created_at->format('d/m/Y H:i') }}</div>
                </div>
                <div class="mb-2">
                    <strong>Terakhir Update:</strong>
                    <div class="text-muted">{{ $tagihan->updated_at->format('d/m/Y H:i') }}</div>
                </div>
                <div class="mb-2">
                    <strong>Status Saat Ini:</strong>
                    <div>
                        <span class="badge badge-sm bg-gradient-{{ $tagihan->status_badge_class }}">
                            {{ $tagihan->status_tagihan }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Riwayat Pembayaran</h6>
            </div>
            <div class="card-body">
                @if($tagihan->pembayaran->count() > 0)
                    @php
                        $totalPaid = $tagihan->pembayaran->where('status_konfirmasi', 'Disetujui')->sum('jumlah_pembayaran');
                    @endphp
                    <div class="mb-2">
                        <strong>Total Dibayar:</strong>
                        <div class="text-success">Rp {{ number_format($totalPaid, 0, ',', '.') }}</div>
                    </div>
                    <div class="mb-2">
                        <strong>Sisa:</strong>
                        <div class="text-danger">Rp {{ number_format($tagihan->total_tagihan - $totalPaid, 0, ',', '.') }}</div>
                    </div>
                @else
                    <p class="text-muted mb-0">Belum ada pembayaran</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// 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
calculateTotal();
</script>
@endsection