@extends('layouts.authUser')

@section('content')
<h2>Kemaskini pinjaman peralatan makmal</h2>

    <!-- Hidden field for booking_status -->
    <input type="hidden" name="booking_status" value="Dalam proses">

    <form action="{{ route('ManageBookingItem.UpdateBookingItem', $booking->id) }}" method="POST">
        @csrf
        @method('PUT')

    <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', $booking->booking_date->format('Y-m-d')) }}">
                @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', $booking->booking_startTime->format('H:i')) }}">
                @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', $booking->booking_endTime->format('H:i')) }}">
                @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', $booking->classroom) }}">
                @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', $booking->experimentTitle) }}">
                @error('bookingItem_experimentTitle')
                    <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 name="labRoomNo" id="labRoomNo" class="form-control @error('labRoomNo') is-invalid @enderror">
                    <option value="">Pilih Bilik Makmal</option>
                    @foreach($labRoomOptions as $labRoom)
                        <option value="{{ $labRoom }}" {{ old('labRoomNo', $booking->location) == $labRoom ? 'selected' : '' }}>
                            {{ $labRoom }}
                        </option>
                    @endforeach
                </select>
                @error('labRoomNo')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            </div>

            <div class="col-auto">
                <label for="item_and_quantity" class="col-form-label mt-4" style="padding-left:20px;">Senarai alat radas:</label>
            </div>

            <table class="table-bordered table-sm mt-2" 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>      
    </thead>
    <tbody class="alldata">
        @foreach ($items as $index => $item)
        <tr>
            <td style="display: flex; gap: 5px; border: none;">
                <input class="form-check-input" type="checkbox" name="selected_items[{{ $item->id }}]" id="flexCheckChecked{{ $item->id }}" value="{{ $item->id }}" {{ isset($bookingItems[$item->id]) ? 'checked' : '' }} style="border: outside;">
                {{ $index + 1 }}
            </td>
            <td>
                <img src="{{ asset($item->item_image) }}" style="height:90px; margin: auto; display: block;" alt="Gambar">     
            </td>
            <td>
                @if($item->item_measurement === null)
                    {{$item->item_name}}
                @else
                    {{$item->item_name}} [{{$item->item_measurement}}]
                @endif  

                <input
                type="hidden"
                name="item_name[{{ $item->id }}]"
                value="{{ $item->item_name }}"
            >
            </td>
            <td style="text-align: center;">
                {{ $item->item_currentQuantity }}
            </td>
            <td>
                <div class="quantity-control">
                    <button type="button" class="btn btn-outline-primary btn-icon btn-decrease">
                        <i class='bx bx-minus'></i>
                    </button>
                    <input type="number" name="bookingItem_quantity[{{ $item->id }}]" class="centered-input form-control" value="{{ old('bookingItem_quantity.' . $item->id, isset($bookingItems[$item->id]) ? $bookingItems[$item->id] : 0) }}" min="0" max="{{ $item->item_quantity }}">
                    <button type="button" class="btn btn-outline-primary btn-icon btn-increase">
                        <i class='bx bx-plus'></i>
                    </button>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
    </table>
   
        

        <div class="button-container">
            <a href="{{ route('ManageBookingItem.BookingItemList') }}" class="btn btn-cancel">{{ __('Batal') }}</a>
            <button type="submit" class="btn btn-save">{{ __('Kemaskini') }}</button>
        </div>
    </div>
    </form>

<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