@extends('layouts.admin')

@section('title')
    Tambah Pengguna
@endsection

@section('container')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i data-feather="user-plus"></i></div>
                                Tambah Pengguna
                            </h1>
                        </div>
                        <div class="col-12 col-xl-auto mb-3">
                            <a class="btn btn-sm btn-light text-primary" href="{{ route('user.index') }}">
                                <i class="me-1" data-feather="arrow-left"></i>
                                Kembali ke Semua Pengguna
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-xl px-4 mt-4">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Account details card-->
                    <div class="card mb-4">
                        <div class="card-header">Tambah Pengguna Baru</div>
                        <div class="card-body">
                            <div id="loading-overlay">
                                <div id="loader"></div>
                                <p id="loading-message">Sedang menyimpan data..</p>
                            </div>
                            <form action="{{ route('user.store') }}" method="POST" enctype="multipart/form-data" autocomplete="off" id="form-data">
                                @csrf
                                <!-- Form Row-->
                                <div class="row gx-3 mb-3">
                                    <!-- Form Group (first name)-->
                                    <div class="col-md-6">
                                        <label class="small mb-1" for="name">Nama</label>
                                        <input class="form-control @error('name') is-invalid @enderror" name="name" type="text" value="{{ old('name') }}" placeholder="Masukan Nama.." required/>
                                        @error('name')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row gx-3 mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1" for="email">E-Mail</label>
                                        <input class="form-control @error('email') is-invalid @enderror" name="email" type="text" value="{{ old('email') }}" placeholder="Masukan E-Mail.." required/>
                                        @error('email')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <!-- Form Group (Password)-->
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1" for="password">Password</label>
                                        <input class="form-control @error('password') is-invalid @enderror" name="password" type="password" placeholder="Masukan Password.."  required/>
                                        @error('password')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div>   
                                </div>
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1" for="confirm_password">Ulangi Password</label>
                                        <input class="form-control @error('confirm_password') is-invalid @enderror" name="confirm_password" type="password" placeholder="Ulangi Password.."  required/>
                                        @error('confirm_password')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div>   
                                </div>
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1">Wilayah</label>
                                        <select class="form-select selectx @error('area') is-invalid @enderror" name="area">
                                            <option selected disabled>Pilih..</option>
                                            <option value="Palu" {{ (old('area') == 'Palu')?'selected':'' }}>Palu</option>
                                            <option value="Luwuk" {{ (old('area') == 'Luwuk')?'selected':'' }}>Luwuk</option>
                                            <option value="Bitung" {{ (old('area') == 'Bitung')?'selected':'' }}>Bitung</option>
                                            <option value="Ternate" {{ (old('area') == 'Ternate')?'selected':'' }}>Ternate</option>
                                            <option value="Poso" {{ old('area') == 'Poso' ? 'selected':'' }}>Poso</option>
                                            <option value="Morowali" {{ old('area') == 'Morowali' ? 'selected':'' }}>Morowali</option>
                                            <option value="Toli-Toli" {{ old('area') == 'Toli-Toli' ? 'selected':'' }}>Toli-Toli</option>
                                        </select>
                                        <small>Kosongkan jika tidak ingin diisi</small>
                                        @error('area')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div> 
                                </div>
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1">Divisi</label>
                                        <select class="form-select selectx @error('divisi') is-invalid @enderror" name="divisi" id="divisi">
                                            <option selected disabled>Pilih..</option>
                                            <option value="Maintenance" {{ (old('divisi') == 'Maintenance')?'selected':'' }}>Maintenance</option>
                                            <option value="PO Non Rutin" {{ (old('divisi') == 'PO Non Rutin')?'selected':'' }}>PO Non Rutin</option>
                                            <option value="SCD Mobile" {{ (old('divisi') == 'SCD Mobile')?'selected':'' }}>SCD Mobile</option>
                                            <option value="Operasional Bantek" {{ (old('divisi') == 'Operasional Bantek')?'selected':'' }}>Operasional Bantek</option>
                                        </select>
                                        <small>Kosongkan jika tidak ingin diisi</small>
                                        @error('divisi')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div> 
                                </div>
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1">Role</label>
                                        <select class="form-select selectx @error('roles') is-invalid @enderror" name="roles" aria-label="Default select example">
                                            <option selected disabled>Select a role:</option>
                                            <option value="Admin" {{ (old('roles') == 'Admin')?'selected':'' }}>Admin</option>
                                            <option value="User" {{ (old('roles') == 'User')?'selected':'' }}>User</option>
                                            <option value="Manager" {{ (old('roles') == 'Manager')?'selected':'' }}>Manager</option>
                                            <option value="SPV" {{ (old('roles') == 'SPV')?'selected':'' }}>SPV</option>
                                        </select>
                                        @error('roles')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div> 
                                </div>
                                <div class="mb-3">
                                    <div class="col-md-6">
                                        <label class="small mb-1">Status Akun</label>
                                        <select class="form-control @error('is_active') is-invalid @enderror" name="is_active" id="is_active" required>
                                            <option selected disabled>Pilih..</option>
                                            <option value="1" {{ (old('is_active') == '1')?'selected':'' }}>Aktif</option>
                                            <option value="0" {{ (old('is_active') == '0')?'selected':'' }}>Non Aktif</option>
                                        </select>
                                        @error('is_active')
                                            <div class="invalid-feedback">
                                                {{ $message; }}
                                            </div>
                                        @enderror
                                    </div> 
                                </div>
                                <!-- Submit button-->
                                <button class="btn btn-primary" type="submit">
                                    Tambah Pengguna Baru
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('addon-style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.1.1/dist/select2-bootstrap-5-theme.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link href="{{ url('admin/css/loader.css') }}" rel="stylesheet" />
@endpush

@push('addon-script')
  <script src="{{ url('admin/js/loader.js') }}"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script>
    $(".selectx").select2({
        theme: "bootstrap-5",
        width: "100%",
    });
  </script>
@endpush