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

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

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

<style>
    .required-field::after {
        content: " *";
        color: red;
        font-weight: bold;
    }
    .form-label {
        font-weight: 500;
    }
    .card {
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
    }
    .text-muted {
        color: #6c757d;
        font-size: 0.875rem;
    }
    .partner-list {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 10px;
        background: #fff;
        min-height: 300px;
    }
    .partner-item {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
    }
    .partner-item:hover {
        background-color: #f8f9fa;
        transform: translateX(3px);
    }
    .partner-item.selected {
        background-color: #e7f3ff;
        border-left: 3px solid #28a745;
    }
    .partner-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #f8f9fa;
    }
    .partner-item.disabled:hover {
        transform: none;
    }
    .dynamic-section {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .equity-badge {
        font-size: 0.85rem;
        padding: 3px 8px;
        border-radius: 12px;
    }
    .remove-partner {
        padding: 4px 12px;
        font-size: 0.75rem;
    }
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid rgba(0,0,0,.1);
        border-radius: 50%;
        border-top-color: #007bff;
        animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .edit-equity-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
        background-color: #ffc107;
        color: #000;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 5px;
    }
    .edit-equity-btn:hover {
        background-color: #e0a800;
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb mb-4">
            <div>
                <h1 class="page-title mb-0 text-primary">Add Branch-Partner Mapping</h1>
                <p class="text-muted mt-1">Assign partners to branches with their equity percentages</p>
            </div>
            <div class="ms-auto">
                <a href="{{ route('branchpartner.index') }}" class="btn btn-secondary">
                    <i class="ti tabler-arrow-left"></i> Back to List
                </a>
            </div>
        </div>

        <!-- Form Card -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ti tabler-link"></i> Mapping Information
                        </h3>
                    </div>
                    <div class="card-body">
                        <form id="mappingForm" action="{{ route('branchpartner.store') }}" method="POST">
                            @csrf

                            <!-- Branch Selection -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="branch_id" class="form-label required-field">Select Branch</label>
                                    <select class="form-select @error('branch_id') is-invalid @enderror" 
                                            id="branch_id" 
                                            name="branch_id" 
                                            required>
                                        <option value="">-- Select Branch --</option>
                                        @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}" 
                                                data-code="{{ $branch->branch_code }}"
                                                {{ old('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="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', date('Y-m-d')) }}" 
                                           required>
                                    @error('effective_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Partner Selection Section -->
                            <div class="row mt-4">
                                <div class="col-12">
                                    <div class="dynamic-section">
                                        <h5 class="mb-3">
                                            <i class="ti tabler-users"></i> Assign Partners
                                        </h5>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label required-field">Available Partners</label>
                                                <div class="partner-list" id="availablePartners">
                                                    <div class="text-center text-muted py-4">
                                                        <i class="ti tabler-building-store"></i>
                                                        <p class="mt-2 mb-0">Select a branch and date first</p>
                                                    </div>
                                                </div>
                                                <small class="text-muted">Click on a partner to assign equity percentage</small>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label required-field">Selected Partners</label>
                                                <div class="partner-list" id="selectedPartners">
                                                    <div class="text-center text-muted py-4">
                                                        <i class="ti tabler-user-plus"></i>
                                                        <p class="mt-2 mb-0">No partners selected</p>
                                                    </div>
                                                </div>
                                                <small class="text-muted">Click "Edit" to modify equity percentage</small>
                                            </div>
                                        </div>

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

                                        <div class="row mt-3">
                                            <div class="col-md-12">
                                                <div class="alert alert-info" id="equityTotal">
                                                    <i class="ti tabler-chart-pie"></i> Total Equity: <strong>0.00%</strong>
                                                    <span class="text-muted ms-2">(Must equal 100%)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Form Actions -->
                            <div class="row mt-4">
                                <div class="col-md-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> Save Mapping
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // Toastr configuration
    toastr.options = {
        "closeButton": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "timeOut": "4000",
        "extendedTimeOut": "1000"
    };

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

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

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

    let selectedPartners = [];

    $(document).ready(function() {
        // Load available partners when branch or date changes
        $('#branch_id, #effective_date').on('change', function() {
            if ($('#branch_id').val() && $('#effective_date').val()) {
                loadAvailablePartners();
            } else {
                $('#availablePartners').html(`
                    <div class="text-center text-muted py-4">
                        <i class="ti tabler-building-store"></i>
                        <p class="mt-2 mb-0">Select a branch and date first</p>
                    </div>
                `);
            }
        });

        // Form submission
        $('#mappingForm').on('submit', function(e) {
            if (selectedPartners.length === 0) {
                e.preventDefault();
                toastr.warning('Please add at least one partner');
                return;
            }

            // const totalEquity = selectedPartners.reduce((sum, p) => sum + p.equity, 0);
            // if (totalEquity !== 100) {
            //     e.preventDefault();
            //     toastr.warning(`Total equity must equal 100%. Current total: ${totalEquity.toFixed(2)}%`);
            //     return;
            // }

            const btn = $('#submitBtn');
            btn.prop('disabled', true)
               .html('<span class="spinner-border spinner-border-sm me-2"></span>Saving mapping...');
            
            toastr.info('Saving mapping, please wait...');
        });

        // Initial load if branch and date are pre-selected
        if ($('#branch_id').val() && $('#effective_date').val()) {
            loadAvailablePartners();
        }
    });

    function loadAvailablePartners() {
        const branchId = $('#branch_id').val();
        const date = $('#effective_date').val();

        if (!branchId || !date) {
            return;
        }

        // Show loading state
        $('#availablePartners').html(`
            <div class="text-center py-4">
                <div class="loading-spinner"></div>
                <p class="mt-2 mb-0 text-muted">Loading partners...</p>
            </div>
        `);

        $.ajax({
            url: '{{ route("branchpartner.get-partners") }}',
            method: 'GET',
            data: { 
                branch_id: branchId, 
                date: date 
            },
            success: function(response) {
                if (!response || response.length === 0) {
                    $('#availablePartners').html(`
                        <div class="text-center text-muted py-4">
                            <i class="ti tabler-users"></i>
                            <p class="mt-2 mb-0">No available partners found</p>
                            <small>All partners may already be assigned for this period</small>
                        </div>
                    `);
                } else {
                    let html = '';
                    response.forEach(partner => {
                        const displayName = partner.partner_type === 'Individual' ? partner.full_name : partner.company_name;
                        const isSelected = selectedPartners.some(p => p.id === partner.id);
                        const disabledClass = isSelected ? 'disabled' : '';
                        
                        html += `
                            <div class="partner-item ${disabledClass}" 
                                 data-id="${partner.id}" 
                                 data-name="${escapeHtml(displayName)}"
                                 data-code="${partner.partner_code}">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>${escapeHtml(displayName)}</strong>
                                        <br><small class="text-muted">${partner.partner_code}</small>
                                    </div>
                                    ${!isSelected ? '<i class="ti tabler-plus text-primary" style="font-size: 1.2rem;"></i>' : '<span class="badge bg-success">Added</span>'}
                                </div>
                            </div>
                        `;
                    });
                    $('#availablePartners').html(html);

                    // Add click event to partner items (only if not already selected)
                    $('.partner-item:not(.disabled)').on('click', function() {
                        const partnerId = $(this).data('id');
                        const partnerName = $(this).data('name');
                        const partnerCode = $(this).data('code');

                        // Check if partner already selected
                        if (selectedPartners.some(p => p.id === partnerId)) {
                            toastr.warning(`${partnerName} is already added`);
                            return;
                        }

                        // Show equity input modal
                        showAddEquityModal(partnerId, partnerName, partnerCode);
                    });
                }
            },
            error: function(xhr) {
                console.error('Error loading partners:', xhr);
                $('#availablePartners').html(`
                    <div class="text-center text-danger py-4">
                        <i class="ti tabler-alert-circle"></i>
                        <p class="mt-2 mb-0">Error loading partners</p>
                        <small>Please try again or contact support</small>
                    </div>
                `);
                toastr.error('Failed to load available partners');
            }
        });
    }

    function showAddEquityModal(partnerId, partnerName, partnerCode, isEdit = false, editIndex = null) {
        const currentTotal = selectedPartners.reduce((sum, p) => sum + p.equity, 0);
        let remainingEquity = 100 - currentTotal;
        let currentEquity = 0;
        
        if (isEdit && editIndex !== null) {
            currentEquity = selectedPartners[editIndex].equity;
            remainingEquity = (100 - currentTotal) + currentEquity;
        }

        Swal.fire({
            title: isEdit ? 'Edit Equity Percentage' : 'Assign Equity Percentage',
            html: `
                <div class="text-start">
                    <p><strong>Partner:</strong> ${escapeHtml(partnerName)}</p>
                    <p><strong>Partner Code:</strong> ${partnerCode}</p>
                    ${!isEdit ? `<p><strong>Available Equity:</strong> <span class="text-primary fw-bold">${remainingEquity.toFixed(2)}%</span></p>` : ''}
                    <hr>
                    <div class="mb-3">
                        <label class="form-label">Equity Percentage (%)</label>
                        <input type="number" 
                               id="equityInput" 
                               class="form-control" 
                               name="equity_percentage"
                               step="0.01" 
                               min="0" 
                               max="${remainingEquity}"
                               value="${isEdit ? currentEquity : ''}"
                               placeholder="Enter equity percentage">
                        <small class="text-muted">Enter value between 0 and ${remainingEquity.toFixed(2)}</small>
                    </div>
                </div>
            `,
            showCancelButton: true,
            confirmButtonText: isEdit ? 'Update Equity' : 'Add Partner',
            cancelButtonText: 'Cancel',
            preConfirm: () => {
                const equity = document.getElementById('equityInput').value;
                if (!equity && equity !== 0) {
                    Swal.showValidationMessage('Please enter a percentage');
                    return false;
                }
                const equityNum = parseFloat(equity);
                if (isNaN(equityNum)) {
                    Swal.showValidationMessage('Please enter a valid number');
                    return false;
                }
                if (equityNum <= 0) {
                    Swal.showValidationMessage('Percentage must be greater than 0');
                    return false;
                }
                if (equityNum > remainingEquity) {
                    Swal.showValidationMessage(`Equity cannot exceed ${remainingEquity.toFixed(2)}%`);
                    return false;
                }
                return equityNum;
            }
        }).then((result) => {
            if (result.isConfirmed) {
                const equity = result.value;
                
                if (isEdit && editIndex !== null) {
                    // Update existing partner
                    selectedPartners[editIndex].equity = equity;
                    toastr.success(`${partnerName} equity updated to ${equity}%`);
                } else {
                    // Add new partner
                    selectedPartners.push({
                        id: partnerId,
                        name: partnerName,
                        code: partnerCode,
                        equity: equity
                    });
                    toastr.success(`${partnerName} added with ${equity}% equity`);
                }

                updateSelectedPartnersList();
                updateEquityTotal();
                createHiddenInputs();
                
                // Reload available partners to update the list
                loadAvailablePartners();
            }
        });
    }

    function updateSelectedPartnersList() {
        if (selectedPartners.length === 0) {
            $('#selectedPartners').html(`
                <div class="text-center text-muted py-4">
                    <i class="ti tabler-user-plus"></i>
                    <p class="mt-2 mb-0">No partners selected</p>
                </div>
            `);
            return;
        }

        let html = '';
        selectedPartners.forEach((partner, index) => {
            html += `
                <div class="partner-item selected" data-index="${index}">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <strong>${escapeHtml(partner.name)}</strong>
                            <br><small class="text-muted">${partner.code}</small>
                            <div class="mt-2">
                                <span class="badge bg-primary equity-badge">${partner.equity.toFixed(2)}% Equity</span>
                                <button type="button" class="btn btn-sm edit-equity-btn" data-index="${index}">
                                    <i class="ti tabler-edit"></i> Edit
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-danger remove-partner" data-index="${index}">
                            <i class="ti tabler-trash"></i> Remove
                        </button>
                    </div>
                </div>
            `;
        });

        $('#selectedPartners').html(html);

        // Add remove event
        $('.remove-partner').on('click', function() {
            const index = $(this).data('index');
            const removedPartner = selectedPartners[index];
            selectedPartners.splice(index, 1);
            updateSelectedPartnersList();
            updateEquityTotal();
            createHiddenInputs();
            loadAvailablePartners(); // Refresh available partners
            toastr.info(`${removedPartner.name} removed`);
        });

        // Add edit event
        $('.edit-equity-btn').on('click', function() {
            const index = $(this).data('index');
            const partner = selectedPartners[index];
            if (partner) {
                showAddEquityModal(partner.id, partner.name, partner.code, true, index);
            }
        });
    }

    function updateEquityTotal() {
        const total = selectedPartners.reduce((sum, p) => sum + p.equity, 0);
        const remaining = 100 - total;
        
        const totalHtml = `
            <i class="ti tabler-chart-pie"></i> Total Equity: <strong>${total.toFixed(2)}%</strong>
            <span class="text-muted ms-2">(Remaining: ${remaining.toFixed(2)}%)</span>
        `;
        
        $('#equityTotal').html(totalHtml);
        
        if (total > 100) {
            $('#equityTotal').removeClass('alert-info alert-success').addClass('alert-danger');
        } else if (total === 100) {
            $('#equityTotal').removeClass('alert-info alert-danger').addClass('alert-success');
        } else {
            $('#equityTotal').removeClass('alert-danger alert-success').addClass('alert-info');
        }
    }

    function createHiddenInputs() {
        let html = '';
        selectedPartners.forEach((partner, index) => {
            html += `
                <input type="hidden" name="partners[${index}][partner_id]" value="${partner.id}">
                <input type="hidden" name="partners[${index}][equity_percentage]" value="${partner.equity}">
            `;
        });
        $('#selectedInputs').html(html);
    }

    // Helper function to escape HTML special characters
    function escapeHtml(text) {
        if (!text) return '';
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }

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