@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@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="#">Tables</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crane Schedule Table</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Crane Schedule</h6>
        <div class="mb-3">
          <input type="text" class="form-control" id="companyNameFilter" placeholder="Search by Company Name">
        </div>
        <div class="table-responsive">
          <table id="dataTableExample" class="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Crane ID</th>
                <th>Schedule Date</th>
                <th>Operator Name</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach($schedules as $schedule)
              <tr class="schedule-row" data-company-name="{{ $schedule->craneInventory->company_name ?? 'N/A' }}">
                <td>{{ $schedule->id }}</td>
                <td>{{ $schedule->craneInventory->company_name ?? 'N/A' }} {{ $schedule->craneInventory->serial_no ?? 'N/A' }}</td>
                <td>{{ $schedule->schedule_date }}</td>
                <td>{{ $schedule->operator_name }}</td>
                <td>
                    @php
                      $statusColors = [
                        'Pending' => 'warning',
                        'In Progress' => 'primary',
                        'Completed' => 'success',
                        'Cancelled' => 'danger',
                        'On Hold' => 'secondary',
                      ];
                      $status = $schedule->status ?? 'Not in Progress';
                      $badgeColor = $statusColors[$status] ?? 'dark';
                    @endphp
                    <span class="badge bg-{{ $badgeColor }}">{{ $status }}</span>
                  </td>
                <td>
                  <button class="btn btn-warning btn-sm editSchedule" data-id="{{ $schedule->id }}">
                    View Details
                  </button>
                   
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- View Schedule Modal -->
<div class="modal fade" id="editScheduleModal" tabindex="-1" aria-labelledby="editScheduleLabel" aria-hidden="true">
  <div class="modal-dialog custom-size">
    <div class="modal-content">
      <div class="modal-header header-bg d-flex justify-content-between align-items-center">
        <h5 class="modal-title text-white">Schedule Details</h5>
        
        <div>
          <a href="#" id="viewReportBtn" class="btn btn-warning btn-sm me-2" target="_blank">View Report</a>
          <button type="button" class="btn-close btn-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>

      <div class="modal-body">
        <!-- Section A: Crane Info -->
        <h6 class="mb-3">SECTION A: CRANE INFORMATION</h6>
        <p><strong>Crane ID:</strong> <span id="crane_id"></span></p>
        <p><strong>Location:</strong> <span id="location"></span></p>
        <p><strong>Crane Model:</strong> <span id="crane_model"></span></p>
        <p><strong>Platform:</strong> <span id="platform"></span></p>
        <p><strong>Manufacturer:</strong> <span id="manufacturer"></span></p>
        <p><strong>Model:</strong> <span id="model"></span></p>
        <p><strong>Tag No:</strong> <span id="tag_no"></span></p>
        <p><strong>SWL:</strong> <span id="swl"></span></p>
        <hr>

        <!-- Section B: Remarks & Status -->
        <h6>SECTION B: REMARKS & STATUS</h6>
        <form id="updateScheduleForm" method="POST" enctype="multipart/form-data">
          @csrf
          @method('PUT')
          <input type="hidden" id="schedule_id" name="schedule_id">

          <div class="mb-3 mt-3">
            <label for="remark" class="form-label"><strong>Remark:</strong></label>
            <textarea class="form-control" id="remark" name="remark"></textarea>
          </div>

          <div class="mb-3">
            <label for="status" class="form-label"><strong>Status:</strong></label>
            <select class="form-select" id="status" name="status">
                <option value="Pending">Pending</option>
                <option value="In Progress">In Progress</option>
                <option value="Completed">Completed</option>
                <option value="Cancelled">Cancelled</option>
                <option value="On Hold">On Hold</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="date_settle" class="form-label"><strong>Date Settle:</strong></label>
            <input type="date" class="form-control" id="date_settle" name="date_settle">
          </div>

          <div class="mb-3">
            <label for="remark_image" class="form-label"><strong>Remark Image:</strong></label>
            <input type="file" class="form-control" id="remark_image_input" name="remark_image" accept="image/*">
            @if (!empty($existingImageName))
                <div class="mt-2">
                    <span>Current Image: <strong>{{ $existingImageName }}</strong></span>
                </div>
            @elseif (!empty($existingImagePath))
                <div class="mt-2">
                    <span>Image available: <strong><a href="{{ asset($existingImagePath) }}" target="_blank">View Image</a></strong></span>
                </div>
            @else
                <div class="mt-2">
                    <span>No image available</span>
                </div>
            @endif
            <img id="remark_image_preview" src="" width="100" alt="Remark Image" style="display:none; margin-top:10px;">
          </div>

          <button type="submit" class="btn btn-primary">Update</button>
        </form>
        <hr>

        <!-- Section C: Component Details -->
        <h6 class="mb-3">SECTION C: COMPONENTS</h6>
        <ul class="nav nav-tabs" id="componentTabs"></ul>
        <div class="tab-content" id="componentTabContent"></div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-red" data-bs-dismiss="modal">Close</button>
        <button type="submit" form="updateScheduleForm" class="btn btn-red">Save changes</button>
      </div>
    </div>
  </div>
</div>


@push('custom-scripts')
<script>
$(document).ready(function () {
    $('.editSchedule').click(function () {
        let scheduleId = $(this).data('id');
        let schedules = @json($schedules);
        let schedule = schedules.find(s => s.id == scheduleId);

        if (schedule) {
            $('#schedule_id').val(schedule.id);
            $('#remark').val(schedule.remark || '');
            $('#status').val(schedule.status || 'Pending');
            $('#date_settle').val(schedule.date_settle || '');
            $('#crane_id').text(schedule.crane_id || 'N/A');
            $('#location').text(schedule.craneDetails?.location || 'N/A');
            $('#crane_model').text(schedule.craneDetails?.crane_model || 'N/A');
            $('#platform').text(schedule.craneDetails?.platform || 'N/A');
            $('#manufacturer').text(schedule.craneDetails?.manufacturer || 'N/A');
            $('#model').text(schedule.craneDetails?.model || 'N/A');
            $('#tag_no').text(schedule.craneDetails?.tag_no || 'N/A');
            $('#swl').text(schedule.craneDetails?.swl || 'N/A');

            $('#updateScheduleForm').attr('action', '/schedule/update/' + schedule.id);
            $('#editScheduleModal').modal('show');

            // Populate component tabs
            let tabNav = '', tabContent = '';

const dummyDescriptions = [
    "Change fuel filter and engine oil",
    "Check engine for oil leaks and abnormal engine tappet noise",
    "Check for excessive exhaust smoke and fume from crank case breather and inspect exhaust system and insulation",
    "Inspect main and pendant wire ropes for wear broken or defect or damage"
];

if (schedule.components && schedule.components.length > 0) {
    schedule.components.forEach((component, index) => {
        let activeClass = index === 0 ? 'active' : '';
        tabNav += `<li class="nav-item">
                        <button class="nav-link ${activeClass}" data-bs-toggle="tab" data-bs-target="#content-${component.id}">
                            ${component.name}
                        </button>
                    </li>`;

        // Use only dummy descriptions
        let descriptionContent = dummyDescriptions.map(description => `
            <tr>    
                <td>${component.name}</td>
                <td>${description}</td>
                <td>
                    <select class="form-select precondition">
                        <option value="" disabled selected>Select Precondition</option>
                        <option value="Good">Good</option>
                        <option value="Bad">Bad</option>
                    </select>
                </td>
                <td>
                    <select class="form-select postcondition">
                        <option value="" disabled selected>Select Post Condition</option>
                        <option value="Good">Good</option>
                        <option value="Bad">Bad</option>
                    </select>
                </td>
                <td>
                    <select class="form-select status">
                        <option value="" disabled selected>Select Status</option>
                        <option value="P1">On Going</option>
                        <option value="P2">Delayed</option>
                        <option value="P3">Complete</option>
                        <option value="Out of Service">Out of Service</option>
                    </select>
                </td>
            </tr>
        `).join('');

        tabContent += `<div class="tab-pane fade ${activeClass} ${activeClass ? 'show' : ''}" id="content-${component.id}">
            <h6 class="mt-3 mb-3">Component Details</h6>
            <p><strong>System:</strong> ${component.equipment?.name ?? 'N/A'}</p>
            <br>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Component Name</th>
                        <th>Description</th>
                        <th>Pre Condition</th>
                        <th>Post Condition</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    ${descriptionContent}
                </tbody>
            </table>
            <button class="btn btn-primary save-data" data-component-id="${component.id}" data-crane-id="${schedule.crane_id}">Save Data</button>
        </div>`;
    });
} else {
    tabNav = '<li class="nav-item"><span class="nav-link disabled">No Components Available</span></li>';
    tabContent = '<div class="tab-pane active"><p>No component data available.</p></div>';
}

$('#componentTabs').html(tabNav);
$('#componentTabContent').html(tabContent);

        }
    });

    // Save data for precondition, postcondition, and status
    $(document).on('click', '.save-data', function () {
    const craneId = $(this).data('crane-id');
    const componentId = $(this).data('component-id');
    const data = [];

    $(`#content-${componentId} select`).each(function () {
        const description = $(this).data('description');
        const preCondition = $(this).hasClass('precondition') ? $(this).val() : null;
        const postCondition = $(this).hasClass('postcondition') ? $(this).val() : null;
        const status = $(this).hasClass('status') ? $(this).val() : null;

        if (description) {
            data.push({
                component_id: componentId,  // Ensure component ID is included in each data entry
                description: description,
                pre_condition: preCondition,
                post_condition: postCondition,
                status: status
            });
        }
    });

    console.log('Sending data:', JSON.stringify(data)); // Debugging log

    $.ajax({
        url: `/save-crane-component-statuses/${craneId}/${componentId}`,
        method: 'POST',
        contentType: 'application/json',
        processData: false,
        data: JSON.stringify({
            data: data,
            _token: $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token is passed
        }),
        success: function (response) {
            alert(response.message || 'Data saved successfully!');
        },
        error: function (xhr) {
            console.error('Error:', xhr.responseText);
            alert('Failed to save data.');
        }
    });
});


    // Filter schedules by company name
    $('#companyNameFilter').on('keyup', function () {
        var value = $(this).val().toLowerCase();
        $('.schedule-row').filter(function () {
            $(this).toggle($(this).data('company-name').toLowerCase().indexOf(value) > -1);
        });
    });
});


</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const viewReportBtn = document.getElementById("viewReportBtn");

    $('#editScheduleModal').on('show.bs.modal', function (event) {
      let scheduleId = document.getElementById("schedule_id").value;
      viewReportBtn.href = `{{ route('schedule.report', ['id' => '__ID__']) }}`.replace('__ID__', scheduleId);
    });
  });
</script>
@endpush

@endsection