@extends('layout.master')

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

@section('content')

<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Maintenance Status</a></li>
    <li class="breadcrumb-item active" aria-current="page">Schedule Maintenance</li>
  </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">

                <ul class="nav nav-tabs" id="maintenanceTabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#crane-list">1 month</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#three-month">3 month</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#six-month">6 month</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#ypm">YPM</a>
                    </li>
                </ul>

                <div class="tab-content p-3">
                    <!-- 1 Month Tab -->
                    <div class="tab-pane fade show active" id="crane-list">
                        @include('pages.maintenance.admin-section.one-month')
                    </div>

                    <!-- 3 Month Tab -->
                    <div class="tab-pane fade" id="three-month">
                        @include('pages.maintenance.admin-section.three-month')
                    </div>

                    <!-- 6 Month Tab -->
                    <div class="tab-pane fade" id="six-month">
                        @include('pages.maintenance.admin-section.six-month')
                    </div>

                    <!-- YPM Tab -->
                    <div class="tab-pane fade" id="ypm">
                        @include('pages.maintenance.admin-section.ypm')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<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>
    $(document).ready(function () {
        $('#maintenanceTable').DataTable();
    });
</script>
@endpush