@extends('layouts.authUser')

@section('content')
<h2>Tempahan / Borang pesanan peralatan makmal</h2>


<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="successModalLabel">Pinjaman peralatan makmal anda berjaya!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Success message will be dynamically inserted here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-save" id="okButton">OK</button>
      </div>
    </div>
  </div>
</div>

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="errorModalLabel">Maaf! pinjaman peralatan makmal anda tidak berjaya.</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Error message will be dynamically inserted here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-save" id="okButton2">OK</button>
      </div>
    </div>
  </div>
</div>

<form id="bookingForm" method="POST" action="{{ route('ManageBookingItem.StoreNewBookingItem') }}" >
    @csrf
    
    <!-- Hidden field for booking_status -->
    <input type="hidden" name="booking_status" value="Dalam proses">

    <div class="content-container">
        <div class="content-info mt-4">
            <div class="col-auto">
                <label for="name" class="col-form-label">Nama peminjam:</label>
            </div>
            <div class="col-auto">
                <label for="role" class="col-form-label">{{ $user->name }}</label>
            </div>

            <div class="col-auto">
                <label for="booking_date" class="col-form-label">Tarikh:</label>
            </div>
            <div class="col-auto">
                <input type="date" name="booking_date" id="booking_date" class="form-control @error('booking_date') is-invalid @enderror" value="{{ old('booking_date') }}">
                @error('booking_date')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-auto">
                <label for="booking_startTime" class="col-form-label">Masa mula:</label>
            </div>
            <div class="col-auto">
                <input type="time" name="booking_startTime" id="booking_startTime" class="form-control @error('booking_startTime') is-invalid @enderror" value="{{ old('booking_startTime') }}">
                @error('booking_startTime')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-auto">
                <label for="booking_endTime" class="col-form-label">Masa tamat:</label>
            </div>
            <div class="col-auto">
                <input type="time" name="booking_endTime" id="booking_endTime" class="form-control @error('booking_endTime') is-invalid @enderror" value="{{ old('booking_endTime') }}">
                @error('booking_endTime')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
       
            <div class="col-auto">
                <label for="bookingItem_classroom" class="col-form-label">Kelas:</label>
            </div>
            <div class="col-auto">
                <input type="text" name="bookingItem_classroom" id="bookingItem_classroom" class="form-control @error('bookingItem_classroom') is-invalid @enderror" value="{{ old('bookingItem_classroom') }}" autocomplete="bookingItem_classroom" placeholder="{{ __('Kelas') }}">
                @error('bookingItem_classroom')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-auto">
                <label for="bookingItem_experimentTitle" class="col-form-label">Tajuk eksperimen:</label>
            </div>
            <div class="col-auto">
                <input type="text" name="bookingItem_experimentTitle" id="bookingItem_experimentTitle" class="form-control @error('bookingItem_experimentTitle') is-invalid @enderror" value="{{ old('bookingItem_experimentTitle') }}" autocomplete="bookingItem_experimentTitle" placeholder="{{ __('Tajuk eksperimen') }}">
                @error('bookingItem_experimentTitle')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>

            <div class="col-auto">
                <label for="booking_desc" class="col-form-label">Catatan:</label>
            </div>
            <div class="col-auto">
                <textarea name="booking_desc" id="booking_desc" rows="3" class="form-control @error('booking_desc') is-invalid @enderror" value="{{ old('booking_desc') }}" autocomplete="booking_desc" placeholder="{{ __('Masukkan catatan disini...') }}."></textarea>
                @error('booking_desc')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div> 

            <div class="col-auto">
                <label for="labRoomNo" class="col-form-label">Bilik makmal:</label>
            </div>
            <div class="col-auto">
                <select id="labRoomNo" class="form-select @error('labRoomNo') is-invalid @enderror" name="labRoomNo">
                    <option disabled selected>-Sila pilih-</option>
                    @foreach($labRoomOptions as $labRoom)
                        <option value="{{ $labRoom }}" {{ old('labRoomNo') == $labRoom ? 'selected' : '' }}>
                            {{ $labRoom }}
                        </option>
                    @endforeach
                </select>
                @error('labRoomNo')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>
          
        <div class="col-auto">
            <label for="item_and_quantity" class="col-form-label">Senarai alat radas:</label>
        </div>
        <div class="col-auto mt-1">
            <p style="color: red;">*Sila pilih bahagian bilik makmal di atas untuk melihat senarai alat radas*</p>
        </div>
    </div>

    <!-- Container for Items Table -->
    <div id="itemsTableContainer" class="table-responsive" style="display: none;">
    <div class="row mt-3">
        <div class="col">
            <div class="search">
                <input type="search" name="search" class="form-control" id="Search" placeholder="Carian...">
                <span class="icon-search">
                    <i class="bx bx-search"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p class="mb-0 mt-0" style="padding-left:15px; color: red;">*Sila nyatakan kuantiti pinjam*</p> <!-- Add mt-2 for spacing -->
        </div>
    </div>

    <table class="table-bordered table-sm mt-2 table-responsive" style="background-color:white; border-color:lightgrey; margin:15px;">
        <thead>
            <tr>
                <th style="width: 1%; text-align:center;">No.</th> 
                <th style="width: 2%; text-align: center;">Gambar</th>
                <th style="width: 5%">Nama alat radas</th>
                <th style="width: 2%; text-align: center;">Kuantiti baki</th>     
                <th style="width: 1%; text-align: center;">Kuantiti Pinjam</th> 
            </tr>    
        </thead>
        <tbody class="alldata">
            <!-- Items will be dynamically populated -->
        </tbody> 
        <!-- No Records Row -->
        <tr id="no-records-row" style="display: none;">
            <td colspan="8" class="text-center py-2">Tiada data dalam rekod</td>
         </tr>
    </table>

    <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Berjaya!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="modalMessage">Pinjaman peralatan makmal telah dihantar dan notifikasi telah dihantar kepada pembantu makmal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>


    <!-- Pagination Container -->
    <div id="paginationContainer" class="d-flex flex-row-reverse"> 
        {{ $items->links() }} <!-- Ensure pagination links are displayed here -->
    </div> 
    </div>

    <div class="button-container">
    @auth
    @if (auth()->user()->role == 'Guru')
        <a href="{{ route('ManageBookingItem.BookingItemCalander') }}" class="btn btn-cancel">{{ __('Batal') }}</a>
        
        
    @elseif (auth()->user()->role == 'Pembantu makmal') 
        <a href="{{ route('ManageBookingItem.BookingItemList') }}" class="btn btn-cancel">{{ __('Batal') }}</a>
    @endif
    @endauth
        
        <button type="submit" id="submitBtn" class="btn btn-save">{{ __('Hantar') }}</button>
    </div>
   </div>
</form>

<div id="alert-message">
    @if (session('failure'))
        <div class="alert alert-danger">
            {{ session('failure') }}
        </div>
    @endif <!-- Red pop-up message -->

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif <!-- Green pop-up message -->
</div>

<script>
    // Hide alert message after 5 seconds if it exists
setTimeout(function() {
    const alertMessage = document.getElementById("alert-message");
    if (alertMessage) {
        alertMessage.style.display = "none";
    }
}, 5000);
</script>

<script>
    $(document).ready(function() {
    $(document).on('click', '.btn-increase', function() {
        const input = $(this).siblings('input[type="number"]');
        let value = parseInt(input.val());
        const max = parseInt(input.attr('max'));
        const checkbox = $(this).closest('tr').find('.form-check-input');

        if (value < max) {
            input.val(value + 1);
            if (parseInt(input.val()) > 0) {
                checkbox.prop('checked', true);
            }
        }
    });

    $(document).on('click', '.btn-decrease', function() {
        const input = $(this).siblings('input[type="number"]');
        let value = parseInt(input.val());
        const min = parseInt(input.attr('min'));
        const checkbox = $(this).closest('tr').find('.form-check-input');

        if (value > min) {
            input.val(value - 1);
            if (parseInt(input.val()) > 0) {
                checkbox.prop('checked', true);
            } else {
                checkbox.prop('checked', false);
            }
        }
    });

    // Ensure the input value is valid and doesn't have leading zeros
    $(document).on('input', 'input[type="number"]', function() {
        const input = $(this);
        let value = input.val().replace(/^0+/, ''); // Remove leading zeros
        value = value === '' ? '0' : value; // Ensure value is not empty, set to '0' if empty

        input.val(value); // Update the input field with the valid value

        // Update checkbox based on input value
        const checkbox = $(this).closest('tr').find('.form-check-input');
        if (parseInt(value) > 0) {
            checkbox.prop('checked', true);
        } else {
            checkbox.prop('checked', false);
        }
    });
});
</script>
@endsection