{{-- To attain knowledge, add things every day; To attain wisdom, subtract things every day. --}}
<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">User Management</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url('index') }}">
                    Home </a>
            </li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">User Management</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Registration</h4>
                </div>
                <div class="card-body">
                    <form wire:submit="save">

                        @error('email')
                            <div class="row mb-3">
                                <span class=" text-red-500">{{ $message }}</span>
                            </div>
                        @enderror

                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <input type="text" class="form-control" placeholder="Fullname" wire:model="fullname">
                            </div>
                            <div class="col-sm-6">
                                <input type="email" class="form-control" placeholder="Email" wire:model="email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <input type="password" class="form-control" placeholder="Password"
                                    wire:model="password">
                            </div>
                            <div class="col-sm-6 ">

                                <div x-data x-init="const el = $refs.site;
                                
                                $(el).select2({
                                    placeholder: 'All Sites',
                                    allowClear: true,
                                    width: '100%',
                                    closeOnSelect: false, // keeps dropdown open for multiple selections
                                    dropdownParent: $(el).parent() // helps if inside modal or Livewire
                                });
                                
                                // when user selects or unselects items
                                $(el).on('change', () => {
                                    $wire.set('siteDraft', $(el).val(), true);
                                });
                                
                                // set preselected values
                                $nextTick(() => {
                                    $(el).val(@js($siteDraft)).trigger('change.select2');
                                });"
                                    x-on:refresh-select2.window="
            $( $refs.site ).select2('destroy'); 
            $( $refs.site ).select2({
                placeholder: 'All Sites',
                allowClear: true,
                width: '100%',
                closeOnSelect: false,
                dropdownParent: $( $refs.site ).parent()
            });
            $( $refs.site ).val(@js($siteDraft)).trigger('change.select2');
        "
                                    wire:ignore>
                                    <select x-ref="site" class="form-select" multiple>
                                        @foreach ($this->sites as $s)
                                            <option value="{{ $s->site_server_id }}">{{ $s->site_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

</div>