@extends('layouts.admin')

@section('styles')
<link href="{{ asset('css/invoice.css') }}" rel="stylesheet">
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Edit Invoice</h1>
        <div>
            <a href="{{ route('invoices.show', $invoice->id) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Invoice
            </a>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Invoice Form -->
    <form action="{{ route('invoices.update', $invoice->id) }}" method="POST" id="invoice-form">
        @csrf
        @method('PUT')
        
        <div class="row">
            <!-- Invoice Details -->
            <div class="col-md-8">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">Invoice Details</h6>
                        <span class="badge bg-{{ $invoice->status == 'draft' ? 'primary' : ($invoice->status == 'sent' ? 'info' : ($invoice->status == 'paid' ? 'success' : ($invoice->status == 'overdue' ? 'danger' : 'secondary'))) }}" id="invoice-status">
                            {{ ucfirst($invoice->status) }}
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="client_id" class="form-label">Client <span class="text-danger">*</span></label>
                                <select class="form-select @error('client_id') is-invalid @enderror" id="client_id" name="client_id" required>
                                    <option value="">Select Client</option>
                                    @foreach($clients as $client)
                                        <option value="{{ $client->id }}" {{ (old('client_id', $invoice->client_id) == $client->id) ? 'selected' : '' }}>
                                            {{ $client->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('client_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="event_id" class="form-label">Event <span class="text-danger">*</span></label>
                                <select class="form-select @error('event_id') is-invalid @enderror" id="event_id" name="event_id" required>
                                    <option value="">Select Event</option>
                                    @foreach($events as $event)
                                        <option value="{{ $event->id }}" {{ (old('event_id', $invoice->event_id) == $event->id) ? 'selected' : '' }}>
                                            {{ $event->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('event_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="invoice_date" class="form-label">Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('invoice_date') is-invalid @enderror" id="invoice_date" name="invoice_date" value="{{ old('invoice_date', $invoice->issue_date->format('Y-m-d')) }}" required>
                                @error('invoice_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="due_date" class="form-label">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', $invoice->due_date->format('Y-m-d')) }}" required>
                                @error('due_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="total_amount" class="form-label">Total Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">KES</span>
                                    <input type="number" class="form-control @error('total_amount') is-invalid @enderror" id="total_amount" name="total_amount" value="{{ old('total_amount', $invoice->amount) }}" min="0" step="0.01" required>
                                </div>
                                @error('total_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                    <option value="draft" {{ (old('status', $invoice->status) == 'draft') ? 'selected' : '' }}>Draft</option>
                                    <option value="sent" {{ (old('status', $invoice->status) == 'sent') ? 'selected' : '' }}>Sent</option>
                                    <option value="paid" {{ (old('status', $invoice->status) == 'paid') ? 'selected' : '' }}>Paid</option>
                                    <option value="overdue" {{ (old('status', $invoice->status) == 'overdue') ? 'selected' : '' }}>Overdue</option>
                                    <option value="cancelled" {{ (old('status', $invoice->status) == 'cancelled') ? 'selected' : '' }}>Cancelled</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notes</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="3">{{ old('notes', $invoice->notes) }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Summary -->
            <div class="col-md-4">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Summary</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Invoice Number</label>
                            <input type="text" class="form-control" value="{{ $invoice->invoice_no }}" readonly>
                        </div>
                        
                        @if($invoice->quotation)
                        <div class="mb-3">
                            <label class="form-label">Based on Quotation</label>
                            <input type="text" class="form-control" value="{{ $invoice->quotation->quotation_number }}" readonly>
                        </div>
                        @endif
                        
                        <div class="mb-3">
                            <label class="form-label">Created On</label>
                            <input type="text" class="form-control" value="{{ $invoice->created_at->format('d M, Y') }}" readonly>
                        </div>
                        
                        @if($invoice->receipts->count() > 0)
                        <div class="mb-3">
                            <label class="form-label">Amount Paid</label>
                            <div class="input-group">
                                <span class="input-group-text">KES</span>
                                <input type="text" class="form-control" value="{{ number_format($invoice->receipts->sum('amount'), 2) }}" readonly>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Balance</label>
                            <div class="input-group">
                                <span class="input-group-text">KES</span>
                                <input type="text" class="form-control" value="{{ number_format($invoice->amount - $invoice->receipts->sum('amount'), 2) }}" readonly>
                            </div>
                        </div>
                        @endif
                        
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> Update Invoice
                            </button>
                            <button type="reset" class="btn btn-outline-secondary">
                                <i class="fas fa-undo"></i> Reset Form
                            </button>
                        </div>
                    </div>
                </div>
                
                @if($invoice->is_cancelled)
                <div class="card shadow mb-4 border-danger">
                    <div class="card-header py-3 bg-danger text-white">
                        <h6 class="m-0 font-weight-bold">Invoice Cancelled</h6>
                    </div>
                    <div class="card-body">
                        <p><strong>Reason:</strong> {{ $invoice->cancellation_reason }}</p>
                        <p><strong>Cancelled By:</strong> {{ $invoice->cancelledBy->name ?? 'N/A' }}</p>
                        <p><strong>Cancelled On:</strong> {{ $invoice->cancelled_at ? $invoice->cancelled_at->format('d M, Y h:i A') : 'N/A' }}</p>
                        
                        @if($invoice->cancellation_approved)
                            <p><strong>Approved By:</strong> {{ $invoice->cancellationApprovedBy->name ?? 'N/A' }}</p>
                            <p><strong>Approved On:</strong> {{ $invoice->cancellation_approved_at ? $invoice->cancellation_approved_at->format('d M, Y h:i A') : 'N/A' }}</p>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </form>
    
    <!-- Related Receipts -->
    @if($invoice->receipts->count() > 0)
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Related Receipts</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Receipt #</th>
                            <th>Date</th>
                            <th>Payment Method</th>
                            <th>Reference</th>
                            <th class="text-end">Amount</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoice->receipts as $receipt)
                            <tr>
                                <td>{{ $receipt->receipt_number }}</td>
                                <td>{{ $receipt->receipt_date ? $receipt->receipt_date->format('d M, Y') : 'N/A' }}</td>
                                <td>{{ $receipt->payment_method }}</td>
                                <td>{{ $receipt->reference_number }}</td>
                                <td class="text-end">{{ number_format($receipt->amount, 2) }}</td>
                                <td>
                                    <a href="{{ route('receipts.show', $receipt->id) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('receipts.edit', $receipt->id) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Update status badge when status changes
        document.getElementById('status').addEventListener('change', function() {
            var status = this.value;
            var statusBadge = document.getElementById('invoice-status');
            
            // Update text
            statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1);
            
            // Update class
            statusBadge.className = 'badge';
            if (status === 'draft') {
                statusBadge.classList.add('bg-primary');
            } else if (status === 'sent') {
                statusBadge.classList.add('bg-info');
            } else if (status === 'paid') {
                statusBadge.classList.add('bg-success');
            } else if (status === 'overdue') {
                statusBadge.classList.add('bg-danger');
            } else if (status === 'cancelled') {
                statusBadge.classList.add('bg-secondary');
            }
        });
    });
</script>
@endsection