@extends('layouts.main')

@section('title', 'Branch-Partner Equity - Edit Mapping')

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

<style>
    :root {
        --primary: #3b82f6;
        --primary-dark: #2563eb;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
    }

    .required-field::after {
        content: " *";
        color: var(--danger);
        font-weight: bold;
    }
    
    .form-label {
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }
    
    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .card-header {
        background: white;
        border-bottom: 1px solid var(--gray-200);
        padding: 1rem 1.5rem;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .card-header h3 {
        color: var(--gray-800);
        font-weight: 600;
        margin: 0;
    }
    
    .partners-table-container {
        max-height: 500px;
        overflow-y: auto;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        background: white;
    }
    
    .partners-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .partners-table th {
        background: var(--gray-50);
        padding: 0.875rem 1rem;
        text-align: left;
        font-weight: 600;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.875rem;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
    }
    
    .partners-table td {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--gray-100);
        vertical-align: middle;
    }
    
    .partners-table tr:last-child td {
        border-bottom: none;
    }
    
    .partners-table tr:hover {
        background: var(--gray-50);
    }
    
    .partner-name {
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 0.25rem;
    }
    
    .partner-code {
        font-size: 0.75rem;
        color: var(--gray-500);
        font-family: monospace;
    }
    
    .equity-input {
        width: 110px;
        text-align: center;
        border: 1px solid var(--gray-200);
        border-radius: 6px;
        padding: 0.5rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .equity-input:focus {
        border-color: var(--primary);
        outline: none;
        box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
    }
    
    .equity-input.error {
        border-color: var(--danger);
        background: #fef2f2;
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--gray-400);
    }
    
    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        display: block;
        color: var(--gray-300);
    }
    
    .empty-state p {
        margin: 0;
        font-size: 0.875rem;
    }
    
    .loading-spinner {
        width: 24px;
        height: 24px;
        border: 2px solid var(--gray-200);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        display: inline-block;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .alert-equity {
        border-radius: 8px;
        padding: 0.75rem 1rem;
        font-weight: 500;
        background: #f0f9ff;
        border-left: 4px solid var(--primary);
    }
    
    .alert-equity strong {
        font-size: 1.125rem;
        color: var(--primary-dark);
    }
    
    .alert-equity.warning {
        background: #fef2f2;
        border-left-color: var(--danger);
    }
    
    .alert-equity.success {
        background: #ecfdf5;
        border-left-color: var(--success);
    }
    
    .form-control, .form-select {
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        transition: all 0.2s;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    }
    
    .btn-primary {
        background: var(--primary);
        border: none;
        padding: 0.5rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-primary:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }
    
    .btn-primary:disabled {
        background: var(--gray-400);
        transform: none;
    }
    
    .btn-secondary {
        background: white;
        border: 1px solid var(--gray-200);
        color: var(--gray-600);
        padding: 0.5rem 1.5rem;
        border-radius: 8px;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover {
        background: var(--gray-50);
        border-color: var(--gray-300);
    }
    
    .section-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .section-header i {
        font-size: 1.25rem;
        color: var(--primary);
    }
    
    .section-header h6 {
        margin: 0;
        font-weight: 600;
        color: var(--gray-700);
    }
    
    .warning-text {
        font-size: 0.75rem;
        color: var(--warning);
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 4px;
    }
    
    .badge-info {
        background: #e0f2fe;
        color: #0369a1;
    }
    
    .text-end {
        text-align: right;
    }
    
    .mt-2 {
        margin-top: 0.5rem;
    }
    
    .mt-4 {
        margin-top: 1.5rem;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem;
    }
    
    .me-2 {
        margin-right: 0.5rem;
    }
    
    .small {
        font-size: 0.75rem;
    }
    
    .text-muted {
        color: var(--gray-500);
    }
    
    .d-block {
        display: block;
    }
    
    .alert-warning {
        background-color: #fff3e0;
        border-left: 4px solid #f59e0b;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h1 class="h3 mb-1">Edit Branch Partner Mapping</h1>
                <p class="text-muted mb-0">Update equity percentages for partners</p>
            </div>
            <div>
                <a href="{{ route('branchpartner.index') }}" class="btn btn-secondary">
                    <i class="ti tabler-arrow-left"></i> Back
                </a>
            </div>
        </div>

        <!-- Warning Alert for Branch Change -->
        <div id="branchChangeWarning" class="alert-warning" style="display: none;">
            <i class="ti tabler-alert-circle"></i>
            <strong>Warning:</strong> Changing the branch will reset all equity values. Make sure to save your current changes before switching branches.
        </div>

        <!-- Form Card -->
        <div class="card">
            <div class="card-header">
                <h3>Mapping Information</h3>
            </div>
            <div class="card-body">
                <form id="mappingForm" action="{{ route('branchpartner.update', $branch->id) }}" method="POST">
                    @csrf
                    @method('Patch')
            
                    <!-- Branch and Date Selection -->
                    <div class="row g-3 mb-4">
                        <!-- <div class="col-md-6">
                            <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 $branchOption)
                                    <option value="{{ $branchOption->id }}" 
                                        {{ ($branch->id == $branchOption->id) ? 'selected' : '' }}>
                                        {{ $branchOption->branch_name }} ({{ $branchOption->branch_code }})
                                    </option>
                                @endforeach
                            </select>
                            @error('branch_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> -->
                        <div class="col-md-6">
                            <label class="form-label required-field">Branch</label>
                            <div class="branch-display">
                                <i class="ti tabler-building-store"></i>
                                <span id="branchNameDisplay">{{ $branch->branch_name }} ({{ $branch->branch_code }})</span>
                            </div>
                            <!-- Hidden input to submit branch_id -->
                            <input type="hidden" name="branch_id" id="branch_id" value="{{ $branch->id }}">
                        </div>

                        <div class="col-md-6">
                            <label for="effective_date" class="form-label required-field">Effective Date</label>
                            <input type="date" 
                                   class="form-control @error('effective_date') is-invalid @enderror" 
                                   id="effective_date" 
                                   name="effective_date" 
                                   value="{{ old('effective_date', $latestEffectiveDate ?? date('Y-m-d')) }}" 
                                   required>
                            @error('effective_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Partners Table -->
                    <div class="section-header">
                        <i class="ti tabler-users"></i>
                        <h6>Partners & Equity Distribution</h6>
                    </div>
                    
                    <div class="partners-table-container" id="partnersContainer">
                        <div class="empty-state">
                            <div class="loading-spinner"></div>
                            <p class="mt-2">Loading partners...</p>
                        </div>
                    </div>
                    
                    <small class="text-muted mt-2 d-block">
                        <i class="ti tabler-info-circle"></i> Enter equity percentage for each partner (total must equal 100%)
                    </small>

                    <!-- Hidden inputs for selected partners -->
                    <div id="partnerInputs"></div>

                    <!-- Equity Total -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div id="equityTotal" class="alert-equity">
                                <i class="ti tabler-chart-pie"></i>
                                Total Equity: <strong id="totalPercentage">0.00%</strong>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <a href="{{ route('branchpartner.index') }}" class="btn btn-secondary me-2">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="ti tabler-device-floppy"></i> Update Mapping
                            </button>
                        </div>
                    </div>
                </form>
            </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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: 3000
    };

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

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

    let partnerEquities = {};
    let currentBranchId = {{ $branch->id }};
    let isLoading = false;

    $(document).ready(function() {
        // Load partners on page load
        loadPartners();

        // Branch change event
        // $('#branch_id').on('change', function() {
        //     const newBranchId = $(this).val();
        //     if (newBranchId && newBranchId != currentBranchId) {
        //         $('#branchChangeWarning').show();
                
        //         Swal.fire({
        //             title: 'Change Branch?',
        //             text: 'Changing the branch will load different partner data. Any unsaved changes will be lost. Do you want to continue?',
        //             icon: 'warning',
        //             showCancelButton: true,
        //             confirmButtonColor: '#d33',
        //             cancelButtonColor: '#3085d6',
        //             confirmButtonText: 'Yes, change branch',
        //             cancelButtonText: 'No, stay'
        //         }).then((result) => {
        //             if (result.isConfirmed) {
        //                 currentBranchId = newBranchId;
        //                 // Clear current equities
        //                 partnerEquities = {};
        //                 // Reload partners for new branch
        //                 loadPartners();
        //                 // Update form action URL
        //                 const newUrl = "{{ url('branchpartner') }}/" + newBranchId;

        //                 $('#mappingForm').attr('action', newUrl);
        //                 toastr.info('Branch changed. Loading partners for selected branch...');
        //             } else {
        //                 // Reset select back to original branch
        //                 $('#branch_id').val(currentBranchId);
        //             }
        //             $('#branchChangeWarning').hide();
        //         });
        //     } else if (newBranchId == currentBranchId) {
        //         $('#branchChangeWarning').hide();
        //     }
        // });
        $('#branch_id').on('change', function() {
    const newBranchId = $(this).val();
    if (newBranchId && newBranchId != currentBranchId) {
        $('#branchChangeWarning').show();
        
        Swal.fire({
            title: 'Change Branch?',
            text: 'Changing the branch will create new mappings for the selected branch. Any unsaved changes will be lost. Do you want to continue?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, change branch',
            cancelButtonText: 'No, stay'
        }).then((result) => {
            if (result.isConfirmed) {
                currentBranchId = newBranchId;
                // Clear current equities
                partnerEquities = {};
                // Reload partners for new branch
                loadPartners();
                // Update form action URL to use the new branch ID
                const newUrl = "{{ url('branchpartner') }}/" + newBranchId;
                $('#mappingForm').attr('action', newUrl);
                // Also update the PUT method (since you're using PATCH)
                // No need to change method, just the action URL
                toastr.info('Branch changed. Loading partners for selected branch...');
            } else {
                // Reset select back to original branch
                $('#branch_id').val(currentBranchId);
            }
            $('#branchChangeWarning').hide();
        });
    } else if (newBranchId == currentBranchId) {
        $('#branchChangeWarning').hide();
    }
});

        // Date change event
        $('#effective_date').on('change', function() {
            if ($(this).val()) {
                loadPartners();
            }
        });

        // Form submission
        $('#mappingForm').on('submit', function(e) {
            // Get all partners with equity > 0
            let selectedPartners = [];
            let total = 0;
            
            for (let id in partnerEquities) {
                let equity = parseFloat(partnerEquities[id]);
                if (!isNaN(equity) && equity > 0) {
                    selectedPartners.push({ partner_id: id, equity_percentage: equity });
                    total += equity;
                }
            }
            
            if (selectedPartners.length === 0) {
                e.preventDefault();
                toastr.warning('Please add at least one partner with equity percentage');
                return false;
            }
            
            // Validate total equity
            // if (Math.abs(total - 100) > 0.01) {
            //     e.preventDefault();
            //     if (total < 100) {
            //         toastr.warning(`Total equity is ${total.toFixed(2)}%. It should be 100%! Need ${(100 - total).toFixed(2)}% more.`);
            //     } else {
            //         toastr.error(`Total equity is ${total.toFixed(2)}%. It cannot exceed 100%!`);
            //     }
            //     return false;
            // }
            
            // Create hidden inputs for submission
            let html = '';
            selectedPartners.forEach((p, i) => {
                html += `
                    <input type="hidden" name="partners[${i}][partner_id]" value="${p.partner_id}">
                    <input type="hidden" name="partners[${i}][equity_percentage]" value="${p.equity_percentage}">
                `;
            });
            $('#partnerInputs').html(html);
            
            const btn = $('#submitBtn');
            btn.prop('disabled', true).html('<i class="ti tabler-loader"></i> Updating...');
            return true;
        });
    });

    function loadPartners() {
        if (isLoading) return;
        
        isLoading = true;
        const branchId = $('#branch_id').val();
        const effectiveDate = $('#effective_date').val();
        
        if (!branchId || !effectiveDate) {
            $('#partnersContainer').html(`
                <div class="empty-state">
                    <i class="ti tabler-alert-circle"></i>
                    <p>Please select branch and date</p>
                </div>
            `);
            isLoading = false;
            return;
        }
        
        $('#partnersContainer').html(`
            <div class="empty-state">
                <div class="loading-spinner"></div>
                <p class="mt-2">Loading partners...</p>
            </div>
        `);

        $.ajax({
            url: '{{ route("branchpartner.get-partners") }}',
            type: 'GET',
            data: {
                branch_id: branchId,
                date: effectiveDate
            },
            success: function(res) {
                if (!res || res.length === 0) {
                    $('#partnersContainer').html(`
                        <div class="empty-state">
                            <i class="ti tabler-users"></i>
                            <p>No partners available for this branch</p>
                        </div>
                    `);
                    isLoading = false;
                    return;
                }
                
                // Clear existing equities before loading new ones
                partnerEquities = {};
                
                let html = `
                    <table class="partners-table">
                        <thead>
                            <tr>
                                <th>Partner</th>
                                <th style="width: 200px; text-align: center;">Equity Percentage (%)</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                res.forEach(partner => {
                    const name = partner.partner_type === 'Individual' ? partner.full_name : partner.company_name;
                    // Use the equity_percentage from the response (now it will have the correct value)
                    const existingValue = partner.equity_percentage || '';
                    
                    // Store in partnerEquities if there's a value
                    if (existingValue && parseFloat(existingValue) > 0) {
                        partnerEquities[partner.id] = parseFloat(existingValue);
                    }
                    
                    const hasError = existingValue && (parseFloat(existingValue) <= 0 || parseFloat(existingValue) > 100);
                    
                    // Add badge for existing mappings
                    const existingBadge = partner.is_mapped ? '<span class="badge badge-info ms-2" style="font-size: 0.7rem;">Mapped</span>' : '';
                    
                    html += `
                        <tr>
                            <td>
                                <div class="partner-name">${escapeHtml(name)} ${existingBadge}</div>
                                <div class="partner-code">${partner.partner_code}</div>
                            </td>
                            <td style="text-align: center;">
                                <input type="number" 
                                    class="equity-input ${hasError ? 'error' : ''}" 
                                    id="equity_${partner.id}" 
                                    value="${existingValue}"
                                    placeholder="0.00"
                                    step="0.01" 
                                    min="0" 
                                    max="100"
                                    onchange="updateEquity(${partner.id}, this.value)">
                                <span class="small">%</span>
                            </td>
                        </tr>
                    `;
                });
                
                html += `
                        </tbody>
                    </table>
                `;
                
                $('#partnersContainer').html(html);
                updateTotal();
                isLoading = false;
            },
            error: function() {
                $('#partnersContainer').html(`
                    <div class="empty-state">
                        <i class="ti tabler-alert-circle"></i>
                        <p>Error loading partners. Please try again.</p>
                    </div>
                `);
                isLoading = false;
            }
        });
    }
    
    function updateEquity(partnerId, value) {
        let equity = parseFloat(value);
        let input = $(`#equity_${partnerId}`);
        
        if (isNaN(equity) || equity <= 0) {
            if (value !== '' && value !== null) {
                // Invalid value
                input.addClass('error');
                delete partnerEquities[partnerId];
                toastr.warning('Please enter a valid percentage greater than 0');
            } else {
                input.removeClass('error');
                delete partnerEquities[partnerId];
            }
        } else if (equity > 100) {
            input.addClass('error');
            toastr.warning('Equity percentage cannot exceed 100%');
            partnerEquities[partnerId] = 100;
            input.val(100);
        } else {
            input.removeClass('error');
            partnerEquities[partnerId] = equity;
        }
        
        updateTotal();
    }
    
    function getTotalEquity() {
        let total = 0;
        for (let id in partnerEquities) {
            let equity = parseFloat(partnerEquities[id]);
            if (!isNaN(equity) && equity > 0) {
                total += equity;
            }
        }
        return total;
    }
    
    function updateTotal() {
        let total = getTotalEquity();
        let totalElement = $('#totalPercentage');
        let equityDiv = $('#equityTotal');
        
        totalElement.text(`${total.toFixed(2)}%`);
        
        // Remove existing classes and add appropriate one
        equityDiv.removeClass('warning success');
        
        if (Math.abs(total - 100) < 0.01 && total > 0) {
            equityDiv.addClass('success');
            equityDiv.css({
                'background': '#ecfdf5',
                'border-left-color': '#10b981'
            });
            totalElement.css('color', '#059669');
        } else if (total > 100) {
            equityDiv.addClass('warning');
            equityDiv.css({
                'background': '#fef2f2',
                'border-left-color': '#ef4444'
            });
            totalElement.css('color', '#dc2626');
        } else if (total > 0) {
            equityDiv.css({
                'background': '#f0f9ff',
                'border-left-color': '#3b82f6'
            });
            totalElement.css('color', '#2563eb');
        } else {
            equityDiv.css({
                'background': '#f0f9ff',
                'border-left-color': '#3b82f6'
            });
            totalElement.css('color', '#2563eb');
        }
        
        // Show/hide warning message
        if (total > 0 && Math.abs(total - 100) > 0.01) {
            let warningMsg = total < 100 ? `Need ${(100 - total).toFixed(2)}% more to reach 100%` : `${(total - 100).toFixed(2)}% over the limit`;
            if (!$('#totalWarning').length) {
                $('#equityTotal').after(`<div id="totalWarning" class="warning-text"><i class="ti tabler-alert-circle"></i> ${warningMsg}</div>`);
            } else {
                $('#totalWarning').html(`<i class="ti tabler-alert-circle"></i> ${warningMsg}`);
            }
        } else {
            $('#totalWarning').remove();
        }
    }
    
    function escapeHtml(text) {
        if (!text) return '';
        return text.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }
</script>
@endsection