@extends('layouts.main')

@section('title', 'Food Cost Management')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.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; }
    .table th { background-color: #f8f9fa; font-weight: 600; }
    .action-btns { display: flex; gap: 5px; }
    .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    .percentage-badge { 
        background: #ffc107; 
        color: #000; 
        padding: 0.3rem 0.8rem; 
        border-radius: 20px; 
        font-weight: 600;
        font-size: 1rem;
    }
    .month-badge { 
        background: #6c757d; 
        color: white; 
        padding: 0.3rem 0.8rem; 
        border-radius: 20px; 
        font-weight: 500; 
    }
    .percentage-high { background: #dc3545; color: white; }
    .percentage-medium { background: #ffc107; color: #000; }
    .percentage-low { background: #28a745; color: white; }
</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">Food Cost</h1>
            </div>
            <div class="ms-auto">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                    Add New Entry
                </button>
                
                @if(request('branch_id'))
                    <a href="{{ route('branch.dashboard', request('branch_id')) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Branch
                    </a>
                @endif
            </div>
        </div>

        <!-- Food Cost Table -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <!-- @if(Auth::user()->hasRole('superadmin'))
                                <th>Partner</th>
                                @endif -->
                                <th>Branch</th>
                                <th>Month/Year</th>
                                <th>Food Cost</th>
                                <!-- <th>Status</th> -->
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($foodCosts as $key => $cost)

    <tr id="row-{{ $cost->id }}">
        <td>{{ $foodCosts->firstItem() + $key }}</td>
        <td><strong>{{ $cost->branch->branch_name ?? 'N/A' }}</strong></td>
        <td><span class="month-badge">{{ \Carbon\Carbon::createFromFormat('Y-m', $cost->month_year)->format('F Y') }}</span></td>
        @php
    $percentage = $cost->food_cost_percentage;
    
    // Auto-assign color based on percentage if no custom color exists
    $color = $cost->color;
    $statusLabel = '';
    
    if (!$color) {
        if ($percentage < 30) {
            $color = '#28a745';
            $statusLabel = '✅ Good';
        } elseif ($percentage >= 31 && $percentage <= 40) {
            $color = '#ffc107';
            $statusLabel = '⚠️ Warning';
        } elseif ($percentage > 40) {
            $color = '#dc3545';
            $statusLabel = '🔴 High';
        }
    } else {
        // If custom color exists, show appropriate label
        if ($color == '#28a745') {
            $statusLabel = '✅ Good';
        } elseif ($color == '#ffc107') {
            $statusLabel = '⚠️ Warning';
        } elseif ($color == '#dc3545') {
            $statusLabel = '🔴 High';
        }
    }
    
    // Determine text color for contrast
    $textColor = '#fff';
    if ($color == '#ffc107') {
        $textColor = '#000';
    }
@endphp

<td>
    <span class="percentage-badge" 
          style="background-color: {{ $color }}; color: {{ $textColor }};">
        {{ number_format($cost->food_cost_percentage, 2) }} %
        @if($statusLabel)
            <!--<br><small>{{ $statusLabel }}</smal
            
            // Real-time validation for color vs percentage
document.addEventListener('DOMContentLoaded', function() {
    // For Create Form
    const createColor = document.getElementById('create_color');
    const createPercentage = document.getElementById('create_percentage');
    
    if (createColor && createPercentage) {
        createColor.addEventListener('change', function() {
            validateColorPercentageMatch(createColor, createPercentage, 'create');
        });
        
        createPercentage.addEventListener('input', function() {
            validateColorPercentageMatch(createColor, createPercentage, 'create');
        });
    }
    
    // For Edit Form
    const editColor = document.getElementById('edit_color');
    const editPercentage = document.getElementById('edit_percentage');
    
    if (editColor && editPercentage) {
        editColor.addEventListener('change', function() {
            validateColorPercentageMatch(editColor, editPercentage, 'edit');
        });
        
        editPercentage.addEventListener('input', function() {
            validateColorPercentageMatch(editColor, editPercentage, 'edit');
        });
    }
});

function validateColorPercentageMatch(colorSelect, percentageInput, formType) {
    const color = colorSelect.value;
    const percentage = parseFloat(percentageInput.value);
    
    // Get the error element
    const errorId = formType + '_percentage_error';
    const errorDiv = document.getElementById(errorId);
    
    // Clear previous errors
    if (errorDiv) {
        errorDiv.textContent = '';
        errorDiv.style.display = 'none';
    }
    percentageInput.classList.remove('is-invalid');
    colorSelect.classList.remove('is-invalid');
    
    // Only validate if both have values
    if (!color || isNaN(percentage) || percentage < 0 || percentage > 100) {
        return;
    }
    
    let isValid = true;
    let errorMessage = '';
    
    // Check color against percentage
    if (color === '#28a745' && percentage > 30) {
        isValid = false;
        errorMessage = '⚠️ "Good" status (Green) is only valid for percentages below 30%. Current value: ' + percentage + '%';
    } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
        isValid = false;
        errorMessage = '⚠️ "Warning" status (Yellow) is only valid for percentages between 31% and 40%. Current value: ' + percentage + '%';
    } else if (color === '#dc3545' && percentage < 41) {
        isValid = false;
        errorMessage = '⚠️ "High" status (Red) is only valid for percentages above 40%. Current value: ' + percentage + '%';
    }
    
    if (!isValid) {
        // Show error
        if (errorDiv) {
            errorDiv.textContent = errorMessage;
            errorDiv.style.display = 'block';
            errorDiv.style.color = '#dc3545';
            errorDiv.style.fontSize = '14px';
            errorDiv.style.marginTop = '5px';
        }
        percentageInput.classList.add('is-invalid');
        colorSelect.classList.add('is-invalid');
        
        // Disable submit button
        const submitBtn = document.getElementById(formType + 'Submit');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.title = 'Please fix the color/percentage mismatch';
        }
    } else {
        // Enable submit button
        const submitBtn = document.getElementById(formType + 'Submit');
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.title = '';
        }
    }
}

// Also add validation before form submission
document.querySelector('form[action*="food-costs.store"]')?.addEventListener('submit', function(e) {
    const color = document.getElementById('create_color').value;
    const percentage = parseFloat(document.getElementById('create_percentage').value);
    
    if (color && !isNaN(percentage)) {
        if (color === '#28a745' && percentage > 30) {
            e.preventDefault();
            alert('⚠️ "Good" status is only for percentages below 30%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
            e.preventDefault();
            alert('⚠️ "Warning" status is only for percentages between 31% and 40%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#dc3545' && percentage < 41) {
            e.preventDefault();
            alert('⚠️ "High" status is only for percentages above 40%.\nPlease select the correct status color.');
            return false;
        }
    }
});

// Also add to edit form
document.getElementById('editForm')?.addEventListener('submit', function(e) {
    const color = document.getElementById('edit_color').value;
    const percentage = parseFloat(document.getElementById('edit_percentage').value);
    
    if (color && !isNaN(percentage)) {
        if (color === '#28a745' && percentage > 30) {
            e.preventDefault();
            alert('⚠️ "Good" status is only for percentages below 30%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
            e.preventDefault();
            alert('⚠️ "Warning" status is only for percentages between 31% and 40%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#dc3545' && percentage < 41) {
            e.preventDefault();
            alert('⚠️ "High" status is only for percentages above 40%.\nPlease select the correct status color.');
            return false;
        }
    }
});l>-->
        @endif
    </span>
</td>
        <td>
            <div class="action-btns">
                <button type="button" class="btn btn-sm btn-warning" onclick="editFoodCost({{ $cost->id }})">
                    Edit
                </button>
                <button type="button" class="btn btn-sm btn-danger" onclick="deleteFoodCost({{ $cost->id }})">
                    Delete
                </button>
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="{{ Auth::user()->hasRole('superadmin') ? '7' : '6' }}" class="text-center py-4">
            <p class="text-muted mb-0">No food cost entries found.</p>
            <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#createModal">
                Add New Entry
            </button>
        </td>
    </tr>
@endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    @if($foodCosts instanceof \Illuminate\Pagination\LengthAwarePaginator)
                        {{ $foodCosts->withQueryString()->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Modal -->
<div class="modal fade" id="createModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Food Cost</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('food-costs.store') }}" method="POST" id="createForm">
                @csrf
                <div class="modal-body">
                    @if($branches->isEmpty())
                        <div class="alert alert-warning">No branches assigned to you.</div>
                    @endif
                    
                    <!--<div class="mb-3">-->
                    <!--    <label class="form-label">Branch <span class="text-danger">*</span></label>-->
                    <!--    <select name="branch_id" id="create_branch_id" class="form-select" required {{ $branches->isEmpty() ? 'disabled' : '' }}>-->
                    <!--        <option value="">Select Branch</option>-->
                    <!--        @foreach($branches as $branch)-->
                    <!--            <option value="{{ $branch->id }}">{{ $branch->branch_name }} ({{ $branch->branch_code }})</option>-->
                    <!--        @endforeach-->
                    <!--    </select>-->
                    <!--    <div class="invalid-feedback" id="create_branch_error"></div>-->
                    <!--</div>-->
                    <div class="mb-3">
                        <label class="form-label">Branch <span class="text-danger">*</span></label>
                        <select name="branch_id" id="create_branch_id" class="form-select" required {{ $branches->isEmpty() ? 'disabled' : '' }}>
                            <option value="">Select Branch</option>
                            @foreach($branches as $branch)
                                @php
                                    $selected = (request()->query('branch_id') == $branch->id) ? 'selected' : '';
                                @endphp
                                <option value="{{ $branch->id }}" {{ $selected }}>
                                    {{ $branch->branch_name }} ({{ $branch->branch_code }})
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="create_branch_error"></div>
                    </div>

                    <!-- @if(Auth::user()->hasRole('superadmin'))
                    <div class="mb-3">
                        <label class="form-label">Partner <span class="text-danger">*</span></label>
                        <select name="partner_id" id="create_partner_id" class="form-select" required disabled>
                            <option value="">First select a branch</option>
                        </select>
                        <small class="text-muted">Partners associated with the selected branch will appear here</small>
                        <div class="invalid-feedback" id="create_partner_error"></div>
                    </div>
                    @endif -->

                    <div class="mb-3">
                        <label class="form-label">Month/Year <span class="text-danger">*</span></label>
                        <input type="month" name="month_year" id="create_month_year" class="form-control" 
                               value="{{ date('Y-m') }}" required>
                        <div class="invalid-feedback" id="create_month_error"></div>
                    </div>
                    
                    <!--<div class="mb-3">-->
                    <!--    <label class="form-label">Color <span class="text-danger">*</span></label>-->
                    <!--    <input type="color" name="color" id="color" class="form-control" -->
                    <!--           value="" required>-->
                    <!--    <div class="invalid-feedback" id="create_color_error"></div>-->
                    <!--</div>-->
                    <div class="mb-3">
                        <label class="form-label">Status Color <span class="text-danger">*</span></label>
                        <select name="color" id="create_color" class="form-select" required>
                            <option value="">Select Status</option>
                            <option value="#28a745">🟢 Good (Below 30%)</option>
                            <option value="#ffc107">🟡 Warning (31% - 40%)</option>
                            <option value="#dc3545">🔴 High (Above 40%)</option>
                        </select>
                        <div class="invalid-feedback" id="create_color_error"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Food Cost<span class="text-danger">*</span></label>
                        <input type="number" 
                           step="0.01" 
                           min="0" 
                           max="100" 
                           name="food_cost_percentage" 
                           id="create_percentage" 
                           class="form-control" 
                           placeholder="Enter percentage (0-100)" 
                           required
                           onkeydown="return preventInvalidInput(event, this)"
                           oninput="validateAndLimit(this)">
                        <small class="text-muted">Enter value between 0 and 100</small>
                        <div class="invalid-feedback" id="create_percentage_error"></div>
                        <!--<input type="number" step="0.01" min="0" max="100" name="food_cost_percentage" id="create_percentage" class="form-control" placeholder="Enter Cost" required>-->
                        <!-- <small class="text-muted">Enter value between 0 and 100</small> -->
                        <!--<div class="invalid-feedback" id="create_percentage_error"></div>-->
                    </div>

                    <!-- <div class="mb-3">
                        <div class="alert alert-info">
                            <strong>Guidelines:</strong>
                            <ul class="mb-0 mt-2">
                                <li><span class="badge bg-success">Low</span> Below 28%</li>
                                <li><span class="badge bg-warning text-dark">Normal</span> 28% - 35%</li>
                                <li><span class="badge bg-danger">High</span> Above 35%</li>
                            </ul>
                        </div>
                    </div> -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="createSubmit" {{ $branches->isEmpty() ? 'disabled' : '' }}>
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Food Cost</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm">
                @csrf
                @method('patch')
                <div class="modal-body">
                    <input type="hidden" id="edit_id" name="id">
                    
                    @if(Auth::user()->hasRole('superadmin'))
                    <input type="hidden" id="edit_current_partner_id" value="">
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label">Branch <span class="text-danger">*</span></label>
                        <select name="branch_id" id="edit_branch_id" class="form-select" required>
                            <option value="">Select Branch</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback" id="edit_branch_error"></div>
                    </div>

                    <!-- @if(Auth::user()->hasRole('superadmin'))
                    <div class="mb-3">
                        <label class="form-label">Partner <span class="text-danger">*</span></label>
                        <select name="partner_id" id="edit_partner_id" class="form-select" required>
                            <option value="">Select Partner</option>
                        </select>
                        <div class="invalid-feedback" id="edit_partner_error"></div>
                    </div>
                    @endif -->

                    <div class="mb-3">
                        <label class="form-label">Month/Year <span class="text-danger">*</span></label>
                        <input type="month" name="month_year" id="edit_month_year" class="form-control" required>
                        <div class="invalid-feedback" id="edit_month_error"></div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Status Color <span class="text-danger">*</span></label>
                        <select name="color" id="edit_color" class="form-select" required>
                            <option value="">Select Status</option>
                            <option value="#28a745">🟢 Good (Below 30%)</option>
                            <option value="#ffc107">🟡 Warning (31% - 40%)</option>
                            <option value="#dc3545">🔴 High (Above 40%)</option>
                        </select>
                        <div class="invalid-feedback" id="edit_color_error"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Food Cost <span class="text-danger">*</span></label>
                        <input type="number" 
                               step="0.01" 
                               min="0" 
                               max="100" 
                               name="food_cost_percentage" 
                               id="edit_percentage" 
                               class="form-control" 
                               placeholder="Enter percentage (0-100)" 
                               required
                               onkeydown="return preventInvalidInput(event, this)"
                               oninput="validateAndLimit(this)">
                        <small class="text-muted">Enter value between 0 and 100</small>
                        <div class="invalid-feedback" id="edit_percentage_error"></div>
                        <!--<input type="number" step="0.01" min="0" name="food_cost_percentage" id="edit_percentage" class="form-control" required>-->
                        <!--<div class="invalid-feedback" id="edit_percentage_error"></div>-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="editSubmit">
                        Update
                    </button>
                </div>
            </form>
        </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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Prevent typing invalid characters and values
function preventInvalidInput(event, input) {
    const key = event.key;
    const currentValue = input.value;
    
    // Allow control keys
    const controlKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 
                        'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
    
    if (controlKeys.includes(key)) {
        return true;
    }
    
    // Allow decimal point
    if (key === '.') {
        // Prevent multiple decimal points
        if (currentValue.includes('.')) {
            event.preventDefault();
            return false;
        }
        return true;
    }
    
    // Allow numbers only
    if (!/^\d$/.test(key)) {
        event.preventDefault();
        return false;
    }
    
    // Check if typing would exceed 100
    let newValue = currentValue + key;
    
    // If there's a decimal point, handle properly
    if (currentValue.includes('.')) {
        const parts = currentValue.split('.');
        const decimalPlaces = parts[1] ? parts[1].length : 0;
        
        // Limit to 2 decimal places
        if (decimalPlaces >= 2) {
            event.preventDefault();
            return false;
        }
        
        // Check if integer part would exceed 100
        const integerPart = parts[0];
        if (parseInt(integerPart) > 100) {
            event.preventDefault();
            showError(input, 'Maximum value is 100%');
            return false;
        }
    } else {
        // No decimal yet, check if number would exceed 100
        if (parseInt(newValue) > 100) {
            event.preventDefault();
            showError(input, 'Maximum value is 100%');
            return false;
        }
    }
    
    return true;
}

// Validate and limit the input value
function validateAndLimit(input) {
    let value = input.value;
    
    // Remove any non-numeric characters except decimal
    value = value.replace(/[^\d.]/g, '');
    
    // Ensure only one decimal point
    const decimalCount = (value.match(/\./g) || []).length;
    if (decimalCount > 1) {
        const firstDecimalIndex = value.indexOf('.');
        value = value.substring(0, firstDecimalIndex + 1) + value.substring(firstDecimalIndex + 1).replace(/\./g, '');
    }
    
    // Limit decimal places to 2
    if (value.includes('.')) {
        const parts = value.split('.');
        if (parts[1] && parts[1].length > 2) {
            value = parts[0] + '.' + parts[1].substring(0, 2);
        }
    }
    
    // Parse and limit between 0 and 100
    let numValue = parseFloat(value);
    
    if (isNaN(numValue)) {
        if (value === '') {
            input.value = '';
            clearError(input);
        } else if (value === '.') {
            input.value = '0.';
            clearError(input);
        } else {
            input.value = '';
        }
        return;
    }
    
    // Limit to range 0-100
    if (numValue > 100) {
        input.value = 100;
        showError(input, 'Maximum value is 100%');
    } else if (numValue < 0) {
        input.value = 0;
        showError(input, 'Minimum value is 0%');
    } else {
        input.value = value;
        clearError(input);
    }
}

// Show error message
function showError(input, message) {
    input.classList.add('is-invalid');
    const errorId = input.id + '_error';
    const errorDiv = document.getElementById(errorId);
    if (errorDiv) {
        errorDiv.textContent = message;
    }
}

// Clear error message
function clearError(input) {
    input.classList.remove('is-invalid');
    const errorId = input.id + '_error';
    const errorDiv = document.getElementById(errorId);
    if (errorDiv) {
        errorDiv.textContent = '';
    }
}

// Form submission validation for both forms
document.querySelector('form[action*="food-costs.store"]')?.addEventListener('submit', function(e) {
    const percentageInput = document.getElementById('create_percentage');
    const value = parseFloat(percentageInput.value);
    
    if (isNaN(value) || value < 0 || value > 100) {
        e.preventDefault();
        showError(percentageInput, 'Please enter a valid percentage between 0 and 100');
        percentageInput.focus();
        return false;
    }
});

document.getElementById('editForm')?.addEventListener('submit', function(e) {
    const percentageInput = document.getElementById('edit_percentage');
    const value = parseFloat(percentageInput.value);
    
    if (isNaN(value) || value < 0 || value > 100) {
        e.preventDefault();
        showError(percentageInput, 'Please enter a valid percentage between 0 and 100');
        percentageInput.focus();
        return false;
    }
});

// Initialize on page load to add listeners to dynamically created elements
document.addEventListener('DOMContentLoaded', function() {
    // For create form percentage input
    const createInput = document.getElementById('create_percentage');
    if (createInput) {
        createInput.addEventListener('blur', function() {
            let value = parseFloat(this.value);
            if (!isNaN(value)) {
                if (value > 100) this.value = 100;
                if (value < 0) this.value = 0;
            }
        });
    }
    
    // For edit form percentage input
    const editInput = document.getElementById('edit_percentage');
    if (editInput) {
        editInput.addEventListener('blur', function() {
            let value = parseFloat(this.value);
            if (!isNaN(value)) {
                if (value > 100) this.value = 100;
                if (value < 0) this.value = 0;
            }
        });
    }
});
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "4000"
    }

    @if(session('success'))
        Swal.fire({ icon: 'success', title: 'Success!', text: "{{ session('success') }}", timer: 3000 });
    @endif

    @if(session('error'))
        Swal.fire({ icon: 'error', title: 'Error!', text: "{{ session('error') }}" });
    @endif

    // Load partners based on branch selection (for Create Modal)
    $('#create_branch_id').on('change', function() {
        var branchId = $(this).val();
        var partnerSelect = $('#create_partner_id');
        
        if (branchId) {
            partnerSelect.prop('disabled', false).html('<option value="">Loading partners...</option>');
            
            $.ajax({
                url: '{{ url("food-costs/get-partners") }}/' + branchId,
                type: 'GET',
                success: function(response) {
                    if (response.success && response.data.length > 0) {
                        var options = '<option value="">Select Partner</option>';
                        $.each(response.data, function(index, partner) {
                            options += '<option value="' + partner.id + '">' + partner.name + ' (' + partner.partner_code + ')' + 
                                      (partner.equity_percentage ? ' - ' + partner.equity_percentage + '%' : '') + '</option>';
                        });
                        partnerSelect.html(options).prop('disabled', false);
                    } else {
                        partnerSelect.html('<option value="">No partners found for this branch</option>').prop('disabled', true);
                    }
                },
                error: function() {
                    partnerSelect.html('<option value="">Error loading partners</option>').prop('disabled', true);
                    toastr.error('Failed to load partners for this branch');
                }
            });
        } else {
            partnerSelect.html('<option value="">First select a branch</option>').prop('disabled', true);
        }
    });

    // Load partners based on branch selection (for Edit Modal)
    $('#edit_branch_id').on('change', function() {
        var branchId = $(this).val();
        var partnerSelect = $('#edit_partner_id');
        var currentPartnerId = $('#edit_current_partner_id').val();
        
        if (branchId) {
            partnerSelect.prop('disabled', false).html('<option value="">Loading partners...</option>');
            
            $.ajax({
                url: '{{ url("food-costs/get-partners") }}/' + branchId,
                type: 'GET',
                success: function(response) {
                    if (response.success && response.data.length > 0) {
                        var options = '<option value="">Select Partner</option>';
                        $.each(response.data, function(index, partner) {
                            var selected = (partner.id == currentPartnerId) ? 'selected' : '';
                            options += '<option value="' + partner.id + '" ' + selected + '>' + 
                                      partner.name + ' (' + partner.partner_code + ')' + 
                                      (partner.equity_percentage ? ' - ' + partner.equity_percentage + '%' : '') + 
                                      '</option>';
                        });
                        partnerSelect.html(options).prop('disabled', false);
                    } else {
                        partnerSelect.html('<option value="">No partners found for this branch</option>').prop('disabled', true);
                    }
                },
                error: function() {
                    partnerSelect.html('<option value="">Error loading partners</option>').prop('disabled', true);
                    toastr.error('Failed to load partners for this branch');
                }
            });
        } else {
            partnerSelect.html('<option value="">First select a branch</option>').prop('disabled', true);
        }
    });

    // Edit Function
    window.editFoodCost = function(id) {
        $('#editForm')[0].reset();
        $('.invalid-feedback').hide();
        $('.form-control, .form-select').removeClass('is-invalid');
        
        $('#editModal').modal('show');
        $('#editSubmit').prop('disabled', true).html(' Loading...');
        
        $.ajax({
            url: '{{ url("food-costs/edit") }}/' + id,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    let data = response.data;
                    $('#edit_id').val(data.id);
                    $('#edit_branch_id').val(data.branch_id);
                    $('#edit_month_year').val(data.month_year);
                    $('#edit_percentage').val(data.food_cost_percentage);
                    
                    @if(Auth::user()->hasRole('superadmin'))
                        $('#edit_current_partner_id').val(data.partner_id);
                        $('#edit_branch_id').trigger('change');
                    @endif
                    
                    $('#editSubmit').prop('disabled', false).html(' Update');
                } else {
                    toastr.error(response.message);
                    $('#editModal').modal('hide');
                }
            },
            error: function(xhr) {
                console.error(xhr);
                toastr.error('Failed to load data. Please try again.');
                $('#editModal').modal('hide');
            }
        });
    };

    // Edit Form Submit
    $('#editForm').on('submit', function(e) {
        e.preventDefault();
        
        let id = $('#edit_id').val();
        $('.invalid-feedback').hide();
        $('.form-control, .form-select').removeClass('is-invalid');
        
        $('#editSubmit').prop('disabled', true).html(' Updating...');
        
        $.ajax({
            url: '{{ url("food-costs/update") }}/' + id,
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#editModal').modal('hide');
                toastr.success(response.message);
                setTimeout(() => location.reload(), 1500);
            },
            error: function(xhr) {
                $('#editSubmit').prop('disabled', false).html(' Update');
                
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(key => {
                        if (key === 'branch_id') {
                            $('#edit_branch_id').addClass('is-invalid');
                            $('#edit_branch_error').html(errors[key][0]).show();
                        } else if (key === 'partner_id') {
                            $('#edit_partner_id').addClass('is-invalid');
                            $('#edit_partner_error').html(errors[key][0]).show();
                        } else if (key === 'month_year') {
                            $('#edit_month_year').addClass('is-invalid');
                            $('#edit_month_error').html(errors[key][0]).show();
                        } else if (key === 'food_cost_percentage') {
                            $('#edit_percentage').addClass('is-invalid');
                            $('#edit_percentage_error').html(errors[key][0]).show();
                        } else {
                            toastr.error(errors[key][0]);
                        }
                    });
                } else if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON.message || 'Permission denied.');
                } else {
                    toastr.error(xhr.responseJSON?.message || 'Error occurred. Please try again.');
                }
            }
        });
    });

    // Delete Function
    window.deleteFoodCost = function(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("food-costs/delete") }}/' + id,
                    type: 'DELETE',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        if (response.success) {
                            $('#row-' + id).fadeOut(500, function() {
                                $(this).remove();
                                if ($('tbody tr').length === 0) {
                                    location.reload();
                                }
                            });
                            toastr.success(response.message);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        let message = 'Error occurred while deleting.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        toastr.error(message);
                        console.error(xhr);
                    }
                });
            }
        });
    };

    // Reset forms on modal close
    $('#createModal').on('hidden.bs.modal', function() {
        $('#createForm')[0].reset();
        $('.invalid-feedback').hide();
        $('.form-control, .form-select').removeClass('is-invalid');
        $('#createSubmit').prop('disabled', false).html('Save');
        
        @if(Auth::user()->hasRole('superadmin'))
            $('#create_partner_id').html('<option value="">First select a branch</option>').prop('disabled', true);
        @endif
    });

    $('#editModal').on('hidden.bs.modal', function() {
        $('.invalid-feedback').hide();
        $('.form-control, .form-select').removeClass('is-invalid');
        $('#editSubmit').prop('disabled', false).html('Update');
    });
    
    let isSubmitting = false;

$('#createForm').on('submit', function(e) {
    e.preventDefault(); // Prevent default submission
    
    // Check if already submitting
    if (isSubmitting) {
        return false;
    }
    
    // Validate percentage
    const percentageInput = document.getElementById('create_percentage');
    const value = parseFloat(percentageInput.value);
    
    if (isNaN(value) || value < 0 || value > 100) {
        showError(percentageInput, 'Please enter a valid percentage between 0 and 100');
        percentageInput.focus();
        return false;
    }
    
    // Mark as submitting
    isSubmitting = true;
    const submitBtn = $('#createSubmit');
    submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Saving...');
    
    // Submit the form via AJAX or normal form submission
    // Option 1: Normal form submission (with flag reset after)
    this.submit();
    
    // Reset the flag after a timeout (safety mechanism)
    setTimeout(() => {
        isSubmitting = false;
        submitBtn.prop('disabled', false).html('Save');
    }, 5000);
});

// Real-time validation for color vs percentage
document.addEventListener('DOMContentLoaded', function() {
    // For Create Form
    const createColor = document.getElementById('create_color');
    const createPercentage = document.getElementById('create_percentage');
    
    if (createColor && createPercentage) {
        createColor.addEventListener('change', function() {
            validateColorPercentageMatch(createColor, createPercentage, 'create');
        });
        
        createPercentage.addEventListener('input', function() {
            validateColorPercentageMatch(createColor, createPercentage, 'create');
        });
    }
    
    // For Edit Form
    const editColor = document.getElementById('edit_color');
    const editPercentage = document.getElementById('edit_percentage');
    
    if (editColor && editPercentage) {
        editColor.addEventListener('change', function() {
            validateColorPercentageMatch(editColor, editPercentage, 'edit');
        });
        
        editPercentage.addEventListener('input', function() {
            validateColorPercentageMatch(editColor, editPercentage, 'edit');
        });
    }
});

function validateColorPercentageMatch(colorSelect, percentageInput, formType) {
    const color = colorSelect.value;
    const percentage = parseFloat(percentageInput.value);
    
    // Get the error element
    const errorId = formType + '_percentage_error';
    const errorDiv = document.getElementById(errorId);
    
    // Clear previous errors
    if (errorDiv) {
        errorDiv.textContent = '';
        errorDiv.style.display = 'none';
    }
    percentageInput.classList.remove('is-invalid');
    colorSelect.classList.remove('is-invalid');
    
    // Only validate if both have values
    if (!color || isNaN(percentage) || percentage < 0 || percentage > 100) {
        return;
    }
    
    let isValid = true;
    let errorMessage = '';
    
    // Check color against percentage
    if (color === '#28a745' && percentage > 30) {
        isValid = false;
        errorMessage = '⚠️ "Good" status (Green) is only valid for percentages below 30%. Current value: ' + percentage + '%';
    } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
        isValid = false;
        errorMessage = '⚠️ "Warning" status (Yellow) is only valid for percentages between 31% and 40%. Current value: ' + percentage + '%';
    } else if (color === '#dc3545' && percentage < 41) {
        isValid = false;
        errorMessage = '⚠️ "High" status (Red) is only valid for percentages above 40%. Current value: ' + percentage + '%';
    }
    
    if (!isValid) {
        // Show error
        if (errorDiv) {
            errorDiv.textContent = errorMessage;
            errorDiv.style.display = 'block';
            errorDiv.style.color = '#dc3545';
            errorDiv.style.fontSize = '14px';
            errorDiv.style.marginTop = '5px';
        }
        percentageInput.classList.add('is-invalid');
        colorSelect.classList.add('is-invalid');
        
        // Disable submit button
        const submitBtn = document.getElementById(formType + 'Submit');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.title = 'Please fix the color/percentage mismatch';
        }
    } else {
        // Enable submit button
        const submitBtn = document.getElementById(formType + 'Submit');
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.title = '';
        }
    }
}

// Also add validation before form submission
document.querySelector('form[action*="food-costs.store"]')?.addEventListener('submit', function(e) {
    const color = document.getElementById('create_color').value;
    const percentage = parseFloat(document.getElementById('create_percentage').value);
    
    if (color && !isNaN(percentage)) {
        if (color === '#28a745' && percentage > 30) {
            e.preventDefault();
            alert('⚠️ "Good" status is only for percentages below 30%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
            e.preventDefault();
            alert('⚠️ "Warning" status is only for percentages between 31% and 40%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#dc3545' && percentage < 41) {
            e.preventDefault();
            alert('⚠️ "High" status is only for percentages above 40%.\nPlease select the correct status color.');
            return false;
        }
    }
});

// Also add to edit form
document.getElementById('editForm')?.addEventListener('submit', function(e) {
    const color = document.getElementById('edit_color').value;
    const percentage = parseFloat(document.getElementById('edit_percentage').value);
    
    if (color && !isNaN(percentage)) {
        if (color === '#28a745' && percentage > 30) {
            e.preventDefault();
            alert('⚠️ "Good" status is only for percentages below 30%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#ffc107' && (percentage < 31 || percentage > 40)) {
            e.preventDefault();
            alert('⚠️ "Warning" status is only for percentages between 31% and 40%.\nPlease select the correct status color.');
            return false;
        } else if (color === '#dc3545' && percentage < 41) {
            e.preventDefault();
            alert('⚠️ "High" status is only for percentages above 40%.\nPlease select the correct status color.');
            return false;
        }
    }
});
</script>
@endsection