@extends('layout.app')

<style>
    .pagination .page-link {
        font-size: 14px;
        padding: 5px 10px;
    }

  

</style>

@section('content')
<div class="container mt-4">
    <h2 class="text-center mb-4">Crane Equipment Management</h2>

    <!-- Search Bar & Buttons -->
    <div class="row mb-3">
        <div class="col-md-6">
            <input type="text" id="searchInput" class="form-control" placeholder="Search Main System Name..." onkeyup="searchEquipment()">
        </div>
        <div class="col-md-6 text-end mt-1">
            <a href="{{ route('equipment.all') }}" class="btn btn-secondary">View All</a> 
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEquipmentModal">
                Add System
            </button>
        </div>
    </div>

    <!--messages-->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        @if(session('success'))
            <div class="toast show bg-success text-white" role="alert">
                <div class="toast-header">
                    <strong class="me-auto">Success</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    {{ session('success') }}
                </div>
            </div>
        @endif
    </div>
    <div class="card">
        <div class="card-body">
            <h3 class="text-primary mb-3">System List</h3>
            <div class="table-responsive">
                <table class="table table-bordered" id="equipmentTable">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($equipments as $eIndex => $equipment)
                            <tr class="table-primary equipment-row">
                                <td>{{ $eIndex + 1 }}</td>
                                <td class="equipment-name"><strong>{{ $equipment->name }}</strong></td>
                                <td>{{ $equipment->description }}</td>
                                <td>
                                    <button class="btn btn-info btn-sm toggle-btn" data-bs-toggle="collapse" data-bs-target="#collapse_{{ $equipment->id }}">▸</button>
                                    <button class="btn btn-warning btn-sm" onclick="editEquipment({{ $equipment }})">Edit</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteEquipment({{ $equipment->id }})">Delete</button>
                                    <button class="btn btn-success btn-sm" onclick="openComponentModal({{ $equipment->id }})">Add Main Component</button>
                                </td>
                            </tr>

                            <tr id="collapse_{{ $equipment->id }}" class="collapse">
                                <td colspan="4" class="bg-light border-top">
                                    <h4 class="text-success">Main Components</h4>
                                    <table class="table table-sm">
                                        <tbody>
                                            @foreach($equipment->components as $cIndex => $component)
                                                <tr class="table-secondary">
                                                    <td>{{ $eIndex + 1 }}.{{ $cIndex + 1 }}</td>
                                                    <td class="ps-4">{{ $component->name }}</td>
                                                    <td>{{ $component->description }}</td>
                                                    <td>
                                                        <button class="btn btn-info btn-sm toggle-btn" data-bs-toggle="collapse" data-bs-target="#collapseComponent_{{ $component->id }}">▸</button>
                                                        <button class="btn btn-warning btn-sm" onclick="editComponent({{ $component }})">Edit</button>
                                                        <button class="btn btn-danger btn-sm" onclick="deleteComponent({{ $component->id }})">Delete</button>
                                                        <button class="btn btn-success btn-sm" onclick="openSubComponentModal({{ $component->id }})">Add Sub-Component</button>
                                                    </td>
                                                </tr>

                                                <tr id="collapseComponent_{{ $component->id }}" class="collapse">
                                                    <td colspan="4" class="bg-light border-top ps-5">
                                                        <h5 class="text-warning">Sub-Components</h5>
                                                        <table class="table table-sm">
                                                            <tbody>
                                                                @foreach($component->subComponents as $sIndex => $subComponent)
                                                                    <tr class="table-secondary">
                                                                        <td>{{ $eIndex + 1 }}.{{ $cIndex + 1 }}.{{ $sIndex + 1 }}</td>
                                                                        <td class="ps-5">{{ $subComponent->name }}</td>
                                                                        <td>{{ $subComponent->description }}</td>
                                                                        <td>
                                                                            <button class="btn btn-info btn-sm toggle-btn" data-bs-toggle="collapse" data-bs-target="#collapseSubComponent_{{ $subComponent->id }}">▸</button>
                                                                            <button class="btn btn-warning btn-sm" onclick="editSubComponent({{ $subComponent }})">Edit</button>
                                                                            <button class="btn btn-danger btn-sm" onclick="deleteSubComponent({{ $subComponent->id }})">Delete</button>
                                                                            <button class="btn btn-success btn-sm" onclick="openPartModal({{ $subComponent->id }})">Add Part</button>
                                                                        </td>
                                                                    </tr>

                                                                    <tr id="collapseSubComponent_{{ $subComponent->id }}" class="collapse">
                                                                        <td colspan="4" class="bg-light border-top ps-6">
                                                                            <h6 class="text-danger">Parts</h6>
                                                                            <table class="table table-sm">
                                                                                <tbody>
                                                                                    @foreach($subComponent->parts as $pIndex => $part)
                                                                                        <tr class="table-secondary">
                                                                                            <td>{{ $eIndex + 1 }}.{{ $cIndex + 1 }}.{{ $sIndex + 1 }}.{{ $pIndex + 1 }}</td>
                                                                                            <td class="ps-6">{{ $part->name }}</td>
                                                                                            <td>{{ $part->description }}</td>
                                                                                            <td>
                                                                                                <button class="btn btn-warning btn-sm" onclick="editPart({{ $part }})">Edit</button>
                                                                                                <button class="btn btn-danger btn-sm" onclick="deletePart({{ $part->id }})">Delete</button>
                                                                                            </td>
                                                                                        </tr>
                                                                                    @endforeach
                                                                                </tbody>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="d-flex justify-content-center mt-3">
                    {{ $equipments->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for Search -->
<script>
    function searchEquipment() {
        let searchQuery = document.getElementById('searchInput').value.toLowerCase();
        document.querySelectorAll('.equipment-row').forEach(row => {
            let itemName = row.querySelector('.equipment-name').textContent.toLowerCase();
            row.style.display = itemName.includes(searchQuery) ? '' : 'none';
        });
    }
</script>

<!-- Include modals -->
@include('pages.equipment.modals')

<!-- JavaScript for Search Function -->
<script>
    function searchEquipment() {
        let input = document.getElementById('searchInput').value.toLowerCase();
        let rows = document.querySelectorAll('.equipment-row');

        rows.forEach(row => {
            let name = row.querySelector('.equipment-name').textContent.toLowerCase();
            row.style.display = name.includes(input) ? '' : 'none';
        });
    }
</script>
<script>
    
    function editEquipment(equipment) {
        $('#editEquipmentForm').attr('action', '/equipment/' + equipment.id);
        $('#editEquipmentModal input[name="id"]').val(equipment.id);
        $('#editEquipmentModal input[name="name"]').val(equipment.name);
        $('#editEquipmentModal textarea[name="description"]').val(equipment.description);
        $('#editEquipmentModal').modal('show');
    }
    function deleteEquipment(id) {
        if (confirm("Are you sure?")) {
            $.ajax({
                url: '/equipment/' + id,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }
    
    function openComponentModal(equipmentId) {
        $('#addComponentModal input[name="equipment_id"]').val(equipmentId);
        $('#addComponentModal').modal('show');
    }
    
    function editComponent(component) {
        $('#editComponentForm').attr('action', '/components/' + component.id);
        $('#editComponentModal input[name="id"]').val(component.id);
        $('#editComponentModal input[name="name"]').val(component.name);
        $('#editComponentModal textarea[name="description"]').val(component.description);
        $('#editComponentModal').modal('show');
    }
    
    function deleteComponent(id) {
        if (confirm("Are you sure?")) {
            $.ajax({
                url: '/components/' + id,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }
</script>
<script>
    function openSubComponentModal(componentId) {
        $('#addSubComponentModal input[name="component_id"]').val(componentId);
        $('#addSubComponentModal').modal('show');
    }
    
    function editSubComponent(subComponent) {
        $('#editSubComponentForm').attr('action', '/sub-components/' + subComponent.id);
        $('#editSubComponentModal input[name="id"]').val(subComponent.id);
        $('#editSubComponentModal input[name="name"]').val(subComponent.name);
        $('#editSubComponentModal textarea[name="description"]').val(subComponent.description);
        $('#editSubComponentModal').modal('show');
    }
    
    function deleteSubComponent(id) {
        if (confirm("Are you sure?")) {
            $.ajax({
                url: '/sub-components/' + id,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }
    
    function openPartModal(subComponentId) {
        $('#addPartModal input[name="sub_component_id"]').val(subComponentId);
        $('#addPartModal').modal('show');
    }
    
    function editPart(part) {
        $('#editPartForm').attr('action', '/parts/' + part.id);
        $('#editPartModal input[name="id"]').val(part.id);
        $('#editPartModal input[name="name"]').val(part.name);
        $('#editPartModal textarea[name="description"]').val(part.description);
        $('#editPartModal').modal('show');
    }
    
    function deletePart(id) {
        if (confirm("Are you sure?")) {
            $.ajax({
                url: '/parts/' + id,
                type: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    location.reload();
                }
            });
        }
    }
    </script>
    
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            restoreCollapseState();
            
            document.querySelectorAll(".toggle-btn").forEach(button => {
                button.addEventListener("click", function() {
                    const targetId = this.getAttribute("data-bs-target").substring(1);
                    toggleCollapseState(targetId);
                    updateButtonState(this, targetId);
                });
            });
        });
    
        function toggleCollapseState(id) {
            let openSections = JSON.parse(localStorage.getItem("openSections")) || [];
            let element = document.getElementById(id);
    
            if (openSections.includes(id)) {
                openSections = openSections.filter(item => item !== id);
                element.classList.remove("show");
            } else {
                openSections.push(id);
                element.classList.add("show");
            }
    
            localStorage.setItem("openSections", JSON.stringify(openSections));
        }
    
        function restoreCollapseState() {
            let openSections = JSON.parse(localStorage.getItem("openSections")) || [];
            openSections.forEach(id => {
                let element = document.getElementById(id);
                if (element) {
                    element.classList.add("show");
                    let button = document.querySelector(`.toggle-btn[data-bs-target="#${id}"]`);
                    if (button) updateButtonState(button, id);
                }
            });
        }
    
        function updateButtonState(button, targetId) {
            let isOpen = document.getElementById(targetId).classList.contains("show");
            button.textContent = isOpen ? '▾' : '▸';
        }
    </script>
@endsection