@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush
<style>
    /* Button styling */
.select-all-btn, .deselect-all-btn {
    margin-right: 5px;
    transition: all 0.3s ease;
}

.select-all-btn.btn-secondary, .deselect-all-btn.btn-secondary {
    background-color: #6c757d;
    color: white;
}

/* Table styling */
.table-responsive {
    margin-top: 10px;
}

.child-table {
    display: none; /* Initially hidden */
}

/* Checkbox styling */
.form-check-input {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}

/* Row hover effect */
.table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .select-all-btn, .deselect-all-btn {
        margin-bottom: 5px;
    }
}
</style>
@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('crane.inventories.index') }}">Crane Inventory</a></li>
    <li class="breadcrumb-item active" aria-current="page">Edit Cranes - {{$craneInventory->platform}}</li>
  </ol>
</nav>
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('crane.inventories.update', $craneInventory->id) }}">
                    @method('PUT')
                    @csrf
                    <div class="form-control">
                         <!-- Show validation errors for serial_no, company_name, and field_id -->
                         @if ($errors->has('serial_no'))
                         <div class="alert alert-danger">
                             {{ $errors->first('serial_no') }}
                         </div>
                         @endif
                         @if ($errors->has('company_name'))
                         <div class="alert alert-danger">
                             {{ $errors->first('company_name') }}
                         </div>
                         @endif
                         @if ($errors->has('field_id'))
                         <div class="alert alert-danger">
                             {{ $errors->first('field_id') }}
                         </div>
                         @endif
                         @if ($errors->has('equipment_component_id'))
                         <div class="text-danger">{{ $errors->first('equipment_component_id') }}</div>
                         @endif
 
                         @if ($errors->has('component_part_id'))
                             <div class="text-danger">{{ $errors->first('component_part_id') }}</div>
                         @endif
 
                         @if ($errors->has('part_detail_id'))
                             <div class="text-danger">{{ $errors->first('part_detail_id') }}</div>
                         @endif
                         <br>
                        <h4>Model</h4><br>
                        <div class="row p-2">
                            <input type="hidden" id="getCraneInventoryId" name="id" value="{{$craneInventory->id}}">
                            <div class="col-sm-6">
                                <label for="name" class="form-label">Field:</label>
                                <select class="form-select" name="field_id" id="field_id">
                                    <option value="" selected>Please Choose</option>
                                    @foreach ($craneFields as $field)
                                    <option value="{{ $field->id }}"{{ $craneInventory->crane_field_id == $field->id ? 'selected' : ''}}>{{ $field->field_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="contact" class="form-label">Serial No:</label>
                                <input type="text" class="form-control" id="serial_no" name="serial_no" placeholder="Serial No" value="{{ $craneInventory->serial_no }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="contact" class="form-label">Company Name:</label>
                                <input type="text" class="form-control" id="company_name" name="company_name" placeholder="Company Name" value="{{ $craneInventory->company_name }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="contact" class="form-label">Platform:</label>
                                <input type="text" class="form-control" id="platform" name="platform" placeholder="Platform" value="{{ $craneInventory->platform }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="name" class="form-label">Manufacturer:</label>
                                <input type="text" class="form-control" id="manufacturer" name="manufacturer" placeholder="Manufacturer" value="{{ $craneInventory->manufacturer }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="contact" class="form-label">Model:</label>
                                <input type="text" class="form-control" id="model" name="model" placeholder="Model" value="{{ $craneInventory->model }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="name" class="form-label">Tag No:</label>
                                <input type="text" class="form-control" id="tag_no" name="tag_no" placeholder="Tag No" value="{{ $craneInventory->tag_no }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="contact" class="form-label">SWL MAIN/FLY:</label>
                                <input type="text" class="form-control" id="swl" name="swl" placeholder="SWL MAIN/FLY" value="{{ $craneInventory->swl }}">
                            </div>
                           <!-- Status Crane Dropdown -->
                            <div class="col-sm-6">
                                <label for="status_crane" class="form-label">Status Crane:</label>
                                <select class="form-control" id="status_crane" name="status_crane">
                                    <option value="">Select Status</option>
                                    <option value="Active" {{ $craneInventory->status_crane == 'Active' ? 'selected' : '' }}>Active</option>
                                    <option value="Inactive" {{ $craneInventory->status_crane == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                            </div>

                            <!-- Crane Type Dropdown -->
                            <div class="col-sm-6">
                                <label for="crane_type" class="form-label">Crane Type:</label>
                                <select class="form-control" id="crane_type" name="crane_type">
                                    <option value="">Select Type</option>
                                    <option value="Rental" {{ $craneInventory->crane_type == 'Rental' ? 'selected' : '' }}>Rental</option>
                                    <option value="Permanent" {{ $craneInventory->crane_type == 'Permanent' ? 'selected' : '' }}>Permanent</option>
                                </select>
                            </div>

                            <!-- EIAC Validity Dropdown -->
                            <div class="col-sm-6">
                                <label for="eiac_validity" class="form-label">EIAC VALIDITY:</label>
                                <select class="form-control" id="eiac_validity" name="eiac_validity">
                                    <option value="">Select Validity</option>
                                    <option value="Valid" {{ $craneInventory->eiac_validity == 'Valid' ? 'selected' : '' }}>Valid</option>
                                    <option value="Invalid" {{ $craneInventory->eiac_validity == 'Invalid' ? 'selected' : '' }}>Invalid</option>
                                </select>
                            </div>

                            <!-- Presence Dropdown -->
                            <div class="col-sm-6">
                                <label for="presence" class="form-label">Presence:</label>
                                <select class="form-control" id="presence" name="presence">
                                    <option value="">Select Presence</option>
                                    <option value="Unmanned" {{ $craneInventory->presence == 'Unmanned' ? 'selected' : '' }}>Unmanned</option>
                                    <option value="Manned" {{ $craneInventory->presence == 'Manned' ? 'selected' : '' }}>Manned</option>
                                </select>
                            </div>
                        </div>
                    </div><br>
                    <div class="form-control">
                        <h4>Specification</h4><br>
                        <div class="row p-2">
                            <div class="col-sm-4">
                                <label for="name" class="form-label">Capacity:</label>
                                <input type="text" class="form-control" id="capacity" name="capacity" placeholder="Capacity" value="{{ $craneInventory->capacity }}">
                            </div>
                            <div class="col-sm-4">
                                <label for="contact" class="form-label">Boom Length:</label>
                                <input type="text" class="form-control" id="boom_length" name="boom_length" placeholder="Boom Length" value="{{ $craneInventory->boom_length }}">
                            </div>
                            <div class="col-sm-4">
                                <label for="email" class="form-label">Dimensions:</label>
                                <input type="text" class="form-control" id="dimensions" name="dimensions" placeholder="Dimensions" value="{{ $craneInventory->dimensions }}">
                            </div>
                        </div>
                        <div class="row p-2">
                            <div class="col-sm-4">
                                <label for="name" class="form-label">Weight:</label>
                                <input type="text" class="form-control" id="weight" name="weight" placeholder="Weight" value="{{ $craneInventory->weight }}">
                            </div>
                            <div class="col-sm-4">
                                <label for="contact" class="form-label">Engine Type:</label>
                                <input type="text" class="form-control" id="engine_type" name="engine_type" placeholder="Engine Type" value="{{ $craneInventory->engine_type }}">
                            </div>
                            <div class="col-sm-4">
                                <label for="email" class="form-label">Safety Features:</label>
                                <input type="text" class="form-control" id="safety_feature" name="safety_feature" placeholder="Safety Features" value="{{ $craneInventory->safety_feature }}">
                            </div>
                        </div>
                    </div><br>
                    <div class="form-control">
                        <h4>Location</h4><br>
                        <div class="row p-2">
                            <div class="col-sm-6">
                                <label for="latitude" class="form-label">Latitude:</label>
                                <input type="number" step="any" class="form-control" id="lat" name="lat" placeholder="Latitude" value="{{ $craneInventory->lat }}">
                            </div>
                            <div class="col-sm-6">
                                <label for="longitude" class="form-label">Longitude:</label>
                                <input type="number" step="any" class="form-control" id="long" name="long" placeholder="Longitude" value="{{ $craneInventory->long }}">
                            </div>
                        </div>
                    </div>
                    <br>
                    <!-- CRANE SYSTEM -->
                    <div class="form-control">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h4 class="mb-0">Components</h4>
                                <small class="text-muted">Select the main components systems that apply to this crane.</small>
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-secondary select-all-btn" data-table="equipment">
                                    <i class="fas fa-check-square"></i> Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary deselect-all-btn" data-table="equipment">
                                    <i class="far fa-square"></i> Deselect All
                                </button>
                            </div>
                        </div>               
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle" id="equipment">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Component System Name</th>
                                        <th>Description</th>
                                        <th>Applicable </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($equipments as $index => $equipment)
                                        @php
                                            $findAssignEquipment = findCraneInventoryEquipment($craneInventory->id, $equipment->id);
                                        @endphp
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $equipment->name }}</td>
                                            <td>{{ $equipment->description }}</td>
                                            <td>
                                                <input class="form-check-input equipment-checkbox" type="checkbox"
                                                    name="equipment_id[]" value="{{ $equipment->id }}"
                                                    data-equipment-id="{{ $equipment->id }}"
                                                    @if($findAssignEquipment) checked @endif>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div><br>

                    <!-- primary Table -->
                    <div class="form-control child-table" id="componentSection">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h4 class="mb-0">Primary System</h4>
                                <small class="text-muted">Select the primary systems that apply to this crane.</small>
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-secondary select-all-btn" data-table="componentTable">
                                    <i class="fas fa-check-square"></i> Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary deselect-all-btn" data-table="componentTable">
                                    <i class="far fa-square"></i> Deselect All
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive mt-3">
                            <table class="table table-bordered" id="componentTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Primary System Name</th>
                                        <th>Description</th>
                                        <th>Applicable </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($components as $index => $component)
                                        @php
                                            $findAssignComponent = findCraneInventoryEquipmentComponent($craneInventory->id, $component->id);
                                        @endphp
                                        <tr data-parent-equipment-id="{{ $component->equipment_id }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $component->name }}</td>
                                            <td>{{ $component->description }}</td>
                                            <td>
                                                <input class="form-check-input component-checkbox"
                                                    type="checkbox"
                                                    name="equipment_component_id[]"
                                                    value="{{ $component->id }}"
                                                    data-equipment-id="{{ $component->equipment_id }}"
                                                    @if($findAssignComponent) checked @endif>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div><br>

                    <!-- SUB-COMPONENTS Table -->
                    <div class="form-control child-table" id="subComponentSection">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h4 class="mb-0">Sub-Primary System</h4>
                                <small class="text-muted">Select the sub-primary systems that apply to this crane.</small>
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-secondary select-all-btn" data-table="subComponentTable">
                                    <i class="fas fa-check-square"></i> Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary deselect-all-btn" data-table="subComponentTable">
                                    <i class="far fa-square"></i> Deselect All
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive mt-3">
                            <table class="table table-bordered" id="subComponentTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Sub-Primary System Name</th>
                                        <th>Description</th>
                                        <th>Applicable </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($subComponents as $index => $subComponent)
                                        @php
                                            $findAssignSubComponent = findCraneInventoryComponentPart($craneInventory->id, $subComponent->id);
                                        @endphp
                                        <tr data-parent-component-id="{{ $subComponent->equipment_component_id }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $subComponent->name }}</td>
                                            <td>{{ $subComponent->description }}</td>
                                            <td>
                                                <input class="form-check-input sub-component-checkbox"
                                                    type="checkbox"
                                                    name="component_part_id[]"
                                                    value="{{ $subComponent->id }}"
                                                    data-component-id="{{ $subComponent->id }}"
                                                    @if($findAssignSubComponent) checked @endif>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div><br>

                    <!-- PARTS Table -->
                    <div class="form-control child-table" id="partSection">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h4 class="mb-0">Secondary System</h4>
                                <small class="text-muted">Select the secondary systems that apply to this crane.</small>
                            </div>
                            <div>
                                <button type="button" class="btn btn-sm btn-outline-secondary select-all-btn" data-table="partTable">
                                    <i class="fas fa-check-square"></i> Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary deselect-all-btn" data-table="partTable">
                                    <i class="far fa-square"></i> Deselect All
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive mt-3">
                            <table class="table table-bordered" id="partTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>No</th>
                                        <th>Secondary System Name</th>
                                        <th>Description</th>
                                        <th>Applicable </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($parts as $index => $part)
                                        @php
                                            $findAssignPart = findCraneInventoryPartDetail($craneInventory->id, $part->id);
                                        @endphp
                                        <tr data-parent-sub-component-id="{{ $part->component_part_id }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ $part->name }}</td>
                                            <td>{{ $part->description }}</td>
                                            <td>
                                                <input class="form-check-input part-checkbox"
                                                    type="checkbox"
                                                    name="part_detail_id[]"
                                                    value="{{ $part->id }}"
                                                    data-sub-component-id="{{ $part->component_part_id }}"
                                                    @if($findAssignPart) checked @endif>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div><br>
                    <a href="{{ route('crane.inventories.index') }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="View">
                        <i data-feather="arrow-left"></i>
                        Back
                    </a>
                    <button type="submit" class="btn btn-primary" id="saveChangesBtn">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // Initialize DataTables
        const equipmentTable      = $('#equipment').DataTable({ "aLengthMenu": [[10,30,50,-1],[10,30,50,"All"]], "iDisplayLength": 10 });
        const componentTable      = $('#componentTable').DataTable({ "aLengthMenu": [[10,30,50,-1],[10,30,50,"All"]], "iDisplayLength": 10 });
        const subComponentTable   = $('#subComponentTable').DataTable({ "aLengthMenu": [[10,30,50,-1],[10,30,50,"All"]], "iDisplayLength": 10 });
        const partTable           = $('#partTable').DataTable({ "aLengthMenu": [[10,30,50,-1],[10,30,50,"All"]], "iDisplayLength": 10 });

        // Keep track of selections across pagination
        const selectedEquipmentIds    = new Set();
        const selectedComponentIds    = new Set();
        const selectedSubComponentIds = new Set();
        const selectedPartIds         = new Set();

        // Pre-load any checked boxes into the sets
        $('.equipment-checkbox:checked').each(function(){ selectedEquipmentIds.add(this.value); });
        $('.component-checkbox:checked').each(function(){ selectedComponentIds.add(this.value); });
        $('.sub-component-checkbox:checked').each(function(){ selectedSubComponentIds.add(this.value); });
        $('.part-checkbox:checked').each(function(){ selectedPartIds.add(this.value); });

        // Utility to track checkbox changes
        function trackChange($checkbox, setRef) {
            const id = $checkbox.val();
            if ($checkbox.is(':checked')) setRef.add(id);
            else setRef.delete(id);
        }

        // Wire up individual checkbox change
        $(document).on('change', '.equipment-checkbox', function(){
            trackChange($(this), selectedEquipmentIds);
            toggleAllTables();
            updateButtonStates('equipment');
        });
        $(document).on('change', '.component-checkbox', function(){
            trackChange($(this), selectedComponentIds);
            toggleAllTables();
            updateButtonStates('componentTable');
        });
        $(document).on('change', '.sub-component-checkbox', function(){
            trackChange($(this), selectedSubComponentIds);
            toggleAllTables();
            updateButtonStates('subComponentTable');
        });
        $(document).on('change', '.part-checkbox', function(){
            trackChange($(this), selectedPartIds);
            toggleAllTables();
            updateButtonStates('partTable');
        });

        // Select All / Deselect All across all pages
        $('.select-all-btn').click(function(){
            const tableId = $(this).data('table');
            const dt = { equipment: equipmentTable, componentTable, subComponentTable, partTable }[tableId];
            const classMap = {
                equipment: 'equipment-checkbox',
                componentTable: 'component-checkbox',
                subComponentTable: 'sub-component-checkbox',
                partTable: 'part-checkbox'
            };
            const setMap = {
                equipment: selectedEquipmentIds,
                componentTable: selectedComponentIds,
                subComponentTable: selectedSubComponentIds,
                partTable: selectedPartIds
            };

            const checkboxClass = classMap[tableId];
            const selectedSet   = setMap[tableId];

            dt.rows().every(function(){
                const rowNode = $(this.node());
                const checkbox = rowNode.find(`.${checkboxClass}`);
                const id = checkbox.val();
                if (id) {
                    checkbox.prop('checked', true);
                    selectedSet.add(id);
                }
            });

            updateButtonStates(tableId);
            toggleAllTables(); // <-- Added
        });

        $('.deselect-all-btn').click(function(){
            const tableId = $(this).data('table');
            const dt = { equipment: equipmentTable, componentTable, subComponentTable, partTable }[tableId];
            const classMap = {
                equipment: 'equipment-checkbox',
                componentTable: 'component-checkbox',
                subComponentTable: 'sub-component-checkbox',
                partTable: 'part-checkbox'
            };
            const setMap = {
                equipment: selectedEquipmentIds,
                componentTable: selectedComponentIds,
                subComponentTable: selectedSubComponentIds,
                partTable: selectedPartIds
            };

            const checkboxClass = classMap[tableId];
            const selectedSet   = setMap[tableId];

            dt.rows().every(function(){
                const rowNode = $(this.node());
                const checkbox = rowNode.find(`.${checkboxClass}`);
                const id = checkbox.val();
                if (id) {
                    checkbox.prop('checked', false);
                    selectedSet.delete(id);
                }
            });

            updateButtonStates(tableId);
            toggleAllTables(); // <-- Added
        });

        // Show/hide child tables based on selections
        function toggleAllTables(){
            // Primary
            $('#componentTable tbody tr').hide();
            $('.equipment-checkbox:checked').each(function(){
                $('#componentTable tbody tr[data-parent-equipment-id="'+ this.dataset.equipmentId +'"]').show();
            });

            // Sub-primary
            $('#subComponentTable tbody tr').hide();
            $('.component-checkbox:checked').each(function(){
                $('#subComponentTable tbody tr[data-parent-component-id="'+ this.dataset.equipmentId +'"]').show();
            });

            // Secondary
            $('#partTable tbody tr').hide();
            $('.sub-component-checkbox:checked').each(function(){
                $('#partTable tbody tr[data-parent-sub-component-id="'+ this.dataset.componentId +'"]').show();
            });

            $('#componentSection').toggle(selectedEquipmentIds.size > 0);
            $('#subComponentSection').toggle(selectedComponentIds.size > 0);
            $('#partSection').toggle(selectedSubComponentIds.size > 0);
        }

        // Update the select/deselect all button states
        function updateButtonStates(tableId){
            const dt = { equipment: equipmentTable, componentTable, subComponentTable, partTable }[tableId];
            const $inputs = dt.rows().nodes().to$().find('.form-check-input');
            const total   = $inputs.length;
            const checked = $inputs.filter(':checked').length;
            const $section = $('#'+tableId).closest('.form-control');
            $section.find('.select-all-btn')
                .toggleClass('btn-secondary', checked===total)
                .toggleClass('btn-outline-secondary', checked!==total)
                .prop('disabled', checked===total);
            $section.find('.deselect-all-btn')
                .toggleClass('btn-secondary', checked===0)
                .toggleClass('btn-outline-secondary', checked!==0)
                .prop('disabled', checked===0);
        }

        // Initial UI setup
        toggleAllTables();
        ['equipment','componentTable','subComponentTable','partTable'].forEach(updateButtonStates);

        // On form submit, inject hidden inputs for all selected IDs
        $('form').on('submit', function(){
            const $form = $(this);
            function appendInputs(setRef, name){
                setRef.forEach(id => {
                    $form.append(`<input type="hidden" name="${name}[]" value="${id}">`);
                });
            }
            appendInputs(selectedEquipmentIds,    'equipment_id');
            appendInputs(selectedComponentIds,    'equipment_component_id');
            appendInputs(selectedSubComponentIds, 'component_part_id');
            appendInputs(selectedPartIds,         'part_detail_id');
        });
    });
</script>

    

@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script type="text/javascript" src="{{ asset('js/createCraneManagementJs.js') }}"></script>
@endpush