{{-- resources/views/branchInvestments/create.blade.php --}}
@extends('layouts.main')

@section('title', 'Branch Investment - Add Investment')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

<style>
    .error-text {
        color: red;
        font-size: 13px;
    }
    .btn-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.8;
    }
    .required-field::after {
        content: " *";
        color: red;
        font-weight: bold;
    }
    .form-label {
        font-weight: 500;
    }
    .card {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
    }
    .amount-prefix {
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-right: none;
        padding: 0.375rem 0.75rem;
        font-weight: 600;
        color: #495057;
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <h1 class="page-title mb-0 text-primary">Add Branch Investment</h1>
                <!-- <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('branches.index') }}">Branches</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('branchinvestments.index') }}">Investments</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Add Investment</li>
                    </ol>
                </nav> -->
            </div>
            <div class="ms-auto">
                <a href="{{ route('branchinvestments.index') }}" class="btn btn-secondary">
                    Back to Investments
                </a>
            </div>
        </div>

        <!-- Form Card -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-chart-line me-2"></i>
                            Investment Details
                        </h3>
                    </div>
                    <div class="card-body">
                        <form id="investmentForm" action="{{ route('branchinvestments.store') }}" method="POST">
                            @csrf
                            
                            <!-- Branch Selection -->
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="branch_id" class="form-label required-field">Select Branch</label>
                                    <select class="form-select @error('branch_id') is-invalid @enderror" 
                                            id="branch_id" 
                                            name="branch_id" 
                                            required>
                                        <option value="">-- Select Branch --</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}" 
                                                {{ old('branch_id') == $branch->id ? 'selected' : '' }}
                                                {{ isset($selectedBranch) && $selectedBranch->id == $branch->id ? 'selected' : '' }}>
                                                {{ $branch->branch_name }} ({{ $branch->branch_code }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('branch_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Select the branch for this investment</small>
                                </div>
                            </div>

                            <!-- Investment Date and Type -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="investment_date" class="form-label required-field">Investment Date</label>
                                    <!-- <div class="input-group date" data-provide="datepicker"> -->
                                        <input type="date" 
                                            class="form-control @error('investment_date') is-invalid @enderror" 
                                            name="investment_date" 
                                            value="{{ old('investment_date', date('d-m-Y')) }}" 
                                            placeholder="dd-mm-yyyy" 
                                            autocomplete="off"
                                            required>
                                    
                                    <!-- </div> -->
                                    @error('investment_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="investment_type" class="form-label required-field">Investment Type</label>
                                    <select class="form-select @error('investment_type') is-invalid @enderror" 
                                            id="investment_type" 
                                            name="investment_type" 
                                            required>
                                        <option value="">-- Select Type --</option>
                                        <option value="equity" {{ old('investment_type') == 'equity' ? 'selected' : '' }}>Equity</option>
                                        <option value="debt" {{ old('investment_type') == 'debt' ? 'selected' : '' }}>Debt</option>
                                        <option value="real_estate" {{ old('investment_type') == 'real_estate' ? 'selected' : '' }}>Real Estate</option>
                                        <option value="mutual_fund" {{ old('investment_type') == 'mutual_fund' ? 'selected' : '' }}>Mutual Fund</option>
                                        <option value="fixed_deposit" {{ old('investment_type') == 'fixed_deposit' ? 'selected' : '' }}>Fixed Deposit</option>
                                        <option value="gold" {{ old('investment_type') == 'gold' ? 'selected' : '' }}>Gold</option>
                                        <option value="bonds" {{ old('investment_type') == 'bonds' ? 'selected' : '' }}>Bonds</option>
                                        <option value="other" {{ old('investment_type') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    @error('investment_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Amount and Source of Funds -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="amount" class="form-label required-field">Investment Amount</label>
                                    <div class="input-group">
                                        <input type="number" 
                                            class="form-control @error('amount') is-invalid @enderror" 
                                            id="amount" 
                                            name="amount" 
                                            value="{{ old('amount') }}" 
                                            placeholder="0.00" 
                                            step="0.01" 
                                            min="0"
                                            required>
                                    </div>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Enter amount in Indian Rupees</small>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="source_of_funds" class="form-label">Source of Funds</label>
                                    <input type="source_of_funds" 
                                            class="form-control @error('source_of_funds') is-invalid @enderror" 
                                            name="source_of_funds" 
                                            placeholder="Source Of Funds" 
                                            required>
                                    <!-- <select class="form-select @error('source_of_funds') is-invalid @enderror" 
                                            id="source_of_funds" 
                                            name="source_of_funds">
                                        <option value="">-- Select Source (Optional) --</option>
                                        <option value="bank_loan" {{ old('source_of_funds') == 'bank_loan' ? 'selected' : '' }}>Bank Loan</option>
                                        <option value="internal_profit" {{ old('source_of_funds') == 'internal_profit' ? 'selected' : '' }}>Internal Profit</option>
                                        <option value="owner_equity" {{ old('source_of_funds') == 'owner_equity' ? 'selected' : '' }}>Owner Equity</option>
                                        <option value="external_investor" {{ old('source_of_funds') == 'external_investor' ? 'selected' : '' }}>External Investor</option>
                                        <option value="retained_earnings" {{ old('source_of_funds') == 'retained_earnings' ? 'selected' : '' }}>Retained Earnings</option>
                                        <option value="other" {{ old('source_of_funds') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select> -->
                                    @error('source_of_funds')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="description" class="form-label">Description / Remarks</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                            id="description" 
                                            name="description" 
                                            rows="4" 
                                            placeholder="Enter detailed description, purpose of investment, expected returns, etc.">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Provide additional details about this investment (optional)</small>
                                </div>
                            </div>

                            <!-- Summary Section (Optional - Preview) -->
                            <div class="row mt-4" id="summarySection" style="display: none;">
                                <div class="col-md-12">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h5 class="card-title text-primary">Investment Summary</h5>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <small class="text-muted d-block">Branch:</small>
                                                    <strong id="summaryBranch">-</strong>
                                                </div>
                                                <div class="col-md-3">
                                                    <small class="text-muted d-block">Type:</small>
                                                    <strong id="summaryType">-</strong>
                                                </div>
                                                <div class="col-md-3">
                                                    <small class="text-muted d-block">Amount:</small>
                                                    <strong id="summaryAmount" class="text-success">-</strong>
                                                </div>
                                                <div class="col-md-3">
                                                    <small class="text-muted d-block">Date:</small>
                                                    <strong id="summaryDate">-</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Actions -->
                            <div class="row mt-4">
                                <div class="col-md-12 text-end">
                                    <button type="reset" class="btn btn-secondary me-2" id="resetBtn">
                                        Reset
                                    </button>
                                    <button type="submit" class="btn btn-primary" id="submitBtn">
                                        Save Investment
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<script>
    // Toastr Configuration
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": "4000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }

    // Display Messages
    @if (session('success'))
        toastr.success("{{ session('success') }}");
    @endif

    @if (session('error'))
        toastr.error("{{ session('error') }}");
    @endif

    @if (session('validation_errors'))
        @foreach (session('validation_errors') as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif

    // Initialize Datepicker
    $(document).ready(function() {
        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true,
            orientation: 'bottom',
            endDate: '+0d' // Can't select future dates
        });

        // Show summary section and update preview
        updateSummary();
        
        // Real-time updates for summary
        $('#branch_id, #investment_type, #amount, #investment_date').on('change input', function() {
            updateSummary();
        });
    });

    // Update Summary Preview
    function updateSummary() {
        const branch = $('#branch_id option:selected').text();
        const type = $('#investment_type option:selected').text();
        const amount = $('#amount').val();
        const date = $('#investment_date').val();

        if (branch && branch !== '-- Select Branch --' && type && type !== '-- Select Type --' && amount && date) {
            $('#summaryBranch').text(branch);
            $('#summaryType').text(type);
            $('#summaryAmount').text(' ' + parseFloat(amount).toFixed(2));
            $('#summaryDate').text(date);
            $('#summarySection').show();
        } else {
            $('#summarySection').hide();
        }
    }

    // Form Submission with Loading State
    $('#investmentForm').on('submit', function(e) {
        const btn = $('#submitBtn');
        btn.prop('disabled', true)
           .html('<span class="spinner-border spinner-border-sm me-2"></span>Saving investment...');
        
        toastr.info('Saving investment...');
    });

    // Reset Form Confirmation
    $('#resetBtn').on('click', function(e) {
        e.preventDefault();
        Swal.fire({
            title: 'Are you sure?',
            text: 'All entered data will be lost!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, reset it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $('#investmentForm')[0].reset();
                $('#summarySection').hide();
                toastr.info('Form has been reset');
            }
        });
    });

    // Amount validation
    $('#amount').on('input', function() {
        let val = $(this).val();
        if (val < 0) {
            $(this).val(0);
            toastr.warning('Amount cannot be negative');
        }
    });

    // Prevent form resubmission on page refresh
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.href);
    }
</script>

<!-- Include SweetAlert for better reset confirmation -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection