{{-- 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>
    :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;
    }
    
    .text-end {
        text-align: right;
    }
    
    .text-center {
        text-align: center;
    }
    
    .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;
    }
    
    .gap-1 {
        gap: 0.25rem;
    }
</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">Add Branch Partner Mapping</h1>
                <p class="text-muted mb-0">Assign equity percentages to partners for this branch</p>
            </div>
            <div>
                <a href="{{ route('branchpartner.index') }}" class="btn btn-secondary">
                    <i class="ti tabler-arrow-left"></i> Back
                </a>
            </div>
        </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.store') }}" method="POST">
                    @csrf

                    <!-- 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 $branch)
                                    <option value="{{ $branch->id }}" 
                                        {{ 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">
                            <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>

                    <!-- 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">Select branch and date to load 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> Save 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 = {}; // Store equity values keyed by partner ID

    $(document).ready(function() {
        $('#branch_id, #effective_date').on('change', function() {
            if ($('#branch_id').val() && $('#effective_date').val()) {
                loadPartners();
            } else {
                $('#partnersContainer').html(`
                    <div class="empty-state">
                        <p>Select branch and date first</p>
                    </div>
                `);
                updateTotal();
            }
        });

        $('#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;
            }
            
            // 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> Saving...');
            return true;
        });

        // Load partners if branch and date are already selected
        if ($('#branch_id').val() && $('#effective_date').val()) {
            loadPartners();
        }
    });

    function loadPartners() {
        $('#partnersContainer').html(`
            <div class="empty-state">
                <div class="loading-spinner"></div>
                <p class="mt-2">Loading partners...</p>
            </div>
        `);

        $.get('{{ route("branchpartner.get-partners") }}', {
            branch_id: $('#branch_id').val(),
            date: $('#effective_date').val()
        }, 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>
                `);
                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
                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 bg-info ms-2" style="font-size: 0.7rem;">Existing</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();
        }).fail(function() {
            $('#partnersContainer').html(`
                <div class="empty-state">
                    <i class="ti tabler-alert-circle"></i>
                    <p>Error loading partners. Please try again.</p>
                </div>
            `);
        });
    }
    
    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