@extends('layouts.authUser')

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

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

    <form  method="post" action="{{ route('ManageItemDamaged.StoreNewItemDamaged', $booking->id) }}" enctype="multipart/form-data">
        @csrf
       

    <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="name" 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">
                <label for="booking_date" class="col-form-label">{{ \Carbon\Carbon::parse($booking->booking_date)->format('d-m-Y') }}</label>
            </div>
       
            <div class="col-auto">
                <label for="booking_startTime" class="col-form-label">Masa mula:</label>
            </div>
            <div class="col-auto">
                <label for="booking_startTime" class="col-form-label">{{ \Carbon\Carbon::parse($booking->booking_startTime)->format('h:i A') }}</label>
            </div>
        
            <div class="col-auto">
                <label for="booking_endTime" class="col-form-label">Masa tamat:</label>
            </div>
            <div class="col-auto">
                <label for="booking_endTime" class="col-form-label">{{ \Carbon\Carbon::parse($booking->booking_endTime)->format('h:i A') }}</label>
            </div>

            <div class="col-auto">
                <label for="bookingItem_classroom" class="col-form-label">Kelas:</label>
            </div>
            <div class="col-auto">
                <label for="bookingItem_classroom" class="col-form-label">{{ $booking->classroom }}</label>
            </div>

            <div class="col-auto">
                <label for="bookingItem_experimentTitle" class="col-form-label">Tajuk eksperimen:</label>
            </div>
            <div class="col-auto">
                <label for="bookingItem_experimentTitle" class="col-form-label">{{ $booking->experimentTitle }}</label>
            </div>
        
            <div class="col-auto">
                <label for="labRoomNo" class="col-form-label">Bilik makmal:</label>
            </div>
            <div class="col-auto">
                <label for="labRoomNo" class="col-form-label">{{ $booking->location }}</label>
            </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 id="itemList" 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: 1%; text-align: center;">Gambar</th>
            <th style="width: 2%">Nama alat radas</th>     
            <th style="width: 1%; text-align: center;">Kuantiti Pinjam</th> 
            <th style="width: 1%; text-align: center;">Rosak/Hilang</th> 
            <th style="width: 1%; text-align: center;">Gambar Alat Radas yang Rosak</th> 
        </tr>    
    </thead>
    <tbody>
        @foreach ($items as $index => $item)
        <tr>
            <td style="display: flex; gap: 5px; border: none;">
                <input class="form-check-input" type="checkbox" name="damaged_items[{{ $item->id }}]" id="flexCheckChecked{{ $item->id }}" value="{{ $item->item_measurement ? $item->item_name . ' [' . $item->item_measurement . ']' : $item->item_name }}" 
                    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}} <br> [{{$item->item_measurement}}]
                @endif  
            </td>
            <td style="text-align: center;">
                {{ $bookingItems[$item->id] ?? 0 }}
            </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="itemDamaged_quantity[{{ $item->id }}]" min="0" max="{{ $bookingItems[$item->id] ?? 0 }}" value="0" class="centered-input form-control" />
                    <button type="button" class="btn btn-outline-primary btn-icon btn-increase">
                        <i class='bx bx-plus'></i>
                    </button>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <div class="d-flex justify-content-center">
                        <label for="itemDamaged_image_{{ $item->id }}" class="@error('item_images.' . $item->id) is-invalid @enderror">
                            <i class="bx bx-image-add" style="font-size: 35px; cursor: pointer;"></i>
                        </label>
                        <input type="file" name="item_images[{{ $item->id }}]" id="itemDamaged_image_{{ $item->id }}" style="display: none;" accept="image/*" onchange="displayImageName(this);">
                    <div id="display-image-name-{{ $item->id }}"></div>
                    </div>
                        @error('item_images.' . $item->id)
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                </div>
            </td> 
        </tr>
        @endforeach
    </tbody>
    </table>

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

        <div class="button-container">
            <a href="{{ route('ManageBookingItem.BookingItemList') }}" class="btn btn-cancel">{{ __('Batal') }}</a>
            <button type="submit" id="submitBtn" class="btn btn-save">{{ __('Hantar') }}</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')); // Ensure max corresponds to bookingItem_quantity
            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 exceed max
        $(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
            const max = parseInt(input.attr('max'));

            if (parseInt(value) > max) {
                value = max; // Set value to max if it exceeds
            }

            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);
            }
        });
    });

    function displayImageName(input) {
        const fileName = input.files[0] ? input.files[0].name : '';
        const displayNameElement = document.getElementById('display-image-name-' + input.id.split('_').pop());
        displayNameElement.textContent = fileName ? fileName : 'No file chosen';
    }
</script>

@endsection