@section('css')
    @parent
    <style>
        .modal-xl {
            max-width: 1140px;
        }
    </style>
@stop

@section('js')
    @parent
    <script>
        function userCreatePopUp(role) {
            // console.log(role)
            $('#id_create').val('')
            $('#name_create').val('')
            $('#class_create').val('')
            $('#leader_create').val('')
            $('#exp_op_create').val('')
            $('#unit_create').val('')
            $('#account_create').val('')
            $('#status_create').val('0')
            // $('#roles') 是一個select 將 res.roles中的每一個role.id當作value role.display_name當作名稱 塞入option中 並將res.user.roles[0].id = role.id 的先selected
            $('#roles_create').empty()
            $('#roles_create').append(`<option value="">請選擇群組</option>`)
            $.each(role, function(index, value) {
                console.log(value.display_name)
                $('#roles_create').append(`<option value="${value.id}">${value.display_name}</option>`)
            })
            $('#createBtn').attr('onclick', 'createUser()')
            $('#userCreatePopUp').modal('show')

        }

        function createUser() {
            // Get form data
            let formData = $("#createUser").serialize();

            // Perform Ajax request
            $.ajax({
                url: "{{ route('api.user.store') }}", // Replace with your actual endpoint
                type: "POST",
                data: formData,
                success: function(response) {
                    // Check response and show appropriate message
                    if (response.success) {
                        // Show success alert
                        Swal.fire({
                            icon: 'success',
                            title: '新增成功',
                            text: response.success
                        });

                        // Close the modal
                        $("#createUser").modal("hide");
                        userManagerTable.ajax.reload(null, false);
                    } else {
                        // Show error alert with the error message
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message
                        });
                    }
                },
                error: function(xhr, status, error) {
                    // Show error alert with the error details
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'An error occurred. Please try again.'
                    });
                }
            });
        }
    </script>

@endsection
<!-- Modal -->

<div class="modal fade" id="userCreatePopUp" tabindex="-1" aria-labelledby="userCreatePopUpLabel" aria-modal="true"
    role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4" id="userCreatePopUpLabel">新增使用者</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="createUser" class="row">
                    <!-- Your form fields here -->
                    <div class="form-group col-4">
                        <label for="name_create">姓名</label>
                        <input type="text" class="form-control" id="name_create" name="name">
                    </div>

                    <div class="form-group col-4">
                        <label for="class_create">職級</label>
                        <input type="text" class="form-control" id="class_create" name="class">
                    </div>

                    <div class="form-group col-4">
                        <label for="leader_create">單位代碼</label>
                        <input type="text" class="form-control" id="leader_create" name="leader">
                    </div>

                    <div class="form-group col-4">
                        <label for="exp_op_create">員警代碼</label>
                        <input type="text" class="form-control" id="exp_op_create" name="exp_op">
                    </div>

                    <div class="form-group col-4">
                        <label for="account_create">帳號</label>
                        <input type="text" class="form-control" id="account_create" name="account">
                    </div>

                    <div class="form-group col-4">
                        <label for="unit_create">單位</label>
                        <select class="form-control" id="unit_create" name="unit">
                            @foreach (\App\Class\StaticData::$unit as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                            <!-- Add more options as needed -->
                        </select>
                    </div>

                    <div class="form-group col-4">
                        <label for="roles_create">管理群組</label>
                        <select class="form-control" id="roles_create" name="role">
                            <!-- Add more options as needed -->
                        </select>
                    </div>

                    <div class="form-group col-4">
                        <label for="status_create">帳號狀態</label>
                        <select class="form-control" id="status_create" name="status">
                            <option value="0">啟用</option>
                            <option value="1">停用</option>
                            <!-- Add more options as needed -->
                        </select>
                    </div>
                    <div>
                        <hr>
                    </div>
                    <div class="form-group row">
                        <!-- Add more options as needed -->

                        @foreach ($equipments as $key => $equipment)
                            <div class="col-6 mt-3 p-c-g-{{ $key }}">
                                <div class="row">
                                    <p>{{ $equipments_title[$key] }}</p>
                                    @foreach ($equipment as $key2 => $value)
                                        <div class="form-check checkbox-lg col-6">
                                            <label class="form-check-label"
                                                for="equipment-manage-create-{{ "$key-$value->id" }}">({{ $value->serialnumber }})
                                                {{ $value->short_name }}</label>
                                            <input class="form-check-input permission-check {{ "$key" }}"
                                                type="checkbox" id="equipment-manage-create-{{ "$key-$value->id" }}"
                                                name="device[]" value="{{ $value->serialnumber }}" />
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach

                    </div>
                    <div class="form-group col-12 text-center mt-3">
                        <button type="button" class="btn btn-primary" id="createBtn">新增</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>