@extends('layouts.app')

@section('title', 'Edit 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">Edit 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.update', $transaction) }}" onsubmit="handleCategorySubmit(event); disableSubmit(this);">
                    @csrf
                    @method('PUT')

                    <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" required>
                            <option value="">Select Business</option>
                            @foreach($businesses as $business)
                                <option value="{{ $business->id }}" {{ old('business_id', $transaction->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', $transaction->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', $transaction->transaction_type) == 'debit' ? 'selected' : '' }}>Debit(Payments)</option>
                            <option value="credit" {{ old('transaction_type', $transaction->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>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $transaction->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->path ?? $category->name }}
                                </option>
                            @endforeach
                        </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="{{ old('subcategory_id', $transaction->subcategory_id) }}">
                    {{-- <input type="hidden" id="current_agent_id" value="{{ $transaction->agent_id ?? '' }}"> --}}

                    {{-- Agent dropdown commented out
                     <div id="agentPaymentFields" class="mb-4 {{ $transaction->category && str_contains($transaction->category->name, 'Agent') ? '' : '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 {{ $transaction->category && str_contains($transaction->category->name, 'Refund') ? '' : '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', $transaction->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', $transaction->transaction_method) == 'cash_sr' ? 'selected' : '' }}>Cash (SAR)</option>
                            <option value="bank_sr" {{ old('transaction_method', $transaction->transaction_method) == 'bank_sr' ? 'selected' : '' }}>Bank (SAR)</option>
                            <option value="cash_tk" {{ old('transaction_method', $transaction->transaction_method) == 'cash_tk' ? 'selected' : '' }}>Cash (BDT)</option>
                            <option value="bank_tk" {{ old('transaction_method', $transaction->transaction_method) == 'bank_tk' ? 'selected' : '' }}>Bank (BDT)</option>
                        </select>
                    </div>

                    <div id="bdt-amount-field" class="mb-4 {{ in_array(old('transaction_method', $transaction->transaction_method), ['cash_tk', 'bank_tk']) ? '' : 'hidden' }}">
                        <label for="bdt_amount" class="block text-sm font-medium text-gray-700">Amount (BDT)</label>
                        @if($canEditAmount)
                            <input type="number" name="bdt_amount" id="bdt_amount" step="0.01" value="{{ old('bdt_amount', $transaction->bdt_amount) }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        @else
                            <input type="hidden" name="bdt_amount" value="{{ $transaction->bdt_amount }}">
                            <input type="number" value="{{ $transaction->bdt_amount }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100" disabled>
                        @endif
                        <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>
                          @if($canEditAmount)
                              <input type="number" name="amount" id="amount" step="0.01" value="{{ old('amount', $transaction->amount) }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" required>
                          @else
                              <input type="hidden" name="amount" value="{{ $transaction->amount }}">
                              <input type="number" value="{{ $transaction->amount }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100" disabled>
                          @endif
                      </div>

                    <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', $transaction->transaction_date->format('Y-m-d')) }}" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" {{ !$canEditDate ? 'readonly' : '' }} required>
                    </div>

                     <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', $transaction->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', $transaction->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">Update 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 parent categories based on transaction type and business
function loadCategories(type, businessId, preserveSelection = false) {
    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 => {
            const currentValue = preserveSelection ? categorySelect.value : null;
            
            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);
            });

            // Restore selection if preserving
            if (currentValue) {
                categorySelect.value = currentValue;
            }

            categorySelect.disabled = false;
            categorySelect.classList.remove("bg-gray-100", "cursor-not-allowed");
        })
        .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() {
    document.getElementById('hidden_subcategory_id').value = this.value;
});

// Load agents for selected business - commented out
// function loadAgents(businessId, currentAgentId = null) {
//     if (currentAgentId === null) {
//         currentAgentId = agentSelect.value;
//     }
//     
//     agentSelect.innerHTML = '<option value="">Select Agent</option>';
//     
//     const existingError = document.getElementById('agent-error');
//     if (existingError) existingError.remove();
//
//     if (!businessId) {
//         return;
//     }
//
//     fetch(`/get-agents?business_id=${businessId}`)
//         .then(response => {
//             if (!response.ok) throw new Error('Network error');
//             return response.json();
//         })
//         .then(data => {
//             if (data.length > 0) {
//                 data.forEach(agent => {
//                     const opt = document.createElement("option");
//                     opt.value = agent.id;
//                     opt.textContent = agent.name;
//                     if (currentAgentId && parseInt(currentAgentId) === agent.id) {
//                         opt.selected = true;
//                     }
//                     agentSelect.appendChild(opt);
//                 });
//             }
//         })
//         .catch(error => {
//             console.error('Error loading agents:', error);
//             const errorDiv = document.createElement('div');
//             errorDiv.id = 'agent-error';
//             errorDiv.className = 'text-red-500 text-sm mt-1';
//             errorDiv.textContent = 'Failed to load agents. Please refresh the page.';
//             agentSelect.parentNode.appendChild(errorDiv);
//         });
// }

// 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 and agents
businessSelect.addEventListener("change", function() {
    const businessId = this.value;
    const type = typeSelect.value;
    
    // Reset agent dropdown - commented out
    // agentSelect.innerHTML = '<option value="">Select Agent</option>';
    // agentPaymentFields.classList.add("hidden");
    
    // Reload categories
    if (type && businessId) {
        loadCategories(type, businessId);
    }
    
    // Reload agents for new business - commented out
    // if (businessId) {
    //     loadAgents(businessId, null);
    // }
});

// 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;
    }

    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 = 'Updating...';
}

function handleCategoryChange() {
    const selectedOption = categorySelect.options[categorySelect.selectedIndex];
    const categoryName = selectedOption?.textContent;
    const categoryData = selectedOption?.getAttribute('data-subcategories');
    const hasSubcategories = selectedOption?.getAttribute('data-has-subcategories') === 'true';

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

    if (categoryName?.includes("Refund")) {
        referenceField.classList.remove("hidden");
    }

    // Agent field display - commented out
    // if (categoryName?.includes("Agent")) {
    //     agentPaymentFields.classList.remove("hidden");
    //     return;
    // }

    if (hasSubcategories) {
        if (categoryData) {
            loadSubcategoriesFromData(JSON.parse(categoryData));
        } else {
            const type = typeSelect.value;
            const businessId = businessSelect.value;
            if (type && businessId && categorySelect.value) {
                loadSubcategories(type, businessId, categorySelect.value);
            }
        }
        subcategoryField.classList.remove("hidden");
        subcategorySelect.setAttribute("required", "true");
    }
}

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.value = '';
    } else {
        bdtField.classList.add('hidden');
        bdtInput.removeAttribute('required');
        sarInput.setAttribute('required', 'true');
        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() {
    const type = typeSelect.value;
    const businessId = businessSelect.value;

    // Only load categories if not already populated server-side
    const hasCategories = categorySelect.options.length > 1;
    if (type && businessId && !hasCategories) {
        loadCategories(type, businessId);
    } else if (type && businessId && hasCategories) {
        // Categories already loaded server-side, just trigger the change handler
        const event = new Event('change');
        categorySelect.dispatchEvent(event);
    }

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

    // Fetch exchange rate
    fetchExchangeRate();
    
    // Load agents only if editing a transaction with Agent category - commented out
    // const selectedCategoryOption = categorySelect.options[categorySelect.selectedIndex];
    // const categoryName = selectedCategoryOption?.textContent || '';
    // const currentAgentId = document.getElementById('current_agent_id')?.value;
    //
    // if (businessId && categoryName.includes('Agent')) {
    //     loadAgents(businessId, currentAgentId);
    //     agentPaymentFields.classList.remove("hidden");
    // }

    // Call handleCategoryChange on page load to show/hide Agent and Reference fields
    handleCategoryChange();

    // Add amount input listener for validation
    const amountInput = document.getElementById("amount");
    if (amountInput) {
        amountInput.addEventListener("input", validateAmount);
        amountInput.addEventListener("blur", validateAmount);
    }
});

function validateAmount() {
    const amountInput = document.getElementById("amount");
    const amount = parseFloat(amountInput.value);
    const errorDiv = document.getElementById("amount-error");

    if (!errorDiv) {
        amountInput.insertAdjacentHTML('afterend', '<div id="amount-error" class="text-red-500 text-sm mt-1"></div>');
    }

    const errorElement = document.getElementById("amount-error");

    if (isNaN(amount) || amount <= 0) {
        errorElement.textContent = "Amount must be greater than 0.";
        return false;
    }

    if (categorySelect.value) {
        fetch(`/get-categories?transaction_type=${typeSelect.value}&business_id=${businessSelect.value}`)
            .then(response => response.json())
            .then(data => {
                const category = data.find(cat => cat.id == categorySelect.value);
                if (category && category.limit > 0 && amount > category.limit) {
                    errorElement.textContent = `Amount must not exceed the category limit of ${category.limit}.`;
                    return false;
                } else {
                    errorElement.textContent = "";
                    return true;
                }
            });
    } else {
        errorElement.textContent = "";
        return true;
    }
}
</script>
@endsection