@extends('layouts.admin')

@section('title')
    {{$title}}
@endsection

@section('content-admin')
<div class="wrapper wrapper-content">
    <div class="text-center mb-1 fw-bold d-flex justify-content-center align-items-center">
        <img src="{{asset('assets/general/img/logoDAU.png')}}" alt="" class="img-fluid" style="width: 40px;">
        <h1 id="title-top" class="ms-3 mb-0" style="font-size: 22px">{{$title}}</h1>
    </div>
    @if(session('msg'))
        <div class="alert alert-success">
            {{ session('msg') }}
        </div>
    @endif

    <div class="d-flex justify-content-between mb-2">
        <a href="{{ route('admin.products.addProduct') }}" class="btn btn-primary">Thêm sản phẩm</a>
    </div>

    <form action="" method="get" class="mb-3 border-top pt-3">
        <div class="row align-items-center">
            <div class="col-sm-1">
                <label for="keyword" class="d-flex align-items-center">
                    <i class="fa-solid fa-filter" style="font-size:20px; margin-right: 10px;"></i>
                    <h4 class="mb-0 fs-6">Bộ Lọc</h4>
                </label>
            </div>
            <div class="col-sm-2">
                <select class="form-select" name="nsx" id="nsx">
                    <option value="0">--Nhà Sản Xuất--</option>
                    @if(!empty(getAllNSX()))
                        @foreach(getAllNSX() as $item)
                            <option value="{{$item->maNSX}}" {{request()->nsx == $item->maNSX ? 'selected' : false }}>{{$item->ten_NSX}}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-sm-2">
                <select class="form-select" name="id_danh_muc" id="id_danh_muc" >
                    <option value="0">--Danh mục--</option>
                    {!! getCategories($categories, $idDanhMuc) !!}
                </select>
                
            </div>
            <div class="col-sm-2">
                <input type="search" class="form-control" name="keyword" id="keyword" placeholder="Nhập tìm kiếm..." value="{{request()->keyword}}">
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary w-100">Tìm kiếm</button>
            </div>
        </div>
    </form>

    <table class="table table-bordered">
        <thead>
            <tr class="text-center">
                <th width="3%">STT</th>
                <th>Ảnh</th>
                <th>Tên Sản Phẩm</th>
                <th>NSX</th>
                <th>Loại</th>
                <th>Giá</th>
                <th>Còn</th>
                <th>Loại</th>
                <th>Ẩn/Hiện</th>
                <th width="200px">Hành động</th>
            </tr>
        </thead>
        <tbody class="tbody-listsp">
            @if(!empty($ProductList) && count($ProductList) > 0)
                @foreach ($ProductList as $key => $item)
                {{-- {{dd($item)}} --}}
                <tr>
                    <td class="align-middle">{{$key + 1}}</td>
                    <td class="align-middle">
                        <img src="{{asset('storage/products/img/'.$item->anh)}}" alt="" style="width: 50px">
                    </td>   
                    <td class="align-middle">
                        <a href="{{ route('admin.products.edit', $item->maSP) }}"  class="text-sp-hover">
                            {{ \Illuminate\Support\Str::limit($item->ten_san_pham,40)}}
                        </a>
                    </td>
                    <td class="align-middle">{{$item->ten_NSX}}</td>
                    <td class="align-middle">{{$item->ten_danh_muc}}</td>
                    <td class="align-middle" >{{number_format($item->don_gia,0,',','.')}} VNĐ</td>
                    <td class="align-middle">{{$item->so_luong_ton}}</td>
                    <td class="align-middle">
                        @if($item->sp_noi_bat == 1)
                            <h6 class="text-center bg-success p-1 border rounded text-white p-1">Nổi Bật</h6>
                        @else
                            <h6 class="text-center bg-secondary p-1 border rounded text-white p-1">Thường</h6>
                        @endif
                    </td class="align-middle">
                    <td class="align-middle">
                        @if($item->trang_thai == 1)
                            <h6 class="text-center bg-success p-1 border rounded text-white p-1">Hiển thị</h6>
                        @else
                            <h6 class="text-center bg-secondary p-1 border rounded text-white p-1">Ẩn</h6>
                        @endif
                    </td>
                    <td class="align-middle text-center">
                        <a href="{{ route('admin.products.detailProduct', ['id'=>$item->maSP]) }}" class="btn btn-primary btn-sm"><i class="fa-solid fa-eye"></i></a>
                        <a href="{{ route('admin.products.edit', $item->maSP) }}" class="btn btn-warning btn-sm"><i class="fa-solid fa-pen-to-square"></i></a>
                        <form action="{{ route('admin.products.delete', $item->maSP) }}" method="POST" style="display:inline; "id="delete-form-{{$key}}">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm delete-product" data-form="delete-form-{{$key}}"><i class="fa-solid fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="10" class="text-center">KHÔNG CÓ SẢN PHẨM</td>
                </tr>
            @endif
        </tbody>
    </table>
    <div class="d-flex justify-content-center mt-3">
        {{$ProductList->links()}}
    </div>  
</div>
@endsection
@section('js')
<script>
    document.querySelectorAll('.delete-product').forEach(button => {
    button.addEventListener('click', (event) => {
        event.preventDefault();
        const formId = event.target.getAttribute('data-form');
        const form = document.getElementById(formId);
        
        Swal.fire({
            title: "Bạn có chắc chắn muốn xóa?",
            text: "Bạn sẽ không thể hoàn tác điều này!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Đồng ý!"
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>

@endsection