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

@section('title', 'Partner Allocation Management - Edit 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;
    }
    .info-box {
        background: #e7f3ff;
        border-left: 4px solid #2196f3;
        padding: 12px;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .readonly-field {
        background-color: #e9ecef;
        opacity: 0.8;
    }
</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">Edit 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">Edit Allocation Information</h3>
                    </div>
                    <div class="card-body">
                        <form id="allocationForm" action="{{ route('partner-allocations.update', $allocation->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <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', $allocation->branch_id) == $branch->id ? 'selected' : '' }}>
                                                {{ $branch->branch_name }} ({{ $branch->branch_code }})
                                            </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="month" class="form-control @error('financial_month') is-invalid @enderror" 
                                        id="financial_month" name="financial_month" 
                                        value="{{ old('financial_month', $allocation->financial_month) }}" 
                                        required>
                                    @error('financial_month')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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 Branch First</option>
                                    </select>
                                    @error('partner_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $allocation->equity_percentage) }}" 
                                        required>
                                    @error('equity_percentage')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $allocation->allocated_amount) }}" 
                                        required>
                                    @error('allocated_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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', $allocation->status) == 'Pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="Disbursed" {{ old('status', $allocation->status) == 'Disbursed' ? 'selected' : '' }}>Disbursed</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </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">Update 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() {
        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

        // Global variables
        let financialData = {
            monthly_profit: 0,
            management_fee: 0,
            management_fee_percentage: 0,
            management_fee_amount: 0,
            distributable_amount: 0
        };

        // Function to load partners for a branch
        function loadPartners(branchId, selectedPartnerId = null) {
            var partnerSelect = $('#partner_id');
            
            // Clear existing options
            partnerSelect.empty().append('<option value="">Select Partner</option>');
            
            if (!branchId) {
                partnerSelect.prop('disabled', true);
                return;
            }

            // Show loading state
            partnerSelect.prop('disabled', true);
            partnerSelect.append('<option value="" disabled selected>Loading partners...</option>');

            // AJAX request to fetch partners for this branch
            $.ajax({
                url: "{{ route('api.branch.partners') }}",
                type: "GET",
                data: { branch_id: branchId },
                dataType: "json",
                success: function(response) {
                    partnerSelect.prop('disabled', false).empty();
                    partnerSelect.append('<option value="">Select Partner</option>');
                    
                    if (response.success && response.data.length > 0) {
                        $.each(response.data, function(index, partner) {
                            var option = $('<option></option>')
                                .attr('value', partner.id)
                                .data('equity', partner.equity_percentage || 0)
                                .data('partner-code', partner.partner_code || 'N/A')
                                .text(partner.full_name + ' (' + (partner.partner_code || 'N/A') + ')');
                            
                            if (selectedPartnerId && selectedPartnerId == partner.id) {
                                option.attr('selected', 'selected');
                            }
                            
                            partnerSelect.append(option);
                        });
                        partnerSelect.trigger('change');
                        // toastr.success('Partners loaded successfully');
                    } else {
                        partnerSelect.append('<option value="" disabled>No partners found for this branch</option>');
                        toastr.warning('No partners associated with this branch');
                    }
                    
                    // Fetch financial data if financial month is already selected
                    fetchFinancialData();
                },
                error: function(xhr) {
                    console.error('Error fetching partners:', xhr);
                    toastr.error('Failed to load partners. Please try again.');
                    partnerSelect.prop('disabled', false).empty();
                    partnerSelect.append('<option value="">Select Partner</option>');
                }
            });
        }

        // Function to fetch financial data
        // function fetchFinancialData() {
        //     var branchId = $('#branch_id').val();
        //     var financialMonth = $('#financial_month').val();
            
        //     if (branchId && financialMonth) {
        //         $.ajax({
        //             url: "{{ route('api.branch.financial.data') }}",
        //             type: "GET",
        //             data: { 
        //                 branch_id: branchId,
        //                 financial_month: financialMonth
        //             },
        //             dataType: "json",
        //             success: function(response) {
        //                 if (response.success) {
        //                     financialData = response.data;
        //                     updateAllocatedAmount();
        //                     updateFinancialPreview();
        //                 } else {
        //                     toastr.warning(response.message || 'No financial data found');
        //                     financialData = {
        //                         monthly_profit: 0,
        //                         management_fee: 0,
        //                         management_fee_percentage: 0,
        //                         management_fee_amount: 0,
        //                         distributable_amount: 0
        //                     };
        //                     updateAllocatedAmount();
        //                     updateFinancialPreview();
        //                 }
        //             },
        //             error: function(xhr) {
        //                 console.error('Error fetching financial data:', xhr);
        //                 toastr.error('Failed to load financial data');
        //                 financialData = {
        //                     monthly_profit: 0,
        //                     management_fee: 0,
        //                     management_fee_percentage: 0,
        //                     management_fee_amount: 0,
        //                     distributable_amount: 0
        //                 };
        //                 updateAllocatedAmount();
        //                 updateFinancialPreview();
        //             }
        //         });
        //     }
        // }
        // Function to fetch financial data
        function fetchFinancialData() {
            var branchId = $('#branch_id').val();
            var financialMonth = $('#financial_month').val();
            
            if (branchId && financialMonth) {
                // Show loading state
                $('#financial_month').closest('.col-md-6').find('.form-control').addClass('is-loading');
                
                $.ajax({
                    url: "{{ route('api.branch.financial.data') }}",
                    type: "GET",
                    data: { 
                        branch_id: branchId,
                        financial_month: financialMonth
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.success) {
                            financialData = response.data;
                            // Force update allocated amount
                            updateAllocatedAmount();
                            updateFinancialPreview();
                            // toastr.success('Financial data updated');
                        } else {
                            toastr.warning(response.message || 'No financial data found');
                            financialData = {
                                monthly_profit: 0,
                                management_fee: 0,
                                management_fee_percentage: 0,
                                management_fee_amount: 0,
                                distributable_amount: 0
                            };
                            // Force update to clear values
                            updateAllocatedAmount();
                            updateFinancialPreview();
                        }
                    },
                    error: function(xhr) {
                        console.error('Error fetching financial data:', xhr);
                        toastr.error('Failed to load financial data');
                        financialData = {
                            monthly_profit: 0,
                            management_fee: 0,
                            management_fee_percentage: 0,
                            management_fee_amount: 0,
                            distributable_amount: 0
                        };
                        // Force update to clear values
                        updateAllocatedAmount();
                        updateFinancialPreview();
                    },
                    complete: function() {
                        $('#financial_month').closest('.col-md-6').find('.form-control').removeClass('is-loading');
                    }
                });
            }
        }

        // Function to update allocated amount
        // function updateAllocatedAmount() {
        //     var equityPercentage = parseFloat($('#equity_percentage').val()) || 0;
        //     var distributableAmount = financialData.distributable_amount || 0;
            
        //     if (equityPercentage > 0 && distributableAmount > 0) {
        //         var allocatedAmount = (distributableAmount * equityPercentage) / 100;
        //         $('#allocated_amount').val(allocatedAmount.toFixed(2));
        //     } else if (equityPercentage > 0 && distributableAmount <= 0) {
        //         // Don't clear if there's already a value (might be manually entered)
        //         if (!$('#allocated_amount').val()) {
        //             $('#allocated_amount').val('');
        //         }
        //     } else if (equityPercentage <= 0 && distributableAmount > 0) {
        //         // Don't clear if there's already a value
        //         if (!$('#allocated_amount').val()) {
        //             $('#allocated_amount').val('');
        //         }
        //     }
        // }
        // Function to update allocated amount
        function updateAllocatedAmount() {
            var equityPercentage = parseFloat($('#equity_percentage').val()) || 0;
            var distributableAmount = financialData.distributable_amount || 0;
            
            // Always recalculate if we have both values
            if (equityPercentage > 0 && distributableAmount > 0) {
                var allocatedAmount = (distributableAmount * equityPercentage) / 100;
                $('#allocated_amount').val(allocatedAmount.toFixed(2));
            } else if (equityPercentage > 0 && distributableAmount <= 0) {
                // Clear the amount if no distributable amount
                $('#allocated_amount').val('');
                toastr.warning('Distributable amount is zero or negative. Please check financial data.');
            } else if (equityPercentage <= 0 && distributableAmount > 0) {
                // Clear the amount if no equity percentage
                $('#allocated_amount').val('');
                toastr.warning('Please enter equity percentage to calculate allocated amount.');
            } else {
                // Clear the amount if both are missing
                $('#allocated_amount').val('');
            }
        }

        // Function to update financial preview
        function updateFinancialPreview() {
            var previewHtml = `
                <div class="financial-summary mt-3 p-3 bg-light rounded">
                    <h6 class="mb-3">Financial Summary</h6>
                    <div class="row">
                        <div class="col-md-4">
                            <small class="text-muted">Monthly Profit:</small><br>
                            <strong class="text-success">${financialData.monthly_profit.toLocaleString('en-US', {minimumFractionDigits: 2})}</strong>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Management Fee:</small><br>
                            <strong class="text-danger">${financialData.management_fee_percentage}%</strong>
                            <br>
                            <small class="text-muted">(${financialData.management_fee_amount.toLocaleString('en-US', {minimumFractionDigits: 2})})</small>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Distributable Amount:</small><br>
                            <strong class="text-primary">${financialData.distributable_amount.toLocaleString('en-US', {minimumFractionDigits: 2})}</strong>
                        </div>
                    </div>
                </div>
            `;
            
            // Remove existing preview if any
            $('.financial-summary').remove();
            
            // Add preview after the financial month input
            if ($('#financial_month').val()) {
                $('#financial_month').closest('.col-md-6').after(`
                    <div class="col-12">
                        ${previewHtml}
                    </div>
                `);
            }
        }

        // Branch selection change - Load partners dynamically
        $('#branch_id').on('change', function() {
            var branchId = $(this).val();
            var currentPartnerId = {{ $allocation->partner_id }};
            
            if (branchId) {
                // Check if the current partner belongs to this branch
                // We'll load partners and the current one will be selected if it exists
                loadPartners(branchId, currentPartnerId);
            } else {
                $('#partner_id').empty().append('<option value="">Select Branch First</option>');
                $('#partner_id').prop('disabled', true);
                $('.financial-summary').remove();
            }
        });

        // Financial month change
        $('#financial_month').on('change', function() {
            fetchFinancialData();
        });

        // Partner selection change - auto-fill equity and calculate amount
        // $('#partner_id').on('change', function() {
        //     var partnerId = $(this).val();
        //     var branchId = $('#branch_id').val();
            
        //     if (!partnerId || !branchId) {
        //         return;
        //     }
            
        //     // AJAX call to get partner with equity data
        //     $.ajax({
        //         url: "{{ route('api.branch.partners.equity') }}",
        //         type: "GET",
        //         data: { branch_id: branchId },
        //         dataType: "json",
        //         success: function(response) {
        //             if (response.success && response.data) {
        //                 var selectedPartner = response.data.find(function(partner) {
        //                     return partner.id == partnerId;
        //                 });
                        
        //                 if (selectedPartner && selectedPartner.equity_percentage && selectedPartner.equity_percentage > 0) {
        //                     $('#equity_percentage').val(selectedPartner.equity_percentage);
        //                     updateAllocatedAmount();
        //                     toastr.info('Equity percentage auto-filled: ' + selectedPartner.equity_percentage + '%');
        //                 } else {
        //                     // Don't clear if there's already a value
        //                     if (!$('#equity_percentage').val()) {
        //                         $('#equity_percentage').val('');
        //                     }
        //                     if (!$('#allocated_amount').val()) {
        //                         $('#allocated_amount').val('');
        //                     }
        //                     toastr.warning('No equity percentage found for this partner');
        //                 }
        //             }
        //         },
        //         error: function(xhr) {
        //             console.error('Error fetching partner equity:', xhr);
        //             toastr.error('Failed to fetch partner equity details');
        //         }
        //     });
        // });
        // Partner selection change - auto-fill equity and calculate amount
        $('#partner_id').on('change', function() {
            var partnerId = $(this).val();
            var branchId = $('#branch_id').val();
            
            if (!partnerId || !branchId) {
                return;
            }
            
            // Show loading state
            $(this).addClass('is-loading');
            
            // AJAX call to get partner with equity data
            $.ajax({
                url: "{{ route('api.branch.partners.equity') }}",
                type: "GET",
                data: { branch_id: branchId },
                dataType: "json",
                success: function(response) {
                    if (response.success && response.data) {
                        var selectedPartner = response.data.find(function(partner) {
                            return partner.id == partnerId;
                        });
                        
                        if (selectedPartner && selectedPartner.equity_percentage && selectedPartner.equity_percentage > 0) {
                            $('#equity_percentage').val(selectedPartner.equity_percentage);
                            // Force update allocated amount
                            updateAllocatedAmount();
                            // toastr.info('Equity percentage auto-filled: ' + selectedPartner.equity_percentage + '%');
                        } else {
                            $('#equity_percentage').val('');
                            // Force update to clear allocated amount
                            updateAllocatedAmount();
                            toastr.warning('No equity percentage found for this partner');
                        }
                    }
                },
                error: function(xhr) {
                    console.error('Error fetching partner equity:', xhr);
                    toastr.error('Failed to fetch partner equity details');
                },
                complete: function() {
                    $('#partner_id').removeClass('is-loading');
                }
            });
        });

        // Equity percentage change - recalculate allocated amount
        $('#equity_percentage').on('change keyup', function() {
            updateAllocatedAmount();
        });

        // 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('');
                $('#allocated_amount').val('');
            }
        });

        // 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>Updating allocation...');
            toastr.info('Updating partner allocation...');
        });

        // Reset form handler
        $('button[type="reset"]').on('click', function(e) {
            e.preventDefault();
            if (confirm('Reset all changes? This will revert to the original values.')) {
                location.reload();
            }
        });

        // Initialize - Load partners when page loads
        var initialBranchId = $('#branch_id').val();
        var currentPartnerId = {{ $allocation->partner_id }};
        
        if (initialBranchId) {
            loadPartners(initialBranchId, currentPartnerId);
            fetchFinancialData();
        }
    });
</script>
@endsection