@extends('layouts.authUser')

@section('content')
<h2>Inventori / Peralatan makmal</h2>

<div id="list" class="table-responsive mt-3">
    <a href="{{ route('ManageItem.AddItem') }}" class="btn btn-add">
        <span class="icon-add">
            <i class="bx bx-plus-circle"></i>
        </span>
        <span class="btn-addText">Tambah</span>
    </a>

    <a href="{{ route('ManageItemQRCode.PrintAllQRCode') }}" class="btn btn-allQRCode">
        <span class="icon-allQRCode">
            <i class="bx bx-printer"></i>
        </span>
        <span class="btn-allQRCodeText">Cetak QR</span>
    </a>

    <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>

    <table class="table table-striped table-bordered table-sm mt-3">
        <thead>
            <tr>
                <th style="width: 1%; text-align:center;">No.</th>
                <th style="width: 15%; text-align: center;">Gambar</th>
                <th style="width: 15%">Alat radas</th>
                <th style="width: 10%">No. kod</th>
                <th style="width: 15%">No. bilik penyediaan</th>
                <th style="width: 15%">Kategori</th>
                <th style="width: 5%">Kuantiti terima</th>
                <th style="width: 5%">Kuantiti baki</th>
                <th style="width: 10%">Status</th>
                <th style="width: 5%; text-align:center;">Tindakan</th>
                <th style="width: 10%; text-align:center;">QR kod</th> 
            </tr>   
        </thead>

        <tbody class=" list">
            @if($items->isEmpty())
                <tr>
                    <td colspan="11" class="text-center">Tiada data dalam rekod</td>
                </tr>
            @else
            @foreach($items as $index => $item)
            <tr>
                <td style="text-align:center;">{{ ($items->currentPage() - 1) * $items->perPage() + $index + 1 }}</td>
                <td>
                    <img src="{{ asset($item->item_image) }}" style="height:90px; margin: auto; display: block;" alt="Gambar">
                </td>
                <td class="search1">
                    <a href="#" data-bs-toggle="modal" data-bs-target="#itemModal-{{ $item->id }}">
                        @if($item->item_measurement === null)
                            {{$item->item_name}}
                        @else
                            {{$item->item_name}} <br> [{{$item->item_measurement}}]
                        @endif
                    </a>
                </td>
                <td class="search2">
                    {{$item->item_series_num}}
                </td>
                <td class="search3">{{$item->itemLocation->storageRoomNo}}</td>
                <td class="search4">{{$item->itemCategory->itemCategory_name}}</td>
                <td>{{$item->item_quantity}}</td>
                <td>{{$item->item_currentQuantity}}</td>
                <td class="search5">
                    @if($item->item_status == 'Kurang Stok')
                        <span style="color: red; font-weight: bold;">{{ $item->item_status }}</span>
                    @elseif($item->item_status == 'Tiada Stok')
                        <span style="color: red; font-weight: bold;">{{ $item->item_status }}</span>
                    @else
                        {{ $item->item_status }}
                    @endif
                </td>
                <!-- <td>
                    //Button trigger modal
                    <div class="col-Tindakan">  
                    <a href="{{ route('ManageItem.EditItem', $item->id) }}" class="btn btn-link text-primary">
                        <i class='icon-edit bx bx-edit' ></i>
                    </a> 
                    <button type="button" class="btn btn-link text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $item->id }}">
                        <i class='icon-trash bx bxs-trash' ></i>
                    </button>
                    </div>
                </td> -->
                <td>
                    <div class="col-Tindakan">
                        <a href="{{ route('ManageItemOrder.AddItemOrder',  [$item->id, Auth::id()]) }}" class="btn btn-link text-primary">
                            <i class='icon-edit bx bx-cart'></i>
                        </a>
                        <a href="{{ route('ManageItem.EditItem', $item->id) }}" class="btn btn-link text-primary">
                            <i class='icon-edit bx bx-edit'></i>
                        </a>
                        <button type="button" class="btn btn-link text-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ $item->id }}">
                            <i class='icon-trash bx bxs-trash'></i>
                        </button>
                    </div>
                    <form id="delete-form-{{ $item->id }}" action="{{ route('ManageItem.DeleteItem') }}" method="POST" style="display: none;"> @csrf @method('DELETE') <input type="hidden" name="item" value="{{ $item->id }}">
                    </form>
                </td>
                <td>
                    <a href="{{ route('ManageItemQRCode.PrintQRCode', $item->id) }}" class="btn btn-QRCode">
                        <i class="bx bx-printer"></i>
                        <label>Cetak</label>
                    </a>
                </td>
            </tr>
            
            <!-- Item List Modal -->
<div class="modal fade" id="itemModal-{{ $item->id }}" tabindex="-1" aria-labelledby="itemModalLabel-{{ $item->id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="itemModalLabel-{{ $item->id }}"><b>Butiran peralatan makmal</b></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><b>Nama alat radas:</b>
                    @if($item->item_measurement === null)
                        {{ $item->item_name }}
                    @else
                        {{ $item->item_name }} [{{ $item->item_measurement }}{{ $item->item_measurement_unit }}]
                    @endif
                </p>
                <p><b>No. siri:</b> {{ $item->item_series_num }}</p>
                <p><b>No. bilik penyediaan:</b> {{ $item->itemLocation->storageRoomNo }}</p>
                <p><b>Kategori:</b> {{ $item->itemCategory->itemCategory_name }}</p>
                <p><b>Kuantiti terima:</b> {{ $item->item_quantity }}</p>
                <p><b>Kuantiti baki:</b> {{ $item->item_currentQuantity }}</p>
                <p><b>Harga seunit:</b> RM {{ $item->item_price }}</p>
                <p><b>Tarikh luput:</b>
                    @if($item->expired_date === null)
                        TIADA
                    @else
                        {{$item->expired_date->format('d-m-Y') }}
                    @endif
                </p>
                <p><b>Pembekal:</b> {{ $item->supplier->name }}</p>
                <p><b>Status:</b> {{ $item->item_status }}</p>
            </div>
        </div>
    </div>
</div>

            <!-- Delete Confirmation Modal -->
            <div class="modal fade" id="deleteModal-{{ $item->id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ $item->id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="deleteModalLabel-{{ $item->id }}">Kepastian Pemadaman</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Anda pasti untuk memadam data peralatan makmal?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="button" class="btn btn-danger confirm-delete" data-form-id="delete-form-{{ $item->id }}">Padam</button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </tbody> 

    </table>
    <div id="custom-pagination" class="pagination d-flex flex-row-reverse"> 
        {{ $items->links() }}
    </div> 
</div>
<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>
@endsection