@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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endpush

<style>
    /* Ensure modal content is scrollable and fits within the screen */
    .modal-dialog.custom-size {
        max-width: 90%; /* Adjust max-width as per your requirements */
        margin: 0 auto; /* Ensures modal is centered horizontally */
    }

    .modal-body {
        overflow-x: auto; /* Horizontal scrolling for wide tables */
    }

    /* Responsive adjustments for table columns */
    @media screen and (max-width: 768px) {
        .modal-body {
            padding: 10px; /* Adjust padding for smaller screens */
        }
        .modal-dialog {
            margin: 15px auto;
            width: 100%;
        }

        table {
            font-size: 0.9rem; /* Reduce font size */
        }

        th, td {
            padding: 8px; /* Adjust padding for better spacing */
        }
    }

    /* Header Background */
    .header-bg {
        background-color: #e41438;
    }

    /* Form Labels */
    .form-label {
        font-weight: bold;
    }

    /* Card Styles */
    .card {
        background-color: #ffffff; /* Ensure card is white */
        border: 1px solid #e0e0e0;
        border-radius: 0.375rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
    }

    .card-body {
        padding: 2rem;
        background-color: #ffffff; /* Ensure card body is white */
    }

    .card-header {
        background-color: #e41438;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    /* Input Fields */
    .form-control {
        border-radius: 0.375rem;
        box-shadow: none;
        border: 1px solid #e0e0e0;
        margin-bottom: 1.5rem; /* Space between fields */
        background-color: #ffffff; /* Default background for editable inputs */
    }

    .form-control:focus {
        border-color: #e41438;
        box-shadow: 0 0 0 0.2rem rgba(189, 20, 28, 0.25);
    }

    /* Readonly Input Fields */
    .form-control[readonly] {
        background-color: #f0f0f0 !important; /* Grey background */
        color: #6c757d; /* Text color for readonly inputs */
        cursor: not-allowed; /* Indicate non-editable state */
    }

    /* Rounded Circle Styles */
    .rounded-circle {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    /* Progress Bar */
    .progress-bar {
        background-color: #e41438;
    }

    /* Form Row */
    .form-row {
        margin-bottom: 1.5rem;
    }

    /* Buttons */
    .btn-red {
        background-color: #d61b1c !important; /* Button background color */
        border-color: #d61b1c !important;     /* Button border color */
        color: white !important;             /* Button text color */
    }

    .btn-red:hover {
        background-color: #960909 !important; /* Darker hover effect */
        border-color: #960909 !important;
    }

    .modal-body {
    overflow-y: auto; /* Ensure content scrolls within the modal */
    }

    #imageGallery img {
        margin: 10px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    #imageGallery img:hover {
        transform: scale(1.1);
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
    }
</style>

<style>
/* Ensure horizontal scrolling for tabs */
.nav-tabs.flex-nowrap {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 2px solid #ddd; /* Optional: border for the tab container */
}

/* Style for individual tab links */
.nav-tabs .nav-item {
    margin-right: 5px; /* Reduced space between tabs */
}

/* Style for the tab links */
.nav-tabs .nav-link {
    padding: 8px 15px; /* Adjust padding to reduce the size */
    background-color: #f8f9fa;
    border-radius: 5px 5px 0 0;
    color: #495057;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Active tab style */
.nav-tabs .nav-link.active {
    color: red !important; /* Change active tab text to red */
}

/* Hover effect for tabs */
.nav-tabs .nav-link:hover {
    background-color: #e2e6ea;
}

/* Customize scrollbar for horizontal scrolling */
.nav-tabs.flex-nowrap::-webkit-scrollbar {
    height: 6px; /* Thinner scrollbar */
}

.nav-tabs.flex-nowrap::-webkit-scrollbar-thumb {
    background-color: #888; /* Color for scrollbar thumb */
    border-radius: 10px;
}

.nav-tabs.flex-nowrap::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color when hovered */
}

.nav-tabs.flex-nowrap::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Background color of the track */
}
</style>
<style>
    /* Base Table Styling */
    .modal-body table {
        width: 100%;
        table-layout: fixed; /* Keep fixed column layout on larger screens */
        border-collapse: collapse; /* Ensure no gaps between cells */
        border-spacing: 0;
    }

    /* Table Cells Styling */
    .modal-body th, .modal-body td {
        word-wrap: break-word !important; /* Break long text */
        word-break: break-word !important; /* Handle long words properly */
        white-space: normal !important; /* Allow wrapping of text */
        overflow-wrap: anywhere !important; /* Adds robust wrapping support */
        padding: 10px; /* Standard padding for readability */
        border: 1px solid #ddd; /* Add borders to table cells */
    }

    /* Specific Column Widths for Desktop */
    .modal-body th:nth-child(1), .modal-body td:nth-child(1) {
        width: 15%;
    }

    .modal-body th:nth-child(2), .modal-body td:nth-child(2) {
        width: 30%; /* Description column gets more space */
    }

    .modal-body th:nth-child(3), .modal-body td:nth-child(3),
    .modal-body th:nth-child(4), .modal-body td:nth-child(4),
    .modal-body th:nth-child(5), .modal-body td:nth-child(5) {
        width: 15%; /* Adjust other columns */
    }

    .modal-body th:nth-child(6), .modal-body td:nth-child(6),
    .modal-body th:nth-child(7), .modal-body td:nth-child(7) {
        width: 10%; /* Smaller columns for Remarks and Action */
    }

    /* Mobile View Adjustments */
    @media (max-width: 768px) {
        .modal-body table {
            table-layout: auto; /* Allow columns to adjust dynamically */
            width: 100%;
            overflow-x: auto; /* Enable horizontal scroll */
            display: block; /* Makes the table behave as a block-level element */
        }

        /* Reduce padding and adjust for mobile */
        .modal-body th, .modal-body td {
            padding: 6px; /* Less padding for better fit */
            font-size: 12px; /* Adjust font size for smaller screens */
        }

        /* Prevent the columns from getting too small */
        .modal-body th, .modal-body td {
            min-width: 100px; /* Set a minimum width for the columns */
        }

        /* Add horizontal scroll bar for the table */
        .table-responsive {
            overflow-x: auto; /* This ensures that horizontal scroll appears */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
        }
    }
</style>
@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">List of Cranes</a>
                    </li>
                </ul>

                <div class="tab-content p-3">
                    <div class="tab-pane fade show active" id="crane-list">
                        <h6 class="card-title">List of Cranes</h6>
                        <table id="maintenanceTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th> 
                                    <th>Serial No</th>
                                    <th>Platform</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($cranesLists as $key => $crane)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $crane->company_name }}{{ $crane->serial_no }}</td>
                                    <td>{{ $crane->platform }}</td>
                                    <td>
                                        
                                    <a href="{{ route('maintenance.six-month-checklist', ['craneId' => $crane->id]) }}" 
                                        class="btn btn-primary btn-sm">
                                            6 Month
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>                  
        </div>
    </div>
</div>



@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endpush