@extends('layouts.app')

@section('title', 'Create Transaction - Cash Book')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <h2 class="text-2xl font-bold mb-4">Create Transaction</h2>
            </div>

            <div class="p-6">
                @if($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach>
                        </ul>
                    </div>
                @endif

                <div id="limit-warning" class="hidden mb-4 bg-yellow-50 border-l-4 border-yellow-400 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                This transaction amount exceeds the category limit of <span id="category-limit-display" class="font-bold">0</span> SAR. 
                                The transaction will be submitted for approval by Super Admin.
                            </p>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('transactions.store') }}" onsubmit="handleCategorySubmit(event); disableSubmit(this);">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="business_id" class="block text-sm font-medium text-gray-700">Business</label>
                            <select name="business_id" id="business_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" onchange="handleBusinessChange(this.value)" required>
                                <option value="">Select Business</option>
                                @foreach($businesses as $business)
                                    <option value="{{ $business->id }}" {{ old('business_id') == $business->id ? 'selected' : '' }}>{{ $business->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="transaction_type" class="block text-sm font-medium text-gray-700">Transaction Type</label>
                            <select name="transaction_type" id="transaction_type" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" onchange="handleTransactionTypeChange(this.value)" required>
                                <option value="">Select Type</option>
                                <option value="debit" {{ old('transaction_type') == 'debit' ? 'selected' : '' }}>Debit(Payments)</option>
                                <option value="credit" {{ old('transaction_type') == 'credit' ? 'selected' : '' }}>Credit(Receipts)</option>
                            </select>
                        </div>

                        @if(!$isBranchAdmin)
                        <div>
                            <label for="branch_id" class="block text-sm font-medium text-gray-700">Branch</label>
                            <select name="branch_id" id="branch_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                                <option value="">Select Branch</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif

                        <div>
                            <label for="category_id" class="block text-sm font-medium text-gray-700">Parent Category</label>
                            <select name="category_id" id="category_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                                <option value="">Select Parent Category</option>
                            </select>
                        </div>

                        <div id="subcategory-field" class="hidden">
                            <label for="subcategory_id" class="block text-sm font-medium text-gray-700">Sub-Category</label>
                            <select name="subcategory_id" id="subcategory_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                <option value="">Select Sub-Category</option>
                            </select>
                        </div>

                        <input type="hidden" name="subcategory_id" id="hidden_subcategory_id" value="">

                        <div>
                            <label for="transaction_method" class="block text-sm font-medium text-gray-700">Transaction Method</label>
                            <select name="transaction_method" id="transaction_method" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                                <option value="">Select Method</option>
                                <option value="cash_sr" {{ old('transaction_method') == 'cash_sr' ? 'selected' : '' }}>Cash (SAR)</option>
                                <option value="bank_sr" {{ old('transaction_method') == 'bank_sr' ? 'selected' : '' }}>Bank (SAR)</option>
                                <option value="cash_tk" {{ old('transaction_method') == 'cash_tk' ? 'selected' : '' }}>Cash (BDT)</option>
                                <option value="bank_tk" {{ old('transaction_method') == 'bank_tk' ? 'selected' : '' }}>Bank (BDT)</option>
                            </select>
                        </div>

                        <div>
                            <label for="amount" class="block text-sm font-medium text-gray-700">Amount (SAR)</label>
                            <input type="number" name="amount" id="amount" step="0.01" value="{{ old('amount') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                        </div>

                        <div id="bdt-amount-field" class="hidden">
                            <label for="bdt_amount" class="block text-sm font-medium text-gray-700">Amount (BDT)</label>
                            <input type="number" name="bdt_amount" id="bdt_amount" step="0.01" value="{{ old('bdt_amount') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            <p class="mt-1 text-sm text-gray-500">Exchange rate: <span id="exchange-rate-display">Loading...</span></p>
                        </div>

                        @if(!$isBranchAdmin)
                        <div>
                            <label for="transaction_date" class="block text-sm font-medium text-gray-700">Transaction Date</label>
                            <input type="date" name="transaction_date" id="transaction_date" value="{{ old('transaction_date', date('Y-m-d')) }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                        </div>
                        @endif

                        <div id="referenceField" class="hidden">
                            <label for="reference" class="block text-sm font-medium text-gray-700">Reference</label>
                            <input type="text" name="reference" id="reference" value="{{ old('reference') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>

                        <div class="md:col-span-3">
                            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea name="description" id="description" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">{{ old('description') }}</textarea>
                        </div>
                    </div>

                     {{-- <div class="mb-4">
                         <label for="reference" class="block text-sm font-medium text-gray-700">Reference</label>
                         <input type="text" name="reference" id="reference" value="{{ old('reference') }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                     </div> --}}

                       <div class="flex items-center justify-between mt-6">
                          <a href="{{ route('transactions.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Cancel</a>
                          <div class="flex gap-2">
                               <button type="submit" id="normal-submit-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Create Transaction</button>
                               <button type="button" id="approval-submit-btn" class="hidden bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded" onclick="showApprovalConfirmModal()">Submit for Approval</button>
                          </div>
                      </div>
                      <input type="hidden" name="approval_confirmed" id="approval_confirmed" value="0">
                      <button type="submit" id="hidden-approval-submit" class="hidden">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Approval Confirmation Modal -->
<div id="approval-confirm-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-6 border w-full max-w-md shadow-lg rounded-md bg-white">
        <div class="text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 mb-4">
                <svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">Submit for Approval?</h3>
            <p class="text-sm text-gray-500 mb-4">
                This transaction amount exceeds the category limit of <strong><span id="modal-limit-display">0</span> SAR</strong>.
                <br><br>
                It will be submitted for Super Admin approval. The transaction will not appear in reports until approved.
            </p>
            <div class="flex justify-center gap-3">
                <button type="button" onclick="hideApprovalConfirmModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 font-medium">
                    Cancel
                </button>
                <button type="button" onclick="confirmSubmitApproval()" class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 font-medium">
                    Confirm Submit
                </button>
            </div>
        </div>
    </div>
</div>

<script>
const businessSelect = document.getElementById("business_id");
const typeSelect = document.getElementById("transaction_type");
const categorySelect = document.getElementById("category_id");
const subcategoryField = document.getElementById("subcategory-field");
const subcategorySelect = document.getElementById("subcategory_id");
// const agentSelect = document.getElementById("agent_id");
// const agentPaymentFields = document.getElementById("agentPaymentFields");
const referenceField = document.getElementById("referenceField");
const form = document.querySelector('form');

// Load businesses on page load
function loadBusinesses() {
    fetch('/get-businesses')
        .then(response => response.json())
        .then(data => {
            data.forEach(business => {
                const opt = document.createElement("option");
                opt.value = business.id;
                opt.textContent = business.name;
                businessSelect.appendChild(opt);
            });
        })
        .catch(error => console.error('Error loading businesses:', error));
}

    // Load parent categories based on transaction type and business
    function loadCategories(type, businessId) {
        categorySelect.innerHTML = '<option value="">Select Parent Category</option>';
        categorySelect.disabled = true;
        categorySelect.classList.add("bg-gray-100", "cursor-not-allowed");

        if (!type || !businessId) {
            return;
        }

        fetch(`/get-categories?transaction_type=${type}&business_id=${businessId}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(cat => {
                    const opt = document.createElement("option");
                    opt.value = cat.id;
                    opt.textContent = cat.path || cat.name;
                    opt.setAttribute('data-has-subcategories', cat.has_subcategories || false);
                    opt.setAttribute('data-subcategories', JSON.stringify(cat.subcategories || []));
                    categorySelect.appendChild(opt);
                });

                categorySelect.disabled = false;
                categorySelect.classList.remove("bg-gray-100", "cursor-not-allowed");

                categorySelect.addEventListener("change", function() {
                    const selectedOption = this.options[this.selectedIndex];
                    const hasSubcategories = selectedOption?.getAttribute('data-has-subcategories') === 'true';
                    const categoryData = selectedOption?.getAttribute('data-subcategories');

                    // Clear subcategory when parent changes
                    document.getElementById('hidden_subcategory_id').value = '';
                    subcategorySelect.innerHTML = '<option value="">Select Sub-Category</option>';
                    
                    if (hasSubcategories && categoryData) {
                        loadSubcategoriesFromData(JSON.parse(categoryData));
                        subcategoryField.classList.remove("hidden");
                        subcategorySelect.setAttribute("required", "true");
                    } else if (hasSubcategories) {
                        loadSubcategories(type, businessId, this.value);
                        subcategoryField.classList.remove("hidden");
                        subcategorySelect.setAttribute("required", "true");
                    } else {
                        subcategoryField.classList.add("hidden");
                        subcategorySelect.removeAttribute("required");
                        // Set hidden field to selected parent (no subcategory)
                        document.getElementById('hidden_subcategory_id').value = this.value;
                    }
                });
            })
            .catch(error => console.error('Error loading categories:', error));
    }

    // Load subcategories from embedded data
    function loadSubcategoriesFromData(subcategories) {
        subcategorySelect.innerHTML = '<option value="">Select Sub-Category</option>';
        
        if (subcategories && subcategories.length > 0) {
            subcategories.forEach(cat => {
                const opt = document.createElement("option");
                opt.value = cat.id;
                opt.textContent = cat.name;
                opt.setAttribute('data-limit', cat.limit || 0);
                subcategorySelect.appendChild(opt);
            });
        }
    }

    // Load sub-categories for selected parent
    function loadSubcategories(type, businessId, parentId) {
        subcategorySelect.innerHTML = '<option value="">Select Sub-Category</option>';

        if (parentId) {
            fetch(`/get-categories?transaction_type=${type}&business_id=${businessId}&parent_id=${parentId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.length > 0) {
                        data.forEach(cat => {
                            const opt = document.createElement("option");
                            opt.value = cat.id;
                            opt.textContent = cat.name;
                            opt.setAttribute('data-limit', cat.limit || 0);
                            subcategorySelect.appendChild(opt);
                        });
                    } else {
                        document.getElementById('hidden_subcategory_id').value = parentId;
                        subcategoryField.classList.add("hidden");
                        console.log('No subcategories found for parent:', parentId);
                    }
                })
                .catch(error => {
                    console.error('Error loading subcategories:', error);
                    alert('Failed to load subcategories. Please check your connection and try again.');
                });
        }
    }

    // Handle subcategory change
    subcategorySelect.addEventListener("change", function() {
        // Set hidden field to selected subcategory
        document.getElementById('hidden_subcategory_id').value = this.value;
    });

// Load agents for selected business - commented out
// function loadAgents(businessId) {
//     agentSelect.innerHTML = '<option value="">Select Agent</option>';
//
//     if (!businessId) {
//         return;
//     }
//
//     fetch(`/get-agents?business_id=${businessId}`)
//         .then(response => response.json())
//         .then(data => {
//             if (data.length > 0) {
//                 data.forEach(agent => {
//                     const opt = document.createElement("option");
//                     opt.value = agent.id;
//                     opt.textContent = agent.name;
//                     agentSelect.appendChild(opt);
//                 });
//             }
//         })
//         .catch(error => console.error('Error loading agents:', error));
// }

// Handle transaction type change - reload categories
typeSelect.addEventListener("change", function() {
    const businessId = businessSelect.value;

    if (this.value) {
        loadCategories(this.value, businessId);
    } else {
        categorySelect.innerHTML = '<option value="">Select Category</option>';
        categorySelect.disabled = true;
        categorySelect.classList.add("bg-gray-100", "cursor-not-allowed");
    }
});

// Handle business change - reload categories
businessSelect.addEventListener("change", function() {
    const type = typeSelect.value;

    if (type) {
        loadCategories(type, this.value);
    }
});

    // Form submission validation
    function handleCategorySubmit(event) {
        // Skip validation if approval was confirmed in modal
        if (document.getElementById('approval_confirmed').value === '1') {
            return true;
        }

        const categoryId = categorySelect.value;
        const subcategoryId = document.getElementById('hidden_subcategory_id').value;

        if (!categoryId) {
            event.preventDefault();
            alert('Please select a category');
            return false;
        }

        // If parent has subcategories and none selected, show error
        const selectedOption = categorySelect.options[categorySelect.selectedIndex];
        const hasSubcategories = selectedOption?.getAttribute('data-has-subcategories') === 'true';
        
        if (hasSubcategories && !subcategoryId) {
            event.preventDefault();
            alert('Please select a sub-category. This parent category has sub-categories available.');
            return false;
        }

        return true;
    }

    // Disable submit button on click
    function disableSubmit(form) {
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        submitBtn.textContent = 'Creating...';
    }

// Show/hide fields based on category selection
function handleCategoryChange() {
    const selectedOption = categorySelect.options[categorySelect.selectedIndex];
    const categoryName = selectedOption?.textContent;

    referenceField.classList.add("hidden");
    // agentPaymentFields.classList.add("hidden");

    if (categoryName?.includes("Refund")) {
        referenceField.classList.remove("hidden");
    }
    // if (categoryName?.includes("Agent Payment")) {
    //     agentPaymentFields.classList.remove("hidden");
    //     const businessId = businessSelect.value;
    //     loadAgents(businessId);
    // }
}

categorySelect.addEventListener("change", handleCategoryChange);
form.addEventListener("submit", handleCategorySubmit);

// Currency conversion handling
const methodSelect = document.getElementById('transaction_method');
const bdtField = document.getElementById('bdt-amount-field');
const bdtInput = document.getElementById('bdt_amount');
const sarInput = document.getElementById('amount');
const rateDisplay = document.getElementById('exchange-rate-display');
let exchangeRate = null;

async function fetchExchangeRate() {
    try {
        const response = await fetch('/api/currency/rate');
        const data = await response.json();
        exchangeRate = data.rate;
        rateDisplay.textContent = `1 SAR = ${exchangeRate} BDT`;
        return exchangeRate;
    } catch (error) {
        console.error('Error fetching exchange rate:', error);
        rateDisplay.textContent = 'Rate unavailable';
        return null;
    }
}

function handleMethodChange() {
    if (!methodSelect.value) return;

    const isBdtMethod = methodSelect.value.endsWith('_tk');

    if (isBdtMethod) {
        bdtField.classList.remove('hidden');
        bdtInput.setAttribute('required', 'true');
        sarInput.removeAttribute('required');
        sarInput.removeAttribute('readonly');
        sarInput.value = '';
    } else {
        bdtField.classList.add('hidden');
        bdtInput.removeAttribute('required');
        sarInput.setAttribute('required', 'true');
        sarInput.removeAttribute('readonly');
        bdtInput.value = '';
    }
}

function handleBdtAmountChange() {
    if (!exchangeRate) {
        fetchExchangeRate().then(() => {
            convertBdtToSar();
        });
    } else {
        convertBdtToSar();
    }
}

function convertBdtToSar() {
    const bdtAmount = parseFloat(bdtInput.value) || 0;
    if (bdtAmount > 0 && exchangeRate) {
        const sarAmount = bdtAmount / exchangeRate;
        sarInput.value = sarAmount.toFixed(2);
    } else {
        sarInput.value = '';
    }
}

methodSelect.addEventListener('change', handleMethodChange);
bdtInput.addEventListener('input', handleBdtAmountChange);

// Load businesses on page load
document.addEventListener("DOMContentLoaded", function() {
    loadBusinesses();
    fetchExchangeRate();

    const type = typeSelect.value;
    const businessId = businessSelect.value;

    if (type && businessId) {
        loadCategories(type, businessId);
    }

    // Initialize method change handler on page load
    if (methodSelect.value) {
        handleMethodChange();
    }
});

let currentCategoryLimit = 0;

function checkAmountLimit() {
    const amount = parseFloat(document.getElementById('amount').value) || 0;
    const categoryId = categorySelect.value || document.getElementById('hidden_subcategory_id').value;
    
    if (!amount || !categoryId) {
        hideWarning();
        return;
    }

    fetch(`/get-category-details?id=${categoryId}`)
        .then(response => response.json())
        .then(data => {
            currentCategoryLimit = parseFloat(data.limit) || 0;
            
            if (currentCategoryLimit > 0 && amount > currentCategoryLimit) {
                showWarning(currentCategoryLimit);
            } else {
                hideWarning();
            }
        })
        .catch(error => console.error('Error checking category limit:', error));
}

function showWarning(limit) {
    document.getElementById('limit-warning').classList.remove('hidden');
    document.getElementById('category-limit-display').textContent = limit;
    document.getElementById('normal-submit-btn').classList.add('hidden');
    document.getElementById('approval-submit-btn').classList.remove('hidden');
}

function hideWarning() {
    document.getElementById('limit-warning').classList.add('hidden');
    document.getElementById('normal-submit-btn').classList.remove('hidden');
    document.getElementById('approval-submit-btn').classList.add('hidden');
}

// Add event listeners to check limit when amount or category changes
document.getElementById('amount').addEventListener('input', checkAmountLimit);
document.getElementById('amount').addEventListener('change', checkAmountLimit);

categorySelect.addEventListener('change', function() {
    checkAmountLimit();
});

subcategorySelect.addEventListener('change', function() {
    checkAmountLimit();
});

function showApprovalConfirmModal() {
    document.getElementById('modal-limit-display').textContent = currentCategoryLimit;
    document.getElementById('approval-confirm-modal').classList.remove('hidden');
}

function hideApprovalConfirmModal() {
    document.getElementById('approval-confirm-modal').classList.add('hidden');
}

function confirmSubmitApproval() {
    document.getElementById('approval_confirmed').value = '1';
    hideApprovalConfirmModal();
    document.getElementById('hidden-approval-submit').click();
}

// Close modal when clicking outside
document.getElementById('approval-confirm-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        hideApprovalConfirmModal();
    }
});
</script>
@endsection