@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

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

                    <div class="mb-4">
                        <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>

                    @if(!$isBranchAdmin)
                    <div class="mb-4">
                        <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 class="mb-4">
                        <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(Receivings)</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <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 class="mb-4 hidden" id="subcategory-field">
                        <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="">

                    {{-- Agent dropdown commented out
                     <div id="agentPaymentFields" class="mb-4 hidden">
                         <label for="agent_id" class="block text-sm font-medium text-gray-700">Agent</label>
                         <select name="agent_id" id="agent_id" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                             <option value="">Select Agent</option>
                         </select>
                     </div>
                     --}}

                     <div id="referenceField" class="mb-4 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="mb-4">
                        <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 id="bdt-amount-field" class="mb-4 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>

                    <div class="mb-4">
                        <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>

                    @if(!$isBranchAdmin)
                    <div class="mb-4">
                        <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 class="mb-4">
                         <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 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">
                        <a href="{{ route('transactions.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Cancel</a>
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Create Transaction</button>
                    </div>
                </form>
            </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) {
        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();
    }
});

validateAmount();
</script>
@endsection