{{-- resources/views/uoms/create_conversion.blade.php --}}
@extends('layouts.master')
@section('content')
<div class="container-fluid py-3">
    <!-- Back Link -->
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('uoms.index') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to UOMs
        </a>
    </div>

    <div class="row">
        <!-- Form Section: Add / Edit UOM Conversion -->
        <div class="col-lg-5">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 id="convFormHeader" class="mb-0"><i class="fas fa-exchange-alt me-2"></i> Add Conversion</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('uom_conversions.store') }}" method="POST" id="conversionForm">
                        @csrf
                        <input type="hidden" name="id" id="conversionId" value="">
                        <div id="timeoutConv">
                            @if(Session::has('success'))
                                <p class="alert alert-info">{{ Session('success') }}</p>
                            @endif
                            @if($errors->any())
                                <p class="alert alert-danger">{{ $errors->first() }}</p>
                            @endif
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>Category:</strong></label>
                            <select name="uom_category_id"
                                    id="conv_uom_category_id"
                                    class="form-control"
                                    required>
                                <option value="" disabled selected>-- Select Category --</option>
                                @foreach($uom_categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->description }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>Unit:</strong></label>
                            <select name="from_uom_id"
                                    id="from_uom_id"
                                    class="form-control"
                                    required disabled>
                                <option value="" disabled selected>-- Select From UOM --</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>Base Unit:</strong></label>
                            <select name="to_uom_id"
                                    id="to_uom_id"
                                    class="form-control"
                                    required disabled>
                                <option value="" disabled selected>-- Select To UOM --</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>1 <span id="from_label">From</span> equals:</strong></label>
                            <input type="number"
                                   step="any"
                                   class="form-control"
                                   name="factor"
                                   id="factorInput"
                                   placeholder="Enter conversion factor"
                                   required
                                   disabled>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label"><strong>1 <span id="to_label">To</span> equals (auto):</strong></label>
                            <input type="text"
                                   class="form-control"
                                   id="reverseDisplay"
                                   readonly
                                   placeholder="Auto-calculated">
                        </div>
                        
                        <div class="d-flex justify-content-end mt-4">
                            <input type="submit"
                                   id="submitConvButton"
                                   class="btn btn-primary me-2"
                                   value="SUBMIT"
                                   disabled>
                            <input type="reset"
                                   class="btn btn-outline-secondary"
                                   onclick="resetConvForm()"
                                   value="REFRESH">
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Table Section: List Conversions -->
        <div class="col-lg-7 mt-4 mt-lg-0">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> Conversion List</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Category</th>
                                    <th>Unit</th>
                                    <th>Base Unit</th>
                                    <th>Factor (1 Unit = X Base Unit)</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($conversions as $conv)
                                @php
                                    $from = $conv->fromUnit;
                                    $to = $conv->toUnit;
                                    $factor = $conv->factor;
                                @endphp
                                <tr>
                                    <td>
                                        <a href="#" class="category-link" data-category-id="{{ $conv->uom_category_id }}">
                                            {{ $conv->category->description ?? '-' }}
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#" class="conversion-link"
                                           data-category-id="{{ $conv->uom_category_id }}"
                                           data-from-id="{{ $from->id }}"
                                           data-to-id="{{ $to->id }}"
                                           data-from-desc="{{ $from->description }}"
                                           data-to-desc="{{ $to->description }}"
                                           data-factor="{{ $factor }}">
                                            {{ $from->description }}
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#" class="conversion-link"
                                           data-category-id="{{ $conv->uom_category_id }}"
                                           data-from-id="{{ $from->id }}"
                                           data-to-id="{{ $to->id }}"
                                           data-from-desc="{{ $from->description }}"
                                           data-to-desc="{{ $to->description }}"
                                           data-factor="{{ $factor }}">
                                            {{ $to->description }}
                                        </a>
                                    </td>
                                    <td>1 {{ $from->description }} = {{ $factor }} {{ $to->description }}</td>
                                    <td class="text-center">
                                        <a href="#" class="btn btn-sm btn-primary me-1"
                                           onclick="editConversion(event, '{{ $conv->id }}', '{{ $conv->uom_category_id }}', '{{ $from->id }}', '{{ $to->id }}', '{{ $factor }}')">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('uom_conversions.delete', ['id' => $conv->id]) }}" class="btn btn-sm btn-danger deleteConvBtn">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal for Conversions -->
<div class="modal fade" id="deleteConvModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this conversion?
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteConvBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDeleteConvBtn" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Styled Conversion Info Modal -->
<div class="modal fade" id="popupConvModal" tabindex="-1" aria-labelledby="popupConvModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="popupConvModalLabel">Conversion Details</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" id="popupCloseBtn"></button>
            </div>
            <div class="modal-body text-center" style="font-size: 1.2rem; padding: 30px;" id="popupBody">
                <div id="popupList"></div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-outline-info" data-bs-dismiss="modal" id="popupFooterClose">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    const uoms = @json($uoms);
    @php
        $convArray = $conversions->map(function($c) {
            return [
                'id' => $c->id,
                'uom_category_id' => $c->uom_category_id,
                'from_id' => $c->fromUnit->id,
                'from_desc' => $c->fromUnit->description,
                'to_id' => $c->toUnit->id,
                'to_desc' => $c->toUnit->description,
                'factor' => $c->factor,
            ];
        })->toArray();
    @endphp
    const conversionsData = @json($convArray);
    let deleteConvUrl = null;
    let editing = false;

    function populateUomSelects(categoryId) {
        const fromSelect = document.getElementById('from_uom_id');
        const toSelect = document.getElementById('to_uom_id');
        fromSelect.innerHTML = '<option value="" disabled selected>-- Select From UOM --</option>';
        toSelect.innerHTML = '<option value="" disabled selected>-- Select To UOM --</option>';
        uoms.forEach(u => {
            if (u.uom_category_id == categoryId) {
                const opt1 = document.createElement('option'); opt1.value = u.id; opt1.text = u.description; fromSelect.appendChild(opt1);
                const opt2 = document.createElement('option'); opt2.value = u.id; opt2.text = u.description; toSelect.appendChild(opt2);
            }
        });
        fromSelect.disabled = false; toSelect.disabled = false;
        document.getElementById('factorInput').disabled = true;
        document.getElementById('submitConvButton').disabled = true;
        document.getElementById('reverseDisplay').value = '';
        document.getElementById('from_label').innerText = 'From';
        document.getElementById('to_label').innerText = 'To';
    }

    document.addEventListener('DOMContentLoaded', function () {
        const modalEl = document.getElementById('deleteConvModal');
        const bsModal = new bootstrap.Modal(modalEl);
        document.querySelectorAll('.deleteConvBtn').forEach(btn => {
            btn.addEventListener('click', function (e) { e.preventDefault(); deleteConvUrl = this.getAttribute('href'); bsModal.show(); });
        });
        document.getElementById('confirmDeleteConvBtn').addEventListener('click', function () { bsModal.hide(); if (deleteConvUrl) window.location.href = deleteConvUrl; });
        document.getElementById('cancelDeleteConvBtn').addEventListener('click', () => bsModal.hide());

        document.querySelectorAll('.conversion-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const categoryId = parseInt(this.dataset.categoryId);
                const toDesc = this.dataset.toDesc;
                const fromDesc = this.dataset.fromDesc;
                const factor = parseFloat(this.dataset.factor);
                const rev = factor != 0 ? parseFloat((1/factor).toFixed(6)) : '';
                const convs = conversionsData.filter(c => c.uom_category_id == categoryId);
                const graph = {};
                convs.forEach(c => {
                    if (!graph[c.from_id]) graph[c.from_id] = [];
                    graph[c.from_id].push({ to: c.to_id, factor: parseFloat(c.factor) });
                    const revFactor = c.factor != 0 ? 1 / parseFloat(c.factor) : 0; 
                    if (!graph[c.to_id]) graph[c.to_id] = [];
                    graph[c.to_id].push({ to: c.from_id, factor: revFactor });
                });
                let html = '<div style="text-align:left;">';
                html += `<p><strong>1 ${fromDesc} = ${factor} ${toDesc}</strong></p>`;
                html += `<p><strong>1 ${toDesc} = ${rev} ${fromDesc}</strong></p>`;
                const baseId = parseInt(this.dataset.toId);
                const visited = new Set([baseId]);
                const queue = [{ id: baseId, acc: 1 }];
                while (queue.length) {
                    const { id, acc } = queue.shift();
                    if (id !== baseId) {
                        const entry = convs.find(c => c.from_id === id) || convs.find(c => c.to_id === id);
                        let desc = '';
                        if (entry) {
                            desc = (entry.from_id === id) ? entry.from_desc : entry.to_desc;
                        }
                        const val = parseFloat(acc.toFixed(6));
                        html += `<p>1 ${toDesc} = ${val} ${desc}</p>`;
                    }
                    (graph[id] || []).forEach(n => {
                        if (!visited.has(n.to)) { visited.add(n.to); queue.push({ id: n.to, acc: acc * n.factor }); }
                    });
                }
                html += '</div>';
                document.getElementById('popupList').innerHTML = html;
                new bootstrap.Modal(document.getElementById('popupConvModal')).show();
            });
        });

        document.querySelectorAll('.category-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault(); const categoryId = parseInt(this.dataset.categoryId);
                const convs = conversionsData.filter(c => c.uom_category_id == categoryId);
                if (!convs.length) return;
                const baseEntry = convs[0];
                const baseId = baseEntry.from_id;
                const baseDesc = baseEntry.from_desc;
                const graph = {};
                convs.forEach(c => {
                    if (!graph[c.from_id]) graph[c.from_id] = [];
                    graph[c.from_id].push({ to: c.to_id, factor: parseFloat(c.factor) });
                    const revFactor = c.factor != 0 ? 1 / parseFloat(c.factor) : 0;
                    if (!graph[c.to_id]) graph[c.to_id] = [];
                    graph[c.to_id].push({ to: c.from_id, factor: revFactor });
                });
                const visited = new Set([baseId]); const queue = [{ id: baseId, acc: 1 }];
                let html = '<div style="text-align:left;">';
                while (queue.length) {
                    const { id, acc } = queue.shift();
                    if (id !== baseId) {
                        const entry = convs.find(c => c.from_id === id) || convs.find(c => c.to_id === id);
                        let desc = '';
                        if (entry) { desc = (entry.from_id === id) ? entry.from_desc : entry.to_desc; }
                        const val = parseFloat(acc.toFixed(6));
                        html += `<p>1 ${baseDesc} = ${val} ${desc}</p>`;
                    }
                    (graph[id] || []).forEach(n => {
                        if (!visited.has(n.to)) { visited.add(n.to); queue.push({ id: n.to, acc: acc * n.factor }); }
                    });
                }
                html += '</div>';
                document.getElementById('popupList').innerHTML = html;
                new bootstrap.Modal(document.getElementById('popupConvModal')).show();
            });
        });

        document.getElementById('popupCloseBtn').addEventListener('click', () => location.reload());
        document.getElementById('popupFooterClose').addEventListener('click', () => location.reload());
    });

    document.getElementById('conv_uom_category_id').addEventListener('change', function() { populateUomSelects(this.value); });
    document.getElementById('from_uom_id').addEventListener('change', function() {
        document.getElementById('from_label').innerText = this.options[this.selectedIndex].text;
        document.getElementById('to_uom_id').value = '';
        document.getElementById('factorInput').value = '';
        document.getElementById('reverseDisplay').value = '';
        document.getElementById('factorInput').disabled = true;
        document.getElementById('submitConvButton').disabled = true;
    });
    document.getElementById('to_uom_id').addEventListener('change', function() {
        document.getElementById('to_label').innerText = this.options[this.selectedIndex].text;
        const fromId = document.getElementById('from_uom_id').value;
        const toId = this.value;
        if (fromId && toId && fromId !== toId) {
            document.getElementById('factorInput').disabled = false;
            document.getElementById('submitConvButton').disabled = false;
        } else {
            document.getElementById('factorInput').disabled = true;
            document.getElementById('submitConvButton').disabled = true;
            document.getElementById('factorInput').value = '';
            document.getElementById('reverseDisplay').value = '';
        }
    });
    document.getElementById('factorInput').addEventListener('input', function() {
        const v = parseFloat(this.value);
        if (!isNaN(v) && v > 0) {
            document.getElementById('reverseDisplay').value = parseFloat((1/v).toFixed(6));
        } else {
            document.getElementById('reverseDisplay').value = '';
        }
    });

    function resetConvForm() {
        editing = false;
        document.getElementById('conversionId').value = '';
        document.getElementById('conv_uom_category_id').value = '';
        document.getElementById('from_uom_id').innerHTML = '<option value="" disabled selected>-- Select From UOM --</option>';
        document.getElementById('to_uom_id').innerHTML = '<option value="" disabled selected>-- Select To UOM --</option>';
        document.getElementById('from_uom_id').disabled = true;
        document.getElementById('to_uom_id').disabled = true;
        document.getElementById('factorInput').value = '';
        document.getElementById('factorInput').disabled = true;
        document.getElementById('reverseDisplay').value = '';
        document.getElementById('from_label').innerText = 'From';
        document.getElementById('to_label').innerText = 'To';
        document.getElementById('convFormHeader').innerHTML = '<i class="fas fa-exchange-alt me-2"></i> Add Conversion';
        document.getElementById('submitConvButton').value = 'SUBMIT';
        document.getElementById('submitConvButton').disabled = true;
        document.getElementById('conversionForm').action = '{{ route("uom_conversions.store") }}';
        document.getElementById('timeoutConv').innerHTML = '';
    }

    function editConversion(event, id, categoryId, fromId, toId, factor) {
        event.preventDefault(); editing = true;
        document.getElementById('conversionId').value = id;
        document.getElementById('conv_uom_category_id').value = categoryId;
        populateUomSelects(categoryId);
        setTimeout(() => {
            document.getElementById('from_uom_id').value = fromId;
            document.getElementById('to_uom_id').value = toId;
            document.getElementById('from_label').innerText = document.getElementById('from_uom_id').selectedOptions[0].text;
            document.getElementById('to_label').innerText = document.getElementById('to_uom_id').selectedOptions[0].text;
            document.getElementById('factorInput').disabled = false;
            document.getElementById('factorInput').value = factor;
            document.getElementById('reverseDisplay').value = parseFloat((1/factor).toFixed(6));
            document.getElementById('submitConvButton').disabled = false;
            document.getElementById('convFormHeader').innerHTML = '<i class="fas fa-exchange-alt me-2"></i> Edit Conversion';
            document.getElementById('submitConvButton').value = 'Update';
            document.getElementById('conversionForm').action = '{{ route("uom_conversions.edit") }}';
        }, 100);
    }
</script>

<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-back:hover {
    background-color: rgba(26, 185, 217, 0.1);
    text-decoration: none;
}
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
</style>
@endsection