@extends('layouts.app')

@section('title', 'Create Withdrawal')

@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-minus-circle me-2 text-danger"></i>Create Withdrawal</h1>
                    <p class="text-muted mb-0">Make a new withdrawal transaction</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="form-card card">
                <div class="card-body">
                    <form method="POST" id="withdrawalForm">
                        @csrf

                        <!-- Account Selection -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-piggy-bank"></i>
                                </div>
                                <h5>Select Account</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="account_id" class="form-label">Savings Account <span class="text-danger">*</span></label>
                                        <select name="account_id" id="account_id" class="form-select @error('account_id') is-invalid @enderror" required>
                                            <option value="">Select a savings account</option>
                                            @foreach(\App\Models\SavingsAccount::with('client')->where('status', 'active')->whereHas('client')->get() as $account)
                                            <option value="{{ $account->id }}" data-balance="{{ $account->current_balance }}" data-min="{{ $account->minimum_balance }}">
                                                {{ $account->account_number }} - {{ $account->client ? $account->client->full_name : 'Unknown Client' }} (Balance: ${{ number_format($account->current_balance, 2) }})
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('account_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Account Details</label>
                                        <div id="account-details" class="p-3 bg-light rounded">
                                            <p class="text-muted mb-0">Select an account to view details</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Transaction Details -->
                        <div class="section-wrapper mb-4">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                </div>
                                <h5>Transaction Details</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="amount" class="form-label">Withdrawal Amount <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-dollar-sign"></i>
                                            <input type="number" name="amount" id="amount"
                                                   class="form-control @error('amount') is-invalid @enderror"
                                                   step="0.01" min="0.01" required>
                                        </div>
                                        <small class="form-text text-muted">Maximum withdrawal amount will be calculated based on available balance minus minimum balance.</small>
                                        @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="payment_method" class="form-label">Payment Method <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-credit-card"></i>
                                            <select name="payment_method" id="payment_method" class="form-select @error('payment_method') is-invalid @enderror" required>
                                                <option value="">Select payment method</option>
                                                <option value="cash">Cash</option>
                                                <option value="mobile">Mobile Money</option>
                                                <option value="bank">Bank Transfer</option>
                                                <option value="cheque">Cheque</option>
                                            </select>
                                        </div>
                                        @error('payment_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="transaction_date" class="form-label">Transaction Date <span class="text-danger">*</span></label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-calendar-alt"></i>
                                            <input type="date" name="transaction_date" id="transaction_date"
                                                   class="form-control @error('transaction_date') is-invalid @enderror"
                                                   value="{{ date('Y-m-d') }}" required>
                                        </div>
                                        @error('transaction_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="reference_number" class="form-label">Reference Number (Optional)</label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-hashtag"></i>
                                            <input type="text" name="reference_number" id="reference_number"
                                                   class="form-control @error('reference_number') is-invalid @enderror"
                                                   placeholder="Transaction reference...">
                                        </div>
                                        @error('reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">Description (Optional)</label>
                                <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                                          rows="3" placeholder="Enter description for this withdrawal..."></textarea>
                                @error('description')
                                <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.withdrawals') }}" 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>Process Withdrawal
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-green: #198754;
        --light-green: #4CAF50;
        --hover-green: #1B5E20;
        --accent-yellow: #fbbf24;
        --accent-yellow-light: #fef3c7;
        --success-green: #198754;
        --white: #ffffff;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-900: #111827;
        --danger: #ef4444;
    }

    /* Navigation Bar Styles */
    .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(--success-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;
    }

    .action-buttons-nav .btn-outline-primary {
        border-color: var(--primary-green);
        color: var(--primary-green);
    }

    .action-buttons-nav .btn-outline-primary:hover {
        background: var(--primary-green);
        border-color: var(--primary-green);
        color: white;
    }

    /* Form Card */
    .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 Styles */
    .section-wrapper {
        background: var(--gray-50);
        padding: 1.5rem;
        border-radius: 14px;
        border: 2px solid var(--gray-200);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }

    .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-red) 0%, var(--accent-yellow) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        border-image: linear-gradient(90deg, var(--primary-red) 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;
    }

    /* Input Styles */
    .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;
    }

    /* Buttons */
    .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-success {
        background: var(--primary-green);
        border: none;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
    }

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

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

    .btn-outline-secondary:hover {
        background: var(--gray-300);
        color: var(--gray-900);
    }

    /* Responsive Design */
    @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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const accountSelect = document.getElementById('account_id');
    const accountDetails = document.getElementById('account-details');
    const amountInput = document.getElementById('amount');
    const form = document.getElementById('withdrawalForm');

    // Update account details on selection
    accountSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
        const minBalance = parseFloat(selectedOption.getAttribute('data-min')) || 0;
        const availableForWithdrawal = balance - minBalance;

        if (this.value) {
            accountDetails.innerHTML = `
                <div class="account-info">
                    <h6 class="mb-2">${selectedOption.text.split(' - ')[0]}</h6>
                    <p class="mb-1"><strong>Current Balance:</strong> $${balance.toFixed(2)}</p>
                    <p class="mb-1"><strong>Minimum Balance:</strong> $${minBalance.toFixed(2)}</p>
                    <p class="mb-0"><strong>Available for Withdrawal:</strong> $${availableForWithdrawal.toFixed(2)}</p>
                </div>
            `;

            // Set max attribute for amount input
            amountInput.max = availableForWithdrawal;
        } else {
            accountDetails.innerHTML = '<p class="text-muted mb-0">Select an account to view details</p>';
            amountInput.removeAttribute('max');
        }
    });

    // Form submission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const accountId = accountSelect.value;
        if (!accountId) {
            alert('Please select a savings account.');
            return;
        }

        const amount = parseFloat(amountInput.value);
        if (isNaN(amount) || amount <= 0) {
            alert('Please enter a valid withdrawal amount.');
            return;
        }

        const selectedOption = accountSelect.options[accountSelect.selectedIndex];
        const balance = parseFloat(selectedOption.getAttribute('data-balance')) || 0;
        const minBalance = parseFloat(selectedOption.getAttribute('data-min')) || 0;
        const availableForWithdrawal = balance - minBalance;

        if (amount > availableForWithdrawal) {
            alert('Withdrawal amount cannot exceed available balance minus minimum balance.');
            return;
        }

        // Set form action to the per-account withdrawal route
        this.action = `/savings/accounts/${accountId}/withdraw`;
        this.submit();
    });
});
</script>
@endsection