@extends('layouts.app')

@section('title', 'Create 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-piggy-bank me-2 text-primary"></i>Create Savings Account</h1>
                    <p class="text-muted mb-0">Open a new savings account for a client</p>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('savings.accounts.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Back to Accounts
                    </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.store') }}" id="savingsAccountForm">
                        @csrf

                        <!-- Client Selection -->
                        <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 for="client_id" class="form-label">Select Client <span class="text-danger">*</span></label>
                                        <select name="client_id" id="client_id" class="form-select @error('client_id') is-invalid @enderror" required>
                                            <option value="">Select a client</option>
                                            @foreach($clients as $client)
                                            <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                                {{ $client->first_name }} {{ $client->last_name }} ({{ $client->client_number }})
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('client_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Client Details</label>
                                        <div id="client-details" class="p-3 bg-light rounded">
                                            <p class="text-muted mb-0">Select a client to view details</p>
                                        </div>
                                    </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') == $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="type" class="form-label">Account Type <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-wallet"></i>
                                            <select name="type" id="type" class="form-select @error('type') is-invalid @enderror" required>
                                                <option value="savings" {{ old('type') == 'savings' ? 'selected' : '' }}>Regular Savings</option>
                                                <option value="fixed_deposit" {{ old('type') == 'fixed_deposit' ? 'selected' : '' }}>Fixed Deposit</option>
                                                <option value="current" {{ old('type') == 'current' ? 'selected' : '' }}>Current Account</option>
                                            </select>
                                        </div>
                                        @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="opening_balance" class="form-label">Opening Balance <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-money-bill-wave"></i>
                                            <input type="number" name="opening_balance" id="opening_balance"
                                                   class="form-control @error('opening_balance') is-invalid @enderror"
                                                   value="{{ old('opening_balance', 0) }}"
                                                   step="0.01" min="0" required>
                                        </div>
                                        @error('opening_balance')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <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', 0) }}"
                                                   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', 2.5) }}"
                                                   step="0.01" min="0" max="100" required>
                                        </div>
                                        @error('interest_rate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="opening_date" class="form-label">Opening Date <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-calendar-alt"></i>
                                            <input type="date" name="opening_date" id="opening_date"
                                                   class="form-control @error('opening_date') is-invalid @enderror"
                                                   value="{{ old('opening_date', date('Y-m-d')) }}" required>
                                        </div>
                                        @error('opening_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </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') }}">
                                        </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') }}</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.index') }}" 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>Create 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 typeSelect = document.getElementById('type');
    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 account type
            const productType = selectedOption.getAttribute('data-type');
            if (productType) {
                typeSelect.value = productType;
            }

            // 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;
            }
        }
    });

    // Client details display
    const clientSelect = document.getElementById('client_id');
    const clientDetails = document.getElementById('client-details');

    clientSelect.addEventListener('change', function() {
        const clientId = this.value;

        if (clientId) {
            // In a real application, you might fetch client details via AJAX
            // For now, we'll just show a loading message
            clientDetails.innerHTML = `
                <div class="text-center">
                    <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                    <span>Loading client details...</span>
                </div>
            `;

            // Simulate loading client details
            setTimeout(() => {
                const selectedOption = this.options[this.selectedIndex];
                const clientName = selectedOption.text.split(' (')[0];
                clientDetails.innerHTML = `
                    <div class="client-info">
                        <h6 class="mb-2">${clientName}</h6>
                        <small class="text-muted">Client selected successfully</small>
                    </div>
                `;
            }, 500);
        } else {
            clientDetails.innerHTML = '<p class="text-muted mb-0">Select a client to view details</p>';
        }
    });

    // Form validation
    const form = document.getElementById('savingsAccountForm');
    form.addEventListener('submit', function(e) {
        const openingBalance = parseFloat(document.getElementById('opening_balance').value);
        const minimumBalance = parseFloat(document.getElementById('minimum_balance').value);

        if (openingBalance < minimumBalance) {
            e.preventDefault();
            alert('Opening balance cannot be less than minimum balance.');
            return false;
        }

        const openingDate = new Date(document.getElementById('opening_date').value);
        const maturityDate = document.getElementById('maturity_date').value;

        if (maturityDate) {
            const maturity = new Date(maturityDate);
            if (maturity <= openingDate) {
                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;
}

.client-info {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.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