@extends('layouts.app')

@section('title', 'Edit Loan - ' . $loan->loan_number)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-edit me-2 text-primary"></i>Edit Loan</h1>
                    <p class="text-muted mb-0">Update loan details for {{ $loan->loan_number }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" form="editLoanForm" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update Loan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <h5 class="alert-heading">Please fix the following errors:</h5>
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                    <form method="POST" action="{{ route('loans.update', $loan->id) }}" id="editLoanForm">
                        @csrf
                        @method('PUT')

                        <!-- Loan Details -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <h5>Loan Details</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="amount" class="form-label">Loan Amount (USD) <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="amount" id="amount" class="form-control @error('amount') is-invalid @enderror"
                                                   value="{{ old('amount', $loan->amount) }}" min="50" max="100000" step="0.01" required>
                                        </div>
                                        @error('amount')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="interest_rate" class="form-label">Interest Rate (%) <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="number" name="interest_rate" id="interest_rate" class="form-control @error('interest_rate') is-invalid @enderror"
                                                   value="{{ old('interest_rate', $loan->interest_rate) }}" min="0.1" max="50" step="0.01" required>
                                            <span class="input-group-text">%</span>
                                        </div>
                                        @error('interest_rate')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="duration_months" class="form-label">Duration (Months) <span class="text-danger">*</span></label>
                                        <input type="number" name="duration_months" id="duration_months" class="form-control @error('duration_months') is-invalid @enderror"
                                               value="{{ old('duration_months', $loan->duration_months) }}" min="1" max="360" required>
                                        @error('duration_months')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="loan_type" class="form-label">Loan Type <span class="text-danger">*</span></label>
                                        <select name="loan_type" id="loan_type" class="form-select @error('loan_type') is-invalid @enderror" required>
                                            <option value="">Select Type</option>
                                            <option value="cash" {{ old('loan_type', $loan->loan_type) == 'cash' ? 'selected' : '' }}>Cash Loan</option>
                                            <option value="product" {{ old('loan_type', $loan->loan_type) == 'product' ? 'selected' : '' }}>Product Loan</option>
                                            <option value="personal" {{ old('loan_type', $loan->loan_type) == 'personal' ? 'selected' : '' }}>Personal Loan</option>
                                            <option value="business" {{ old('loan_type', $loan->loan_type) == 'business' ? 'selected' : '' }}>Business Loan</option>
                                            <option value="education" {{ old('loan_type', $loan->loan_type) == 'education' ? 'selected' : '' }}>Education Loan</option>
                                            <option value="emergency" {{ old('loan_type', $loan->loan_type) == 'emergency' ? 'selected' : '' }}>Emergency Loan</option>
                                            <option value="mortgage" {{ old('loan_type', $loan->loan_type) == 'mortgage' ? 'selected' : '' }}>Mortgage Loan</option>
                                            <option value="auto" {{ old('loan_type', $loan->loan_type) == 'auto' ? 'selected' : '' }}>Auto Loan</option>
                                        </select>
                                        @error('loan_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="repayment_frequency" class="form-label">Repayment Frequency <span class="text-danger">*</span></label>
                                        <select name="repayment_frequency" id="repayment_frequency" class="form-select @error('repayment_frequency') is-invalid @enderror" required>
                                            <option value="">Select Frequency</option>
                                            <option value="monthly" {{ old('repayment_frequency', $loan->repayment_frequency) == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                            <option value="weekly" {{ old('repayment_frequency', $loan->repayment_frequency) == 'weekly' ? 'selected' : '' }}>Weekly</option>
                                            <option value="biweekly" {{ old('repayment_frequency', $loan->repayment_frequency) == 'biweekly' ? 'selected' : '' }}>Bi-weekly</option>
                                            <option value="quarterly" {{ old('repayment_frequency', $loan->repayment_frequency) == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                        </select>
                                        @error('repayment_frequency')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="purpose" class="form-label">Purpose <span class="text-danger">*</span></label>
                                        <textarea name="purpose" id="purpose" class="form-control @error('purpose') is-invalid @enderror"
                                                  rows="2" required>{{ old('purpose', $loan->purpose) }}</textarea>
                                        @error('purpose')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Collateral Information -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-home"></i>
                                </div>
                                <h5>Collateral Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="collateral_type" class="form-label">Collateral Type</label>
                                        <input type="text" name="collateral_type" id="collateral_type" class="form-control @error('collateral_type') is-invalid @enderror"
                                               value="{{ old('collateral_type', $loan->collateral_type !== 'null' ? $loan->collateral_type : '') }}" placeholder="e.g., Land, Vehicle, House">
                                        @error('collateral_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="collateral_value" class="form-label">Collateral Value (USD)</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="collateral_value" id="collateral_value" class="form-control @error('collateral_value') is-invalid @enderror"
                                                   value="{{ old('collateral_value', $loan->collateral_value) }}" min="0" step="0.01">
                                        </div>
                                        @error('collateral_value')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Guarantor Information -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h5>Guarantor Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="guarantor_name" class="form-label">Guarantor Name</label>
                                        <input type="text" name="guarantor_name" id="guarantor_name" class="form-control @error('guarantor_name') is-invalid @enderror"
                                               value="{{ old('guarantor_name', $loan->guarantor_name) }}" placeholder="Full name of guarantor">
                                        @error('guarantor_name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="guarantor_phone" class="form-label">Guarantor Phone</label>
                                        <input type="tel" name="guarantor_phone" id="guarantor_phone" class="form-control @error('guarantor_phone') is-invalid @enderror"
                                               value="{{ old('guarantor_phone', $loan->guarantor_phone) }}" placeholder="Phone number">
                                        @error('guarantor_phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="guarantor_address" class="form-label">Guarantor Address</label>
                                        <input type="text" name="guarantor_address" id="guarantor_address" class="form-control @error('guarantor_address') is-invalid @enderror"
                                               value="{{ old('guarantor_address', $loan->guarantor_address) }}" placeholder="Guarantor's address">
                                        @error('guarantor_address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="emergency_contact_relationship" class="form-label">Relationship with Guarantor</label>
                                        <input type="text" name="emergency_contact_relationship" id="emergency_contact_relationship" class="form-control @error('emergency_contact_relationship') is-invalid @enderror"
                                               value="{{ old('emergency_contact_relationship', $loan->emergency_contact_relationship) }}" placeholder="e.g., Spouse, Parent, Sibling">
                                        @error('emergency_contact_relationship')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Employment Information -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-briefcase"></i>
                                </div>
                                <h5>Employment Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="monthly_income" class="form-label">Monthly Income (USD)</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" name="monthly_income" id="monthly_income" class="form-control @error('monthly_income') is-invalid @enderror"
                                                   value="{{ old('monthly_income', $loan->monthly_income) }}" min="0" step="0.01">
                                        </div>
                                        @error('monthly_income')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="employment_status" class="form-label">Employment Status</label>
                                        <select name="employment_status" id="employment_status" class="form-select @error('employment_status') is-invalid @enderror">
                                            <option value="">Select Status</option>
                                            <option value="employed" {{ old('employment_status', $loan->employment_status) == 'employed' ? 'selected' : '' }}>Employed</option>
                                            <option value="self_employed" {{ old('employment_status', $loan->employment_status) == 'self_employed' ? 'selected' : '' }}>Self-Employed</option>
                                            <option value="unemployed" {{ old('employment_status', $loan->employment_status) == 'unemployed' ? 'selected' : '' }}>Unemployed</option>
                                            <option value="student" {{ old('employment_status', $loan->employment_status) == 'student' ? 'selected' : '' }}>Student</option>
                                            <option value="retired" {{ old('employment_status', $loan->employment_status) == 'retired' ? 'selected' : '' }}>Retired</option>
                                        </select>
                                        @error('employment_status')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('loans.show', $loan->id) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-1"></i> Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i> Update Loan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Include the same CSS styles from show.blade.php */
:root {
    --primary-green: #198754;
    --primary-green-dark: #146c43;
    --accent-yellow: #fbbf24;
    --accent-yellow-light: #fef3c7;
    --success-green: #198754;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --info-blue: #0dcaf0;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

/* Include all the same navigation, form card, section, and input styles from show.blade.php */
.navigation-bar {
    background: white;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-title h1 {
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.page-title h1 i {
    color: var(--primary-green);
}

.page-title p {
    color: var(--gray-600);
    margin-bottom: 0;
}

.action-buttons-nav .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.form-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: none;
    overflow: hidden;
}

.form-card .card-body {
    padding: 2rem;
}

.section-wrapper {
    background: var(--gray-50);
    padding: 1.5rem;
    border-radius: 14px;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
}

.section-wrapper:hover {
    border-color: var(--primary-green);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12);
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    border-image: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
    border-image-slice: 1;
    border-bottom: 3px solid;
}

.section-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-header .icon-wrapper {
    width: 36px;
    height: 36px;
    background: var(--primary-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.form-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-control, .form-select {
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger-red);
}

.invalid-feedback {
    font-size: 0.875rem;
    color: var(--danger-red);
    margin-top: 0.25rem;
}

.input-group {
    border-radius: 8px;
}

.input-group-text {
    background: var(--gray-100);
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
    font-weight: 500;
}

.input-group .form-control {
    border-left: none;
}

.input-group .form-control:focus {
    border-left: 2px solid var(--primary-green);
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-secondary {
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline-secondary:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary-green);
    border: none;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
}

.btn-primary:hover {
    background: var(--primary-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.35);
}

@media (max-width: 768px) {
    .navigation-bar {
        padding: 1rem 0;
    }

    .page-title h1 {
        font-size: 1.5rem;
    }

    .action-buttons-nav {
        margin-top: 1rem;
    }

    .action-buttons-nav .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .form-card .card-body {
        padding: 1.5rem;
    }

    .section-wrapper {
        padding: 1rem;
    }
}
</style>
@endsection