@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
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
    .wide-text-input {
        min-width: 250px;
        min-height: 80px;
        padding: 10px;
        resize: vertical;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s;
        font-family: 'Poppins', sans-serif;
    }
    
    .wide-text-input:focus {
        border-color: #3b7ddd;
        box-shadow: 0 0 0 2px rgba(59, 125, 221, 0.2);
        outline: none;
    }
    
    #sectionE td {
        vertical-align: top;
        padding: 8px;
    }
    
    #sectionE td:nth-child(3), 
    #sectionE td:nth-child(4) {
        width: 25%;
    }

    .system-description {
    width: 300px;
    height: 60px;
    font-size: 0.8rem;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 0.5rem;
    resize: none;
    margin-top: 0.25rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    pointer-events: none;
}
tr td {
    vertical-align: top;
    padding-bottom: 0.5rem;
}

#sectionCA td:nth-child(2) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

#sectionCA .form-select {
    width: 100%;
    box-sizing: border-box;
}

#sectionCB td:nth-child(2) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
#sectionCB .form-select {
    width: 100%;
    box-sizing: border-box;
}

#sectionCC td:nth-child(2) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
#sectionCC .form-select {
    width: 100%;
    box-sizing: border-box;
}
    
#sectionCD td:nth-child(2) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
#sectionCD .form-select {
    width: 100%;
    box-sizing: border-box;
}
</style>

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/cranesMaintenanceIndex">Crane Maintenance </a></li>
    <li class="breadcrumb-item"><a href="/cranesList/{{ $craneInventory->crane_field_id }}">List of crane</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crane Maintenance Status  - {{$craneInventory->platform}}</li>
  </ol>
</nav>
<div class="row">
    <input type="hidden" id="cranesInventoryId" name="cranesInventoryId" value="{{$craneInventory->id}}">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="col-6 d-flex justify-content-end" style="width: 100%;">
                    <a href="/cranesList/{{ $field_id }}" class="btn btn-primary btn-sm" role="button" aria-pressed="true" title="View">
                        <i data-feather="arrow-left"></i>
                        Back
                    </a>
                </div><br>
                <div id='fullcalendar'></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="createEventModal" aria-hidden="true" aria-labelledby="createEventModalLabel" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle2" class="modal-title text-center">CREATE DAILY PROGRESS REPORT</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <span class="visually-hidden">close</span>
                </button>
            </div>

            <div id="modalBody2" class="modal-body">
                <form id="createMaintenanceReport">
                    @csrf
                    <input type="hidden" id="craneInventoryId" name="craneInventoryId" value="{{$craneInventory->id}}">

                    <!-- SECTION A: General Information -->
                    <fieldset class="p-3 border rounded mb-4">
                        <legend class="fw-bold">SECTION (A): GENERAL INFORMATION</legend>
                        <div class="row mb-3 mt-3">
                            <div class="col-md-6">
                                <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function getCraneFieldName() in /home/pbuild/public_html/oksb/resources/views/pages/craneMaintenance/edit.blade.php:155
Stack trace:
#0 {main}
  thrown in <b>/home/pbuild/public_html/oksb/resources/views/pages/craneMaintenance/edit.blade.php</b> on line <b>155</b><br />