@extends('layouts.app')

@section('title', 'Edit Bill - ISP ERP System')

@section('page-title', 'Edit Bill')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white border-0" style="border-radius: 15px 15px 0 0;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-edit me-2 text-warning"></i>
                                Edit Bill #{{ $bill->id }}
                            </h3>
                            <p class="mb-0 text-muted">Update bill information</p>
                        </div>
                        <div>
                            <a href="{{ route('bills.show', $bill) }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Back to Bill Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Bill Form -->
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header bg-white border-0" style="border-radius: 15px 15px 0 0;">
                    <h5 class="mb-0">
                        <i class="fas fa-file-invoice-dollar me-2 text-primary"></i>
                        Bill Information
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('bills.update', $bill) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <!-- Client Selection -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="client_info_id" class="form-label">
                                    <i class="fas fa-user me-1"></i>Select Client <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('client_info_id') is-invalid @enderror" id="client_info_id" name="client_info_id" required>
                                    <option value="">Choose a client...</option>
                                    @foreach($activeClients as $clientInfo)
                                        <option value="{{ $clientInfo->id }}" {{ old('client_info_id', $bill->client_info_id) == $clientInfo->id ? 'selected' : '' }}>
                                            {{ $clientInfo->client->name ?? 'N/A' }} 
                                            @if($clientInfo->client->username)
                                                ({{ $clientInfo->client->username }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_info_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="month_year" class="form-label">
                                    <i class="fas fa-calendar me-1"></i>Bill Period <span class="text-danger">*</span>
                                </label>
                                <input type="month" class="form-control @error('month_year') is-invalid @enderror" 
                                       id="month_year" name="month_year" value="{{ old('month_year', $bill->month_year) }}" required>
                                @error('month_year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Bill Amounts -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="amount" class="form-label">
                                    <i class="fas fa-dollar-sign me-1"></i>Bill Amount <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount', $bill->amount) }}" 
                                           step="0.01" min="0" required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="discount" class="form-label">
                                    <i class="fas fa-tag me-1"></i>Discount
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" class="form-control @error('discount') is-invalid @enderror" 
                                           id="discount" name="discount" value="{{ old('discount', $bill->discount ?? 0) }}" 
                                           step="0.01" min="0">
                                    @error('discount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="late_fee" class="form-label">
                                    <i class="fas fa-exclamation-triangle me-1"></i>Late Fee
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" class="form-control @error('late_fee') is-invalid @enderror" 
                                           id="late_fee" name="late_fee" value="{{ old('late_fee', $bill->late_fee ?? 0) }}" 
                                           step="0.01" min="0">
                                    @error('late_fee')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Total Amount Display -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <strong>Total Amount: ৳<span id="total_amount">{{ number_format($bill->total_amount, 2) }}</span></strong>
                                    <small class="text-muted">(Amount - Discount + Late Fee)</small>
                                </div>
                            </div>
                        </div>

                        <!-- Status and Dates -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="status" class="form-label">
                                    <i class="fas fa-info-circle me-1"></i>Status <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', $bill->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="paid" {{ old('status', $bill->status) == 'paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="overdue" {{ old('status', $bill->status) == 'overdue' ? 'selected' : '' }}>Overdue</option>
                                    <option value="cancelled" {{ old('status', $bill->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="due_date" class="form-label">
                                    <i class="fas fa-calendar-alt me-1"></i>Due Date <span class="text-danger">*</span>
                                </label>
                                <input type="date" class="form-control @error('due_date') is-invalid @enderror" 
                                       id="due_date" name="due_date" value="{{ old('due_date', $bill->due_date ? $bill->due_date->format('Y-m-d') : '') }}" required>
                                @error('due_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="paid_date" class="form-label">
                                    <i class="fas fa-check-circle me-1"></i>Paid Date
                                </label>
                                <input type="date" class="form-control @error('paid_date') is-invalid @enderror" 
                                       id="paid_date" name="paid_date" value="{{ old('paid_date', $bill->paid_date ? $bill->paid_date->format('Y-m-d') : '') }}">
                                @error('paid_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Payment Information -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="payment_method" class="form-label">
                                    <i class="fas fa-credit-card me-1"></i>Payment Method
                                </label>
                                <input type="text" class="form-control @error('payment_method') is-invalid @enderror" 
                                       id="payment_method" name="payment_method" value="{{ old('payment_method', $bill->payment_method ?? '') }}" 
                                       placeholder="e.g., Cash, Bank Transfer, Mobile Banking">
                                @error('payment_method')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="transaction_id" class="form-label">
                                    <i class="fas fa-receipt me-1"></i>Transaction ID
                                </label>
                                <input type="text" class="form-control @error('transaction_id') is-invalid @enderror" 
                                       id="transaction_id" name="transaction_id" value="{{ old('transaction_id', $bill->transaction_id ?? '') }}" 
                                       placeholder="Enter transaction ID">
                                @error('transaction_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="notes" class="form-label">
                                    <i class="fas fa-file-alt me-1"></i>Notes
                                </label>
                                <textarea class="form-control @error('notes') is-invalid @enderror" 
                                          id="notes" name="notes" rows="4" 
                                          placeholder="Enter any additional notes or comments...">{{ old('notes', $bill->notes ?? '') }}</textarea>
                                @error('notes')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('bills.show', $bill) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Update Bill
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Calculate total amount dynamically
    const amountInput = document.getElementById('amount');
    const discountInput = document.getElementById('discount');
    const lateFeeInput = document.getElementById('late_fee');
    const totalAmountSpan = document.getElementById('total_amount');
    
    function calculateTotal() {
        const amount = parseFloat(amountInput.value) || 0;
        const discount = parseFloat(discountInput.value) || 0;
        const lateFee = parseFloat(lateFeeInput.value) || 0;
        const total = amount - discount + lateFee;
        totalAmountSpan.textContent = total.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
    
    amountInput.addEventListener('input', calculateTotal);
    discountInput.addEventListener('input', calculateTotal);
    lateFeeInput.addEventListener('input', calculateTotal);
    
    // Auto-populate paid_date when status changes to 'paid'
    const statusSelect = document.getElementById('status');
    const paidDateInput = document.getElementById('paid_date');
    
    statusSelect.addEventListener('change', function() {
        if (this.value === 'paid' && !paidDateInput.value) {
            const today = new Date();
            paidDateInput.value = today.toISOString().split('T')[0];
        } else if (this.value !== 'paid') {
            // Optional: clear paid_date if status is not 'paid'
            // paidDateInput.value = '';
        }
    });
});
</script>
@endsection