@extends('admin.layouts.master')

@section('content')
    <div class="card">
        <div class="card-header d-sm-flex d-block">
            <div class="me-auto mb-sm-0 mb-3">
                <h4 class="card-title mb-2">รายชื่อพนักงาน</h4>
                {{-- <span>Lorem Ipsum sit amet</span> --}}
            </div>
            {{-- <a href="javascript:void(0);" class="btn btn-info light me-3"><i
                class="las la-download scale3 me-2"></i>Download Csv</a> --}}
            @can('isAdmin')
            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#add-staff-modal" class="btn btn-info">
                <i class="fas fa-user-plus"></i>
                เพิ่มพนักงาน
            </a>
            @endcan
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="style-1 table" id="ListDatatableView">
                    <thead>
                        <tr>
                            <th class="text-center align-middle">#</th>
                            <th class="text-center align-middle">ชื่อผู้ใช้</th>
                            <th class="text-center align-middle">ตำแหน่ง</th>
                            <th class="text-center align-middle">ดำเนินการ</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $i = 0;
                        @endphp
                        @foreach ($users as $user)
                            <tr>
                                <td class="text-center align-middle">
                                    {{ ++$i }}.
                                </td>
                                <td class="text-center align-middle">
                                    {{ $user->username }}
                                </td>
                                <td class="text-center align-middle">
                                    <span class="badge badge-warning">พนักงาน</span>
                                </td>
                                <td class="text-center align-middle">
                                    <a href="#" class="btn btn-primary shadow btn-xs sharp me-1">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <a href="#" class="btn btn-danger shadow btn-xs sharp">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="add-staff-modal">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <form onsubmit="storeStaff(event, this)" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">เพิ่มพนักงาน</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">ชื่อผู้ใช้</label>
                        <input type="text" class="form-control input-default" name="username" placeholder="Please Fill Staff Username" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">รหัสผ่าน</label>
                        <input type="password" class="form-control input-default" name="password" placeholder="Please Fill Staff Password" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">ปิด</button>
                    <button type="submit" class="btn btn-primary">เพิ่มพนักงาน</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {

        });

        async function storeStaff(event, el)
        {
            event.preventDefault();
            const self = $(el);

            const execute = await axios.post(`{{ route('admin.staff.store') }}`, self.serialize());

            const response = execute.data;

            return storeStaffResponseHandler(response);
        }

        function storeStaffResponseHandler(response)
        {
            if (!response.success) return swal('Error!', response.message, 'error');

            return swal('success!', ' ', 'success').then(() => {
                location.reload();
            });
        }
    </script>
@endsection