@extends('layouts.admin')
@section('title')
    {{$title}}
@endsection
<link rel="stylesheet" href="{{asset('assets/admin/css/custom_show.css')}}">
@section('content-admin')
<div class="wrapper wrapper-content">
    <div class="container-fluid"> <!-- Changed to container-fluid -->
        <div class="text-center mb-4 fw-bold d-flex justify-content-center align-items-center">
            <img src="{{asset('assets/general/img/logoDAU.png')}}" alt="" class="img-fluid me-2" 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">
            @can('create',App\Models\Admin\User::class)
            <a href="{{ route('admin.users.add') }}" class="btn btn-primary">Thêm người dùng</a>
            @endcan
        </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 me-2" style="font-size:20px;"></i>
                        <h4 class="mb-0 fs-6">Bộ Lọc</h4>
                    </label>
                </div>
                <div class="col-sm-2">
                    <select class="form-select" name="chuc_vu" id="chuc_vu">
                        <option value="0">Tất Cả Chức Vụ</option>
                        @if(!empty(getAllGroups()))
                            @foreach(getAllGroups() as $item)
                                <option value="{{$item->maCV}}" {{request()->chuc_vu == $item->maCV ? 'selected' : ''}}>{{$item->ten_chuc_vu}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
                <div class="col-sm-3">
                    <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-block btn-primary" type="submit">Tìm kiếm</button>
                </div>
            </div>
        </form>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="width:3%;"><a href="">STT</a></th>
                    <th><a href="">Ảnh</a></th>
                    <th><a href="">Tài khoản</a></th>
                    <th><a href="">Nhóm</a></th>
                    <th><a href="?sort-by=ho_ten&sort-type={{$sortType}}">Họ Tên</a></th>
                    <th><a href="?sort-by=ngay_sinh&sort-type={{$sortType}} ">Ngày Sinh</a></th>
                    <th><a href="">SĐT</a></th>
                    <th><a href="?sort-by=email&sort-type={{$sortType}}">Email</a></th>
                    {{-- <th><a href="">Địa Chỉ</a></th> --}}
                    <th style="width: 200px;"><a href="">Hành động</a></th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th style="width:3%;">STT</th>
                    <th>Ảnh</th>
                    <th>Tài khoản</th>
                    <th>Nhóm</th>
                    <th>Họ Tên</th>
                    <th>Ngày Sinh</th>
                    <th>SĐT</th>
                    <th>Email</th>
                    {{-- <th><a href="">Địa Chỉ</th> --}}
                    <th style="width: 50px;">Hành động</th>
                </tr>
            </tfoot>
            <tbody>
                @if(!empty($userList))
                    @foreach ($userList as $key => $item)
                    <tr class="align-middle" style="align-items: center">
                        <td class="align-middle">{{$key + 1}}</td>
                        <td class="align-middle">
                            @if($item->provider=="google" && $item->updated_at != null)
                                <a href="{{ route('admin.users.detail', ['user'=>$item->username]) }}">
                                    <img src="{{$item->anh}}" alt="" style="width: 50px; height:50px; border-radius:50%" class="rounded-circle img-thumbnail border-animation1">
                                </a>
                            @else
                                <a href="{{ route('admin.users.detail', ['user'=>$item->username]) }}">
                                    @if(!empty($item->anh))
                                        <img src="{{asset('storage/users/img/'.$item->anh)}}" alt="" class="rounded-circle img-thumbnail border-animation1" style="width: 50px; height: 50px;">
                                    @else
                                        <i class="fa-solid fa-xmark"></i>  
                                    @endif
                                </a>
                            @endif
                        </td>
                        <td class="align-middle">
                            @if(empty($item->provider == "google"))
                                {{$item->username}}
                            @else   
                            <i class="fa-brands fa-google"></i>
                            @endif
                        </td>
                        <td class="align-middle">
                            @if(!empty($item->ten_chuc_vu == "Khách Hàng"))
                                <h6 class="text-center bg-success p-1 border rounded text-white w-100 mb-0">{{$item->ten_chuc_vu}}</h6>
                            @elseif(!empty($item->ten_chuc_vu =="Giám Đốc"))
                                <h6 class="text-center bg-danger p-1 border rounded text-white w-100 mb-0">{{$item->ten_chuc_vu}}</h6>
                            @else
                                {{$item->ten_chuc_vu}}
                            @endif
                            
                        </td>
                        <td class="align-middle text-start">{{$item->ho_ten}}</td>
                        <td class="align-middle">
                            @if(!empty($item->ngay_sinh)) 
                                {{ \Carbon\Carbon::parse($item->ngay_sinh)->format('d/m/Y')}}
                            @else
                                <i class="fa-solid fa-xmark"></i>    
                            @endif
                        </td>
                        <td class="align-middle">
                            @if(empty($item->so_dien_thoai))
                                <i class="fa-solid fa-xmark"></i>
                            @else
                                {{$item->so_dien_thoai}}
                            @endif
                        </td>
                        <td class="align-middle text-start">{{$item->email}}</td>
                        <td class="align-middle">

                            <a href="{{ route('admin.users.detail', ['user'=>$item->id]) }}" class="btn btn-info btn-sm"><i class="fa-solid fa-eye"></i></a>
                            @can('users.edit')
                                <a href="{{ route('admin.users.edit', ['user'=>$item->id]) }}" class="btn btn-warning btn-sm"><i class="fa-solid fa-pen-to-square"></i></a>
                            @endcan
                            <form action="{{route('admin.users.delete',['user'=>$item->id]) }}" method="POST" style="display:inline;" id="delete-form-{{$key}}">
                                @csrf
                                @method('DELETE')
                                @can('users.delete')
                                <button type="button" class="btn btn-danger btn-sm delete-user" data-form="delete-form-{{$key}}"><i class="fa-solid fa-trash"></i></button>
                                @endcan
                            </form>
                            
                        </td>
                    </tr>
                    @endforeach
                @else
                <tr>
                    <td colspan="8" class="text-center">KHÔNG CÓ NGƯỜI DÙNG</td>
                </tr>
                @endif
            </tbody>
        </table>
        <div class="d-flex justify-content-center mt-3">
            {{$userList->links()}}
        </div>  
    </div>
</div>
<script>
    document.querySelectorAll('.delete-user').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