@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Create New User</h5>
            </div>
            <div class="card-body">

                <a href="{{ route('membership.users.index') }}" class="btn btn-light btn-xs"><span class="d-flex"><span
                            class="btn-label-icon"><i class="fa fa-arrow-circle-left pe-1"></i></span>
                        Daftar User</span></a>
                <hr>
                @if (count($errors) > 0 && !$errors->has('password') && !$errors->has('confirm-password'))
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br />
                        <br />
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                {!! Form::open(['route' => 'membership.users.store', 'method' => 'POST']) !!}
                <div class="tab-content">
                    {{-- Field Nomor Induk --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">NIP / NIK</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::text('nomor_induk', null, ['placeholder' => 'NIP / NIK', 'class' => 'form-control']) !!}
                            @error('nomor_induk')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    {{-- Field Nama --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">Nama</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::text('name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
                            @error('name')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    {{-- Field Perangkat Daerah --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">Perangkat Daerah</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::select(
                                'perangkat_daerah_id',
                                $perangkatDaerahs,
                                [],
                                ['class' => 'form-control select2', 'placeholder' => 'Pilih Perangkat Daerah'],
                            ) !!}
                            @error('perangkat_daerah_id')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    {{-- Field Password --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">Password</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::password('password', ['placeholder' => 'Password', 'class' => 'form-control']) !!}
                            @error('password')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    {{-- Field Konfirmasi Password --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">Konfirmasi Password</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::password('confirm-password', ['placeholder' => 'Confirm Password', 'class' => 'form-control']) !!}
                            @error('confirm-password')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    {{-- Field Role --}}
                    <div class="row mb-3">
                        <label class="col-sm-3 col-md-2 col-lg-3 col-xl-2 col-form-label">Role</label>
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            {!! Form::select('roles[]', $roles, [], ['class' => 'form-control select2', 'multiple']) !!}
                            @error('roles')
                                <div class="text-danger mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <button id="btn-submit-edit-profile" type="submit" name="submit" value="submit"
                                class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    {{-- Memuat Select2 CDN --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            // Menginisialisasi Select2 pada semua elemen dengan class 'select2'
            $('.select2').select2();
        });
    </script>
@endpush