@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" style="font-size: 0.85rem;">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Equipment</a></li>
    <li class="breadcrumb-item active" aria-current="page">List all Cranes System</li>
  </ol>
</nav>

<script>
  setTimeout(() => {
      const alert = document.getElementById('flash-alert');
      if (alert) {
          alert.style.transition = 'opacity 0.5s ease';
          alert.style.opacity = '0';
          setTimeout(() => { alert.remove(); }, 500);
      }
  }, 5000);
</script>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body" style="font-size: 0.9rem;">
        <ul class="nav nav-tabs nav-tabs-sm" id="craneTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="equipment-tab" data-bs-toggle="tab" href="#equipment" role="tab">Components</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="components-tab" data-bs-toggle="tab" href="#components" role="tab">Primary</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="sub-components-tab" data-bs-toggle="tab" href="#sub-components" role="tab">Sub-Primary</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="parts-tab" data-bs-toggle="tab" href="#parts" role="tab">Secondary</a>
          </li>
        </ul>
        
        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show py-2" id="flash-alert" role="alert" style="font-size: 0.85rem;">
            {{ session('error') }}
        </div>
        @endif
        
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2" id="flash-alert" role="alert" style="font-size: 0.85rem;">
            {{ session('success') }}
        </div>
        @endif
        
        <div class="tab-content mt-2" id="craneTabsContent">
          <!-- Components Tab -->
          <div class="tab-pane fade show active" id="equipment" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="card-title mb-0" style="font-size: 0.95rem;">List Component</h6>
              <a href="{{ route('crane.equipment.create') }}" class="btn btn-primary btn-sm">
                <i data-feather="plus" style="width: 14px; height: 14px;"></i> Add Component
              </a>
            </div>
            <div class="table-responsive">
              <table id="equipmentTable" class="table table-sm">
                <thead>
                  <tr>
                    <th style="font-size: 0.85rem;">No</th>
                    <th style="font-size: 0.85rem;">Component Name</th>
                    <th style="font-size: 0.85rem;">Description</th>
                    <th style="font-size: 0.85rem;">Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($equipments as $index => $equipment)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $equipment->name }}</td>
                    <td>{{ $equipment->description ?? 'No description' }}</td>
                    <td class="py-1">
                      <div class="d-flex gap-1">
                        <a href="{{ route('crane.equipment.show', $equipment->id) }}" class="btn btn-primary btn-xs py-1" title="View">
                          <i data-feather="clipboard" style="width: 12px; height: 12px;"></i>
                        </a>                    
                        <a href="{{ route('crane.equipment.edit', $equipment->id) }}" class="btn btn-primary btn-xs py-1" title="Edit">
                          <i data-feather="edit" style="width: 12px; height: 12px;"></i>
                        </a>
                        <form action="{{ route('crane.equipment.destroy', $equipment->id) }}" method="POST" style="display:inline;">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-xs py-1">
                              <i data-feather="trash" style="width: 12px; height: 12px;"></i>
                          </button>
                        </form>
                      </div>                 
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
          
          <!-- Primary Tab -->
          <div class="tab-pane fade" id="components" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="card-title mb-0" style="font-size: 0.95rem;">List Primary</h6>
              <a href="{{ route('crane.equipment-component.create') }}" class="btn btn-primary btn-sm">
                <i data-feather="plus" style="width: 14px; height: 14px;"></i> Add Primary
              </a>
            </div>
            <div class="table-responsive">
              <table id="componentsTable" class="table table-sm">
                <thead>
                  <tr>
                    <th style="font-size: 0.85rem;">No</th>
                    <th style="font-size: 0.85rem;">Primary Name</th>
                    <th style="font-size: 0.85rem;">Description</th>
                    <th style="font-size: 0.85rem;">Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($components as $index => $component)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $component->name }}</td>
                    <td>{{ $component->description ?? 'No description' }}</td>
                    <td class="py-1">
                      <div class="d-flex gap-1">
                        <a href="{{ route('crane.equipment-component.show', $component->id) }}" class="btn btn-primary btn-xs py-1" title="View">
                          <i data-feather="clipboard" style="width: 12px; height: 12px;"></i>
                        </a>
                        <a href="{{ route('crane.equipment-components.edit', $component->id) }}" class="btn btn-primary btn-xs py-1" title="Edit">
                          <i data-feather="edit" style="width: 12px; height: 12px;"></i>
                        </a>
                        <form action="{{ route('crane.equipment-components.destroy', $component->id) }}" method="POST" style="display:inline;">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-xs py-1">
                            <i data-feather="trash" style="width: 12px; height: 12px;"></i>
                          </button>
                        </form>
                      </div>                     
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>

          <!-- Sub-Primary Tab -->
          <div class="tab-pane fade" id="sub-components" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="card-title mb-0" style="font-size: 0.95rem;">List Sub-Primary</h6>
              <a href="{{ route('crane.component-part.create') }}" class="btn btn-primary btn-sm">
                <i data-feather="plus" style="width: 14px; height: 14px;"></i> Add Sub-Primary
              </a>
            </div>
            <div class="table-responsive">
              <table id="subComponentsTable" class="table table-sm">
                <thead>
                  <tr>
                    <th style="font-size: 0.85rem;">No</th>
                    <th style="font-size: 0.85rem;">Sub-Primary Name</th>
                    <th style="font-size: 0.85rem;">Description</th>
                    <th style="font-size: 0.85rem;">Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($subComponents as $index => $subComponent)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $subComponent->name }}</td>
                    <td>{{ $subComponent->description ?? 'No description' }}</td>
                    <td class="py-1">
                      <div class="d-flex gap-1">
                        <a href="{{ route('crane.component-part.view', $subComponent->id) }}" class="btn btn-primary btn-xs py-1" title="View">
                          <i data-feather="clipboard" style="width: 12px; height: 12px;"></i>
                        </a>
                        <a href="{{ route('crane.component-part.edit', $subComponent->id) }}" class="btn btn-primary btn-xs py-1" title="Edit">
                          <i data-feather="edit" style="width: 12px; height: 12px;"></i>
                        </a>
                        <form action="{{ route('crane.component-part.destroy', $subComponent->id) }}" method="POST" style="display:inline;">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-xs py-1 delete-confirm">
                            <i data-feather="trash" style="width: 12px; height: 12px;"></i>
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>

          <!-- Secondary Tab -->
          <div class="tab-pane fade" id="parts" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h6 class="card-title mb-0" style="font-size: 0.95rem;">List Secondary</h6>
              <a href="{{ route('crane.part-detail.create') }}" class="btn btn-primary btn-sm">
                <i data-feather="plus" style="width: 14px; height: 14px;"></i> Add Secondary
              </a>
            </div>
            <div class="table-responsive">
              <table id="partsTable" class="table table-sm">
                <thead>
                  <tr>
                    <th style="font-size: 0.85rem;">No</th>
                    <th style="font-size: 0.85rem;">Secondary Name</th>
                    <th style="font-size: 0.85rem;">Description</th>
                    <th style="font-size: 0.85rem;">Action</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($parts as $index => $part)
                  <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $part->name }}</td>
                    <td>{{ $part->description ?? 'No description' }}</td>
                    <td class="py-1">
                      <div class="d-flex gap-1">
                        <a href="{{ route('crane.part-detail.view', $part->id) }}" class="btn btn-primary btn-xs py-1" title="View">
                          <i data-feather="clipboard" style="width: 12px; height: 12px;"></i>
                        </a>
                        <a href="{{ route('crane.part-detail.edit', $part->id) }}" class="btn btn-primary btn-xs py-1" title="Edit">
                          <i data-feather="edit" style="width: 12px; height: 12px;"></i>
                        </a>
                        <form action="{{ route('crane.part-detail.destroy', $part->id) }}" method="POST" style="display:inline;">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-danger btn-xs py-1 delete-confirm">
                            <i data-feather="trash" style="width: 12px; height: 12px;"></i>
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </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>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable for Equipment by default
    $('#equipmentTable').DataTable({
        "pageLength": 10,
        "language": {
            "lengthMenu": "Show _MENU_ entries per page",
            "search": "_INPUT_",
            "searchPlaceholder": "Search...",
        }
    });

    // Initialize DataTables when switching tabs
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
        var target = $(e.target).attr("href");
        
        if (target === "#components") {
            if (!$.fn.DataTable.isDataTable('#componentsTable')) {
                $('#componentsTable').DataTable({
                    "pageLength": 10,
                    "language": {
                        "lengthMenu": "Show _MENU_ entries per page",
                        "search": "_INPUT_",
                        "searchPlaceholder": "Search...",
                    }
                });
            }
        } else if (target === "#sub-components") {
            if (!$.fn.DataTable.isDataTable('#subComponentsTable')) {
                $('#subComponentsTable').DataTable({
                    "pageLength": 10,
                    "language": {
                        "lengthMenu": "Show _MENU_ entries per page",
                        "search": "_INPUT_",
                        "searchPlaceholder": "Search...",
                    }
                });
            }
        } else if (target === "#parts") {
            if (!$.fn.DataTable.isDataTable('#partsTable')) {
                $('#partsTable').DataTable({
                    "pageLength": 10,
                    "language": {
                        "lengthMenu": "Show _MENU_ entries per page",
                        "search": "_INPUT_",
                        "searchPlaceholder": "Search...",
                    }
                });
            }
        }
    });

    // Delete confirmation
    $('.delete-confirm').on('click', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            width: '400px'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endpush