@extends('layouts.app')

@section('title', 'Edit Savings Account')

@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 Savings Account</h1>
                    <p class="text-muted mb-0">Account: {{ $savingsAccount->account_number }}</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('savings.accounts.show', $savingsAccount) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Account
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    <form method="POST" action="{{ route('savings.accounts.update', $savingsAccount) }}" id="savingsAccountForm">
                        @csrf
                        @method('PUT')

                        <!-- Client Information (Read-only) -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-user"></i>
                                </div>
                                <h5>Client Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Client</label>
                                        <input type="text" class="form-control" value="{{ $savingsAccount->client->first_name }} {{ $savingsAccount->client->last_name }} ({{ $savingsAccount->client->client_number }})" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Account Number</label>
                                        <input type="text" class="form-control" value="{{ $savingsAccount->account_number }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Account Details -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-file-contract"></i>
                                </div>
                                <h5>Account Details</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="product_name" class="form-label">Product Name <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-file-contract"></i>
                                            <select name="product_name" id="product_name" class="form-select @error('product_name') is-invalid @enderror" required>
                                                <option value="">Select product</option>
                                                @foreach($products as $product)
                                                <option value="{{ $product['name'] }}"
                                                        data-type="{{ $product['type'] }}"
                                                        data-min-balance="{{ $product['minimum_balance'] }}"
                                                        data-interest="{{ $product['interest_rate'] }}"
                                                        data-calculation="{{ $product['interest_calculation'] }}"
                                                        {{ old('product_name', $savingsAccount->product_name) == $product['name'] ? 'selected' : '' }}>
                                                    {{ $product['name'] }} - {{ $product['interest_rate'] }}% interest
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('product_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="status" class="form-label">Account Status <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-toggle-on"></i>
                                            <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                                                <option value="active" {{ old('status', $savingsAccount->status) == 'active' ? 'selected' : '' }}>Active</option>
                                                <option value="dormant" {{ old('status', $savingsAccount->status) == 'dormant' ? 'selected' : '' }}>Dormant</option>
                                                <option value="frozen" {{ old('status', $savingsAccount->status) == 'frozen' ? 'selected' : '' }}>Frozen</option>
                                                <option value="closed" {{ old('status', $savingsAccount->status) == 'closed' ? 'selected' : '' }}>Closed</option>
                                            </select>
                                        </div>
                                        @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="minimum_balance" class="form-label">Minimum Balance <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-balance-scale"></i>
                                            <input type="number" name="minimum_balance" id="minimum_balance"
                                                   class="form-control @error('minimum_balance') is-invalid @enderror"
                                                   value="{{ old('minimum_balance', $savingsAccount->minimum_balance) }}"
                                                   step="0.01" min="0" required>
                                        </div>
                                        @error('minimum_balance')
                                        <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-icon-wrapper">
                                            <i class="fas fa-percentage"></i>
                                            <input type="number" name="interest_rate" id="interest_rate"
                                                   class="form-control @error('interest_rate') is-invalid @enderror"
                                                   value="{{ old('interest_rate', $savingsAccount->interest_rate) }}"
                                                   step="0.01" min="0" max="100" required>
                                        </div>
                                        @error('interest_rate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="interest_calculation" class="form-label">Interest Calculation <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-calculator"></i>
                                            <select name="interest_calculation" id="interest_calculation" class="form-select @error('interest_calculation') is-invalid @enderror" required>
                                                <option value="monthly" {{ old('interest_calculation', $savingsAccount->interest_calculation) == 'monthly' ? 'selected' : '' }}>Monthly</option>
                                                <option value="quarterly" {{ old('interest_calculation', $savingsAccount->interest_calculation) == 'quarterly' ? 'selected' : '' }}>Quarterly</option>
                                                <option value="annually" {{ old('interest_calculation', $savingsAccount->interest_calculation) == 'annually' ? 'selected' : '' }}>Annually</option>
                                            </select>
                                        </div>
                                        @error('interest_calculation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Opening Date</label>
                                        <input type="date" class="form-control" value="{{ $savingsAccount->opening_date->format('Y-m-d') }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="maturity_date" class="form-label">Maturity Date (Optional)</label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-calendar-check"></i>
                                            <input type="date" name="maturity_date" id="maturity_date"
                                                   class="form-control @error('maturity_date') is-invalid @enderror"
                                                   value="{{ old('maturity_date', $savingsAccount->maturity_date ? $savingsAccount->maturity_date->format('Y-m-d') : '') }}">
                                        </div>
                                        @error('maturity_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Information -->
                        <div class="section-wrapper">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <h5>Additional Information</h5>
                            </div>
                            <div class="mb-3">
                                <label for="notes" class="form-label">Notes (Optional)</label>
                                <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror"
                                          rows="4" placeholder="Any additional notes about this account...">{{ old('notes', $savingsAccount->notes) }}</textarea>
                                @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('savings.accounts.show', $savingsAccount) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-1"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-success">
                                        <i class="fas fa-check me-1"></i>Update Savings Account
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const productSelect = document.getElementById('product_name');
    const minBalanceInput = document.getElementById('minimum_balance');
    const interestRateInput = document.getElementById('interest_rate');

    // When product is selected, auto-fill other fields
    productSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];

        if (selectedOption.value) {
            // Update minimum balance
            const minBalance = selectedOption.getAttribute('data-min-balance');
            if (minBalance) {
                minBalanceInput.value = minBalance;
            }

            // Update interest rate
            const interestRate = selectedOption.getAttribute('data-interest');
            if (interestRate) {
                interestRateInput.value = interestRate;
            }
        }
    });

    // Form validation
    const form = document.getElementById('savingsAccountForm');
    form.addEventListener('submit', function(e) {
        const maturityDate = document.getElementById('maturity_date').value;
        const openingDate = '{{ $savingsAccount->opening_date->format('Y-m-d') }}';

        if (maturityDate) {
            const maturity = new Date(maturityDate);
            const opening = new Date(openingDate);
            if (maturity <= opening) {
                e.preventDefault();
                alert('Maturity date must be after opening date.');
                return false;
            }
        }
    });
});
</script>

<style>
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 3;
}

.input-icon-wrapper .form-control,
.input-icon-wrapper .form-select {
    padding-left: 40px;
}

.section-wrapper {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 14px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #198754;
}

.section-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: #198754;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.navigation-bar {
    background: white;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-title h1 {
    color: #111827;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

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