{{-- 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">
                        <!-- Information Box -->
                        <!-- <div class="info-box">
                            <strong><i class="fas fa-info-circle"></i> Allocation Information:</strong><br>
                            Created: {{ $allocation->created_at->format('d-m-Y H:i:s') }} | 
                            Last Updated: {{ $allocation->updated_at->format('d-m-Y H:i:s') }}
                            @if($allocation->created_by)
                                | Created By: {{ $allocation->creator->name ?? 'N/A' }}
                            @endif
                        </div> -->

                        <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 }}
                                            </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', $allocation->financial_month) }}" 
                                        required>
                                    @error('financial_month')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-muted">Select the financial month for this allocation</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', $allocation->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', $allocation->equity_percentage) }}" 
                                        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', $allocation->allocated_amount) }}" 
                                        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', $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>

                                <!-- Preview Section -->
                                <!-- <div class="col-12 mb-3" id="previewSection">
                                    <div class="amount-preview">
                                        <strong>Allocation Summary:</strong><br>
                                        Partner: <span id="previewPartnerName">{{ $allocation->partner->partner_name ?? 'N/A' }}</span><br>
                                        Equity Percentage: <span id="previewEquity">{{ $allocation->equity_percentage }}</span>%<br>
                                        Allocated Amount: <span id="previewAmount">{{ number_format($allocation->allocated_amount, 2) }}</span><br>
                                        Financial Month: <span id="previewMonth">{{ $allocation->financial_month }}</span>
                                    </div>
                                </div> -->
                            </div>

                            <div class="col-md-12 mt-4 text-end">
                                <!-- <a href="{{ route('partner-allocations.show', $allocation->id) }}" class="btn btn-info me-2">
                                    <i class="fas fa-eye"></i> View Details
                                </a> -->
                                <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() {
        // 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');
            var currentEquity = $('#equity_percentage').val();
            
            if (equityPercentage && equityPercentage > 0 && !currentEquity) {
                $('#equity_percentage').val(equityPercentage);
                toastr.info('Equity percentage auto-filled from partner profile: ' + equityPercentage + '%');
                updatePreview();
            } else if (equityPercentage && equityPercentage > 0 && currentEquity != equityPercentage) {
                if (confirm('Partner has ' + equityPercentage + '% equity. Do you want to update to this value?')) {
                    $('#equity_percentage').val(equityPercentage);
                    toastr.info('Equity percentage updated to: ' + equityPercentage + '%');
                    updatePreview();
                }
            }
        });

        // 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();
            
            $('#previewPartnerName').text(partnerName || '-');
            $('#previewEquity').text(equity || '0');
            $('#previewAmount').text(amount ? parseFloat(amount).toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }) : '0.00');
            $('#previewMonth').text(month || '-');
        }

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

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

        // 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 updating to a future month. Please confirm the financial month is correct.');
                }
            }
        });

        // Status change warning for approved/disbursed allocations
        var originalStatus = '{{ $allocation->status }}';
        $('#status').on('change', function() {
            var newStatus = $(this).val();
            if ((originalStatus == 'approved' || originalStatus == 'disbursed') && newStatus != originalStatus) {
                toastr.warning('Changing status from ' + originalStatus.toUpperCase() + ' to ' + newStatus.toUpperCase() + '. Please ensure this is correct.');
            }
            
            // Add additional validation for disbursed status
            if (newStatus == 'disbursed') {
                if (confirm('Marking as disbursed means the funds have been released. This action may not be reversible. Continue?')) {
                    toastr.info('Please ensure all disbursement documents are completed.');
                } else {
                    $(this).val(originalStatus);
                }
            }
        });

        // 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 confirmation for major changes
            var changes = [];
            if ($('#equity_percentage').val() != '{{ $allocation->equity_percentage }}') {
                changes.push('Equity Percentage');
            }
            if ($('#allocated_amount').val() != '{{ $allocation->allocated_amount }}') {
                changes.push('Allocated Amount');
            }
            if ($('#status').val() != '{{ $allocation->status }}') {
                changes.push('Status');
            }
            
            // if (changes.length > 0) {
            //     if (!confirm('You are changing: ' + changes.join(', ') + '. Are you sure you want to update this allocation?')) {
            //         e.preventDefault();
            //         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 - reset to original values
        $('button[type="reset"]').on('click', function(e) {
            e.preventDefault();
            if (confirm('Reset all changes? This will revert to the original values.')) {
                location.reload(); // Simple reload to reset to original values
            }
        });
    });
</script>
@endsection