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

@section('title', 'Partner Allocation Management - Create Allocation')

@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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.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;
    }
    .percentage-badge {
        font-size: 12px;
        background: #f0f0f0;
        padding: 3px 8px;
        border-radius: 4px;
        margin-left: 10px;
    }
    .amount-preview {
        background: #f8f9fa;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
        border-left: 3px solid #007bff;
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <h1 class="page-title mb-0 text-primary">Create Partner Allocation</h1>
            <div class="ms-auto">
                <a href="{{ route('partner-allocations.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to List
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Partner Allocation Information</h3>
                    </div>
                    <div class="card-body">
                        <form id="allocationForm" action="{{ route('partner-allocations.store') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="branch_id" class="form-label required-field">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' : '' }}>
                                                {{ $branch->branch_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('branch_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="financial_month" class="form-label required-field">Financial Month</label>
                                    <input type="date" class="form-control @error('financial_month') is-invalid @enderror" 
                                        id="financial_month" name="financial_month" value="{{ old('financial_month') }}" 
                                        placeholder="YYYY-MM" required>
                                    @error('financial_month')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Select the financial month for this allocation (e.g., 2024-01)</small> -->
                                </div>

                                <div class="col-md-12 mb-3">
                                    <label for="partner_id" class="form-label required-field">Partner</label>
                                    <select class="form-select @error('partner_id') is-invalid @enderror" 
                                            id="partner_id" name="partner_id" required>
                                        <option value="">Select Partner</option>
                                        @foreach($partners as $partner)
                                            <option value="{{ $partner->id }}" 
                                                    data-equity="{{ $partner->equity_percentage ?? 0 }}"
                                                    {{ old('partner_id') == $partner->id ? 'selected' : '' }}>
                                                {{ $partner->partner_name }} ({{ $partner->partner_code ?? 'N/A' }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('partner_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Select the partner for this allocation</small> -->
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="equity_percentage" class="form-label required-field">Equity Percentage (%)</label>
                                    <input type="number" step="0.01" class="form-control @error('equity_percentage') is-invalid @enderror" 
                                        id="equity_percentage" name="equity_percentage" value="{{ old('equity_percentage') }}" 
                                        placeholder="e.g., 25.50" required>
                                    @error('equity_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Enter equity percentage (0-100)</small> -->
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="allocated_amount" class="form-label required-field">Allocated Amount</label>
                                    <input type="number" step="0.01" class="form-control @error('allocated_amount') is-invalid @enderror" 
                                        id="allocated_amount" name="allocated_amount" value="{{ old('allocated_amount') }}" 
                                        placeholder="e.g., 50000.00" required>
                                    @error('allocated_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <!-- <small class="text-muted">Enter the allocated amount for this partner</small> -->
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="status" class="form-label required-field">Status</label>
                                    <select class="form-select @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="">Select Status</option>
                                        <option value="Pending" {{ old('status') == 'Pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="Disbursed" {{ old('status') == 'Disbursed' ? 'selected' : '' }}>Disbursed</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Preview Section -->
                                <!-- <div class="col-12 mb-3" id="previewSection" style="display: none;">
                                    <div class="amount-preview">
                                        <strong>Allocation Summary:</strong><br>
                                        Partner: <span id="previewPartnerName"></span><br>
                                        Equity Percentage: <span id="previewEquity"></span>%<br>
                                        Allocated Amount: <span id="previewAmount"></span><br>
                                        Financial Month: <span id="previewMonth"></span>
                                    </div>
                                </div> -->
                            </div>

                            <div class="col-md-12 mt-4 text-end">
                                <button type="reset" class="btn btn-secondary me-2">Reset</button>
                                <button type="submit" class="btn btn-primary" id="submitBtn">Create Allocation</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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 src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2 for better dropdown experience
        $('.select2').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Partner',
            allowClear: true
        });

        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "4000"
        }

        @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

        // Auto-fill equity percentage when partner is selected
        $('#partner_id').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var equityPercentage = selectedOption.data('equity');
            
            if (equityPercentage && equityPercentage > 0) {
                $('#equity_percentage').val(equityPercentage);
                toastr.info('Equity percentage auto-filled from partner profile: ' + equityPercentage + '%');
            }
        });

        // Preview allocation summary
        function updatePreview() {
            var partnerName = $('#partner_id option:selected').text();
            var equity = $('#equity_percentage').val();
            var amount = $('#allocated_amount').val();
            var month = $('#financial_month').val();
            
            if (partnerName && (equity || amount)) {
                $('#previewPartnerName').text(partnerName || '-');
                $('#previewEquity').text(equity || '0');
                $('#previewAmount').text(amount ? parseFloat(amount).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }) : '0.00');
                $('#previewMonth').text(month || '-');
                $('#previewSection').show();
            } else {
                $('#previewSection').hide();
            }
        }

        // Real-time preview updates
        $('#partner_id, #equity_percentage, #allocated_amount, #financial_month').on('change keyup', function() {
            updatePreview();
        });

        // Validation for equity percentage (0-100)
        $('#equity_percentage').on('change', function() {
            var value = parseFloat($(this).val());
            if (value < 0 || value > 100) {
                toastr.error('Equity percentage must be between 0 and 100');
                $(this).val('');
            }
        });

        // Validation for allocated amount (must be positive)
        $('#allocated_amount').on('change', function() {
            var value = parseFloat($(this).val());
            if (value < 0) {
                toastr.error('Allocated amount must be a positive number');
                $(this).val('');
            }
        });

        // Financial month validation
        $('#financial_month').on('change', function() {
            var selectedMonth = $(this).val();
            if (selectedMonth) {
                var currentDate = new Date();
                var currentYear = currentDate.getFullYear();
                var currentMonth = currentDate.getMonth() + 1;
                var selectedYear = parseInt(selectedMonth.split('-')[0]);
                var selectedMonthNum = parseInt(selectedMonth.split('-')[1]);
                
                if (selectedYear > currentYear || (selectedYear === currentYear && selectedMonthNum > currentMonth)) {
                    toastr.warning('You are creating an allocation for a future month. Please confirm the financial month is correct.');
                }
            }
        });

        // Form submission with validation
        $('#allocationForm').on('submit', function(e) {
            var isValid = true;
            var errorMessages = [];

            // Validate branch
            if (!$('#branch_id').val()) {
                errorMessages.push('Please select a branch');
                isValid = false;
            }

            // Validate financial month
            if (!$('#financial_month').val()) {
                errorMessages.push('Please select a financial month');
                isValid = false;
            }

            // Validate partner
            if (!$('#partner_id').val()) {
                errorMessages.push('Please select a partner');
                isValid = false;
            }

            // Validate equity percentage
            var equity = parseFloat($('#equity_percentage').val());
            if (isNaN(equity) || equity < 0 || equity > 100) {
                errorMessages.push('Please enter a valid equity percentage between 0 and 100');
                isValid = false;
            }

            // Validate allocated amount
            var amount = parseFloat($('#allocated_amount').val());
            if (isNaN(amount) || amount <= 0) {
                errorMessages.push('Please enter a valid allocated amount greater than 0');
                isValid = false;
            }

            // Validate status
            if (!$('#status').val()) {
                errorMessages.push('Please select a status');
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                errorMessages.forEach(function(message) {
                    toastr.error(message);
                });
                return false;
            }

            // Show loading state
            const btn = $('#submitBtn');
            btn.prop('disabled', true)
               .html('<span class="spinner-border spinner-border-sm me-2"></span>Creating allocation...');
            toastr.info('Creating partner allocation...');
        });

        // Reset form handler
        $('button[type="reset"]').on('click', function(e) {
            e.preventDefault();
            $('#allocationForm')[0].reset();
            $('.select2').val(null).trigger('change');
            $('#previewSection').hide();
            toastr.info('Form has been reset');
        });
    });
</script>
@endsection