@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

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Inventory</a></li>
    <li class="breadcrumb-item active" aria-current="page">Add Cranes</li>
  </ol>
</nav>
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('crane.inventories.store') }}" method="post">
                    @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">
                            <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 }}">{{ $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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </div>
                           <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">Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                            </div>
                            <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">Rental</option>
                                    <option value="Permanent">Permanent</option>
                                </select>
                            </div>
                            <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">Valid</option>
                                    <option value="Invalid">Invalid</option>
                                </select>
                            </div>
                            <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">Unmanned</option>
                                    <option value="Manned">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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </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">
                            </div>
                        </div>
                    </div>
                    <br>
                      <!-- crane system -->
                    <div class="form-control">
                        <h4>Components</h4><br>
                        <div class="table-responsive">
                            <table id="equipment" class="table table-striped table-bordered align-middle">
                                <thead>
                                    <tr>
                                        <th class="text-nowrap">No</th>
                                        <th>Component System Name</th>
                                        <th>Description</th>
                                        <th class="text-nowrap">Applicable</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($equipments as $index => $equipment)
                                    <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 }}">
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>                            
                        </div>
                    </div><br>
                     <!-- Primary -->
                     <div class="form-control">
                        <div id="componentSection">
                            <h4>Primary System</h4>
                            <div class="table-responsive">
                                <table id="componentTable" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Primary System Name</th>
                                            <th>Description</th>
                                            <th>Applicable</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($components as $index => $component)
                                        <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 }}">
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><br>
                    <div class="form-control">
                        <div id="subComponentSection">
                            <h4>Sub-Primary System</h4>
                            <div class="table-responsive">
                                <table id="subComponentTable" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Sub-Primary System Name</th>
                                            <th>Description</th>
                                            <th>Applicable</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($subComponents as $index => $subComponent)
                                        <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 }}">
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><br>
                    <div class="form-control">
                        <div id="partSection">
                            <h4>Secondary System</h4>
                            <div class="table-responsive">
                                <table id="partTable" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Secondary System Name</th>
                                            <th>Description</th>
                                            <th>Applicable</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($parts as $index => $part)
                                        <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 }}">
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><br>
                    <button type="submit" class="btn btn-primary">Save</button>
                    <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>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        toggleAllTables();

        $('.equipment-checkbox, .component-checkbox, .sub-component-checkbox').change(function () {
            toggleAllTables();
        });

        function toggleAllTables() {
            $('#componentTable tbody tr').hide();
            $('.equipment-checkbox:checked').each(function () {
                let equipmentId = $(this).data('equipment-id');
                $('#componentTable tbody tr[data-parent-equipment-id="' + equipmentId + '"]').show();
            });

            $('#subComponentTable tbody tr').hide();
            $('.component-checkbox:checked').each(function () {
                let componentId = $(this).data('equipment-id');
                $('#subComponentTable tbody tr[data-parent-component-id="' + componentId + '"]').show();
            });

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

            $('#componentSection').toggle($('.equipment-checkbox:checked').length > 0);
            $('#subComponentSection').toggle($('.component-checkbox:checked').length > 0);
            $('#partSection').toggle($('.sub-component-checkbox:checked').length > 0);
        }
    });
</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