@extends('layouts.panel.index')
@section('title','Tambah Pengguna')
@include('admin.user._js.create')

@section('content')

<div class="clearfix mb-2">
    <div class="float-start">
        <a href="{{ route('admin.user')}}" class="text-primary btn-sm"><i class="fa-solid fa-arrow-left"></i><b> Kembali </b></a>
    </div>
    <div class="float-end">
        <h5><b>Tambah Pengguna</b></h5>
    </div>
</div>

<div class="card border-0">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="name" class="mb-1 fw-semibold">Nama <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="email" class="mb-1 fw-semibold">Email <span class="text-danger">*</span></label>
                    <input type="text" name="email" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="institution" class="mb-1 fw-semibold">Instansi <span class="text-danger">*</span></label>
                    <input type="text" name="institution" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="phone" class="mb-1 fw-semibold">No. Telepon <span class="text-danger">*</span></label>
                    <input type="text" name="phone" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="fax" class="mb-1 fw-semibold">No. Fax</label>
                    <input type="text" name="fax" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="password" class="mb-1 fw-semibold">Password </label>
                    <input type="password" name="password" class="form-control">
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="confirm_password" class="mb-1 fw-semibold">Konfirmasi Password </label>
                    <input type="password" name="confirm_password" class="form-control">
                </div>
            </div>
            <div class="col-md-12">
                <div class="mb-3">
                    <label for="address" class="mb-1 fw-semibold">Alamat <span class="text-danger">*</span></label>
                    <textarea name="address" rows="2" class="form-control" id="description-user"></textarea>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="level" class="mb-1 fw-semibold">Level </label>
                    <select name="level" id="level" class="form-control">
                        <option value="admin">Admin</option>
                        <option value="user">Pengguna</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="text-end">
            <button class="btn btn-success rounded btn-sm"><i class="fa-solid fa-floppy-disk"></i> Simpan</button>
            <a href="{{ route('admin.user')}}" class="btn btn-danger rounded btn-sm"><i class="fa-solid fa-xmark"></i> Batalkan</a>
        </div>
    </div>
</div>

<div class="modal fade" id="publish" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Publikasikan Pengguna</h1>
                <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success alert-outline alert-outline-coloured alert-dismissible user-select-none" role="alert">
                    <div class="alert-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                    </div>
                    <div class="alert-message">
                        <h6 class="mb-0"> Apakah anda yakin ingin mempublikasikan Pengguna ini ?</h6>
                        <small>Pengguna yang sudah dipublikasikan akan tampil pada halaman utama</small>
                    </div>
                </div>
                <div class="text-end">
                    <button type="button" class="btn btn-sm rounded btn-danger" data-bs-dismiss="modal"><i class="fa-solid fa-xmark"></i>   Batal</button>
                    <button type="button" class="btn btn-sm rounded btn-primary"><i class="fa-solid fa-paper-plane"></i> Publikasikan</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Container (Letakkan di bawah <body>) -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto" id="toast-title">Berhasil</strong>
                <small>Baru Saja</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toast-message">
                Pengguna berhasil ditambahkan!
            </div>
        </div>
    </div>
    
@endsection
@push('script')
<script src="{{ asset('vendor/file-upload/file-upload.min.js') }}"></script>
<script src="{{ asset('_func/admin/user/create.js') }}"></script>
@endpush