@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

<style>
    div.detail_view{
        display: none;
    }
    .accordion-item {
        margin-bottom: 10px;
    }
    .accordion-toggle {
        cursor: pointer;
        padding: 8px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .accordion-content {
        margin-left: 20px;
        display: none;
    }
    .accordion-content ul {
        list-style-type: disc;
        margin-left: 20px;
    }
</style>
@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/cranesInventory">Crane Inventory</a></li>
    <li class="breadcrumb-item active" aria-current="page">View Cranes</li>
  </ol>
</nav>
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card" id="cranesInventoryDetail">
            <div class="card-body">
                <form id="signupForm">
                    <div class="mt-1 text-end">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#maintenanceListModal">
                            <i class="fas fa-check-circle"></i> Maintenance Detail
                        </button>
                    </div><br>
                    <div class="form-control">
                        <h4>Model</h4><br>
                        <div class="row p-2">
                            <input type="hidden" id="getCraneInventoryId" name="id" value="{{$craneInventory->id}}" readonly>
                            <div class="col-sm-6">
                                <label for="name" class="form-label">Field:</label>
                                <select class="form-select" name="field_id" id="field_id" disabled>
                                    <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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </div>
                            <!-- Status fields added here -->
                            <div class="col-sm-6">
                                <label for="status_crane" class="form-label">Status Crane:</label>
                                <input type="text" class="form-control" id="status_crane" name="status_crane" 
                                    value="{{ $craneInventory->status_crane ?? 'N/A' }}" disabled>
                            </div>
                            <div class="col-sm-6">
                                <label for="crane_type" class="form-label">Crane Type:</label>
                                <input type="text" class="form-control" id="crane_type" name="crane_type" 
                                    value="{{ $craneInventory->crane_type ?? 'N/A' }}" disabled>
                            </div>
                            <div class="col-sm-6">
                                <label for="eiac_validity" class="form-label">EIAC Validity:</label>
                                <input type="text" class="form-control" id="eiac_validity" name="eiac_validity" 
                                    value="{{ $craneInventory->eiac_validity ?? 'N/A' }}" disabled>
                            </div>
                            <div class="col-sm-6">
                                <label for="presence" class="form-label">Presence:</label>
                                <input type="text" class="form-control" id="presence" name="presence" 
                                    value="{{ $craneInventory->presence ?? 'N/A' }}" disabled>
                            </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 }}"disabled>
                            </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 }}"disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}"disabled>
                            </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 }}" disabled>
                            </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 }}" disabled>
                            </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 }}"disabled >
                            </div>
                        </div>
                    </div>
                    <br>
                    
                    <div class="form-control">
                        <h4>Crane System List</h4><br>
                        @foreach ($equipments as $equipment)
                        <div class="accordion-item">
                            <div class="accordion-toggle" onclick="toggleAccordion(this)">
                                🏗️ {{ $equipment->name }}
                                <span class="text-muted">— Component</span>
                            </div>
                            <div class="accordion-content">
                                @foreach ($components->where('equipment_id', $equipment->id) as $component)
                                    <div class="accordion-item">
                                        <div class="accordion-toggle" onclick="toggleAccordion(this)">
                                            └── 🛠️ {{ $component->name }}
                                            <span class="text-muted">— Primary System</span>
                                        </div>
                                        <div class="accordion-content">
                                            @foreach ($subComponents->where('equipment_component_id', $component->id) as $subComponent)
                                                <div class="accordion-item">
                                                    <div class="accordion-toggle" onclick="toggleAccordion(this)">
                                                        └── 🛠️ {{ $subComponent->name }}
                                                        <span class="text-muted">— Sub-Primary System</span>
                                                    </div>
                                                    <div class="accordion-content">
                                                        <ul>
                                                            @foreach ($parts->where('component_part_id', $subComponent->id) as $part)
                                                                <li>⚙️ {{ $part->name }} <span class="text-muted">— Secondary System</span></li>
                                                            @endforeach
                                                            @if ($parts->where('component_part_id', $subComponent->id)->isEmpty())
                                                                <li class="text-muted">No Secondary System</li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            @endforeach
                                            @if ($subComponents->where('equipment_component_id', $component->id)->isEmpty())
                                                <div class="text-muted" style="margin-left: 20px;">No Sub-Primary System</div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                                @if ($components->where('equipment_id', $equipment->id)->isEmpty())
                                    <div class="text-muted" style="margin-left: 20px;">No Primary System</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                    </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>
                </form>
            </div>
        </div>
    </div>
</div>
@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>
@endpush

@push('custom-scripts')
    <script type="text/javascript" src="{{ asset('js/createCraneManagementJs.js') }}"></script>
@endpush
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    function toggleAccordion(element) {
        const content = element.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    }
</script>