@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Edit Pembayaran" 
    :action="route('pembayaran.show', $pembayaran)" 
    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 Pembayaran
                    </h6>
                </div>
                <div class="card-body pt-3">
                <form method="POST" action="{{ route('pembayaran.update', $pembayaran) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <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', $pembayaran->tagihan_id) == $t->id ? 'selected' : '' }}>
                                {{ $t->nomor_invoice }} - {{ $t->pelanggan?->nama ?? 'Tidak ada pelanggan' }} 
                                (Rp {{ number_format($t->total_tagihan, 0, ',', '.') }})
                            </option>
                            @endforeach
                        </select>
                        @error('tagihan_id')
                            <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 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', $pembayaran->tanggal_pembayaran->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', $pembayaran->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>
                                    <option value="Manual" {{ old('metode_pembayaran', $pembayaran->metode_pembayaran) == 'Manual' ? 'selected' : '' }}>
                                        Manual (Tunai/Cash)
                                    </option>
                                    <option value="Transfer" {{ old('metode_pembayaran', $pembayaran->metode_pembayaran) == 'Transfer' ? 'selected' : '' }}>
                                        Transfer Bank
                                    </option>
                                    <option value="Payment Gateway" {{ old('metode_pembayaran', $pembayaran->metode_pembayaran) == 'Payment Gateway' ? 'selected' : '' }}>
                                        Payment Gateway
                                    </option>
                                </select>
                                @error('metode_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" 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)
                                            <option value="{{ $gateway->id }}" {{ old('payment_gateway_id', $pembayaran->payment_gateway_id) == $gateway->id ? '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
                            </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', $pembayaran->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">
                        <label class="form-label">Status Konfirmasi <span class="text-danger">*</span></label>
                        <select class="form-control @error('status_konfirmasi') is-invalid @enderror" 
                                id="status_konfirmasi" name="status_konfirmasi" required>
                            <option value="Menunggu" {{ old('status_konfirmasi', $pembayaran->status_konfirmasi) == 'Menunggu' ? 'selected' : '' }}>
                                Menunggu Konfirmasi
                            </option>
                            <option value="Disetujui" {{ old('status_konfirmasi', $pembayaran->status_konfirmasi) == 'Disetujui' ? 'selected' : '' }}>
                                Disetujui
                            </option>
                            <option value="Ditolak" {{ old('status_konfirmasi', $pembayaran->status_konfirmasi) == 'Ditolak' ? 'selected' : '' }}>
                                Ditolak
                            </option>
                        </select>
                        @error('status_konfirmasi')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Bukti Pembayaran</label>
                        @if($pembayaran->bukti_pembayaran)
                        <div class="mb-2">
                            <small class="text-muted">Bukti saat ini:</small><br>
                            @if(in_array(pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif']))
                            <img src="{{ asset('uploads/bukti_pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                                 alt="Bukti" 
                                 class="img-thumbnail" 
                                 style="max-width: 200px;">
                            @else
                            <a href="{{ asset('uploads/bukti_pembayaran/' . $pembayaran->bukti_pembayaran) }}" 
                               target="_blank" 
                               class="btn btn-sm btn-outline-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">description</i>Lihat Bukti
                            </a>
                            @endif
                        </div>
                        @endif
                        <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. 
                            @if($pembayaran->bukti_pembayaran)
                            Kosongkan jika tidak ingin mengubah.
                            @endif
                        </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', $pembayaran->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 Pembayaran
                        </button>
                        <a href="{{ route('pembayaran.show', $pembayaran) }}" 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 shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi Pembayaran</h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>ID Pembayaran:</strong>
                    <div class="text-muted">#{{ $pembayaran->id }}</div>
                </div>
                <div class="mb-2">
                    <strong>Dibuat:</strong>
                    <div class="text-muted">{{ $pembayaran->created_at->format('d/m/Y H:i') }}</div>
                </div>
                <div class="mb-2">
                    <strong>Terakhir Update:</strong>
                    <div class="text-muted">{{ $pembayaran->updated_at->format('d/m/Y H:i') }}</div>
                </div>
                <div class="mb-2">
                    <strong>Status Saat Ini:</strong>
                    <div>
                        <span class="badge bg-{{ $pembayaran->status_badge_class }}">
                            {{ $pembayaran->status_konfirmasi }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card shadow mt-3">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Catatan</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Mengubah status menjadi "Disetujui" akan memperbarui status tagihan.
                </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') {
        if (buktiField) buktiField.style.display = 'block';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
    } else if (this.value === 'Payment Gateway') {
        if (buktiField) buktiField.style.display = 'none';
        gatewayField.style.display = 'block';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.setAttribute('required', 'required');
    } else {
        if (buktiField) buktiField.style.display = 'none';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.removeAttribute('required');
    }
});

// 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');
    
    if (metode === 'Transfer') {
        if (buktiField) buktiField.style.display = 'block';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
    } else if (metode === 'Payment Gateway') {
        if (buktiField) buktiField.style.display = 'none';
        gatewayField.style.display = 'block';
        kodeField.style.display = 'block';
        if (paymentGatewaySelect) paymentGatewaySelect.setAttribute('required', 'required');
    } else {
        if (buktiField) buktiField.style.display = 'none';
        gatewayField.style.display = 'none';
        kodeField.style.display = 'block';
    }
});
</script>
@endsection