@extends('layouts.authUser ')

@section('content')
<h2>Senarai pembekal</h2>

<div class="table-responsive mt-3">
    <a href="{{ route('ManageSupplier.AddSupplier')}}" 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('ManageSupplier.SupplierList.ExportSupplier') }}" class="btn btn-exportExcel">
        <span class="icon-exportExcel">
            <i class="bx bx-export"></i>
        </span>
        <span class="btn-exportExcelText">Eksport ke Excel</span>
    </a>

    <div class="search">
        <input type="search" name="search" id="Search" placeholder="Carian..." class="form-control">
        <span class="icon-search">
            <i class="bx bx-search"></i>
        </span>
    </div>
    <table class="table table-striped table-bordered table-sm">
        <thead>
            <tr>
                <th style="width: 1%; text-align:center;">No.</th> 
                <th style="width: 30%">Nama</th>
                <th style="width: 15%;">Nombor Telefon</th>
                <th style="width: 15%;">E-mel</th>
                <th style="width: 25%">Alamat</th>
                <th class="col-actions" style="text-align: center;">Tindakan</th>
            </tr>   
        </thead>

        <tbody>
            @if($suppliers->isEmpty())
                <tr>
                    <td colspan="6" class="text-center">Tiada data dalam rekod</td>
                </tr>
            @else
            @foreach($suppliers as $index => $supplier)
            <tr>
                <td style="text-align:center;">{{ ($suppliers->currentPage() - 1) * $suppliers->perPage() + $index + 1 }}</td>
                <td class="col-name search1">
                    <a href="#" data-bs-toggle="modal" data-bs-target="#supplierModal-{{ $supplier->id }}"> 
                        {{$supplier->name}} 
                    </a>
                </td>
                <td class="col-phone search2">{{$supplier->phone_num}}</td>
                <td class="col-email search3">{{$supplier->email}}</td>
                <td class="col-address search4">{{$supplier->address}}</td>
                <td class="col-actions">
                    <!-- Button trigger modal -->
                    <div class="col-Tindakan">
                    <a href="{{ route('ManageSupplier.EditSupplier', $supplier->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-{{ $supplier->id }}">
                        <i class='icon-trash bx bxs-trash' ></i>
                    </button>
                    </div>
                </td>
            </tr>
            
            <!-- Supplier Details Modal -->
            <div class="modal fade" id="supplierModal-{{ $supplier->id }}" tabindex="-1" aria-labelledby="supplierModalLabel-{{ $supplier->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="supplierModalLabel-{{ $supplier->id }}"><b>Butiran pembekal</b></h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p><b>Nama:</b> {{ $supplier->name }}</p>
                            <p><b>Nombor telefon:</b> {{ $supplier->phone_num }}</p>
                            <p><b>E-mel:</b> {{ $supplier->email }}</p>
                            <p><b>Alamat:</b> {{ $supplier->address }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delete Confirmation Modal -->
            <div class="modal fade" id="deleteModal-{{ $supplier->id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ $supplier->id }}" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="deleteModalLabel-{{ $supplier->id }}"><b>Kepastian Pemadaman</b></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 pembekal?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <form id="delete-form-{{ $supplier->id }}" action="{{ route('ManageSupplier.DeleteSupplier') }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <input type="hidden" name="supplier" value="{{ $supplier->id }}">
                                <button type="submit" class="btn btn-danger">Padam</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </tbody> 

        <tbody id="Content" class="searchdata"></tbody> 

    </table>
    <div id="custom-pagination" class="pagination d-flex flex-row-reverse"> 
        {{ $suppliers->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