@extends('admin.layouts.main')
@section('title', 'Tambah Pengguna')

@section('content')

<div class="container-fluid mt-4">
    <div class="card border-0 shadow-sm mb-4 top-card">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <h3 class="fw-bold mb-1">
                    Tambah Pengguna
                </h3>
                <small>
                    Form penambahan data pengguna sistem
                </small>
            </div>
            <div>
                <i class="bi bi-person-plus-fill header-icon"></i>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-11">
            <div class="card border-0 shadow-sm form-card">
                <div class="card-body p-4 p-lg-5">
                    <form action="/dashboard-pengguna" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label">
                                Nama Lengkap
                            </label>
                            <input type="text"
                                class="form-control form-modern @error('name') is-invalid @enderror"
                                name="name"
                                value="{{ old('name') }}"
                                placeholder="Masukkan nama lengkap">
                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Email
                            </label>
                            <input type="email"
                                class="form-control form-modern @error('email') is-invalid @enderror"
                                name="email"
                                value="{{ old('email') }}"
                                placeholder="Masukkan email">
                            @error('email')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                No Handphone
                            </label>
                            <input type="text"
                                class="form-control form-modern @error('phone') is-invalid @enderror"
                                name="phone"
                                value="{{ old('phone') }}"
                                placeholder="08xxxxxxxxxx">
                            @error('phone')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Role
                            </label>
                            <select
                                class="form-select form-modern @error('role') is-invalid @enderror"
                                name="role">
                                <option value="">
                                    -- Pilih Role --
                                </option>
                                <option value="admin"
                                    {{ old('role') == 'admin' ? 'selected' : '' }}>
                                    Admin
                                </option>
                                <option value="pelanggan"
                                    {{ old('role') == 'pelanggan' ? 'selected' : '' }}>
                                    Pelanggan
                                </option>
                            </select>
                            @error('role')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Kata Sandi
                            </label>
                            <div class="input-group">
                                <input type="password"
                                    class="form-control form-modern @error('password') is-invalid @enderror"
                                    name="password"
                                    id="password"
                                    placeholder="Masukkan kata sandi">
                                <span class="input-group-text password-toggle">
                                    <i class="bi bi-eye-slash toggle-password"
                                        toggle="#password"
                                        style="cursor:pointer;"></i>
                                </span>
                            </div>
                            @error('password')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="form-label">
                                Konfirmasi Kata Sandi
                            </label>
                            <div class="input-group">
                                <input type="password"
                                    class="form-control form-modern @error('password_confirmation') is-invalid @enderror"
                                    name="password_confirmation"
                                    id="password_confirmation"
                                    placeholder="Konfirmasi kata sandi">
                                <span class="input-group-text password-toggle">
                                    <i class="bi bi-eye-slash toggle-password"
                                        toggle="#password_confirmation"
                                        style="cursor:pointer;"></i>
                                </span>
                            </div>
                            @error('password_confirmation')
                                <div class="invalid-feedback d-block">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="d-flex gap-3 mt-4">
                            <button type="submit" class="btn btn-save">
                                <i class="bi bi-check-circle me-1"></i>
                                Simpan
                            </button>
                            <a href="/dashboard-pengguna"
                                class="btn btn-back">
                                Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body,
    .content-wrapper,
    .main-content,
    .page-wrapper,
    .container-fluid,
    main{
        background:#F8F5EF !important;
        min-height:100vh;
    }
    .top-card{
        background:#FFFFFF !important;
        border:1px solid #E9DDC8;
        border-radius:34px !important;
        overflow:hidden;
        box-shadow:
            0 12px 35px rgba(0,0,0,.06);
        position:relative;
    }
    .top-card::before{
        content:"";
        position:absolute;
        right:-100px;
        top:-100px;
        width:240px;
        height:240px;
        border-radius:50%;
        background:
            radial-gradient(
                rgba(200,154,75,.12),
                transparent 70%
            );
    }
    .top-card h3{
        color:#2B2B2B;
        font-size:42px;
        font-weight:700;
    }
    .top-card small{
        color:#7A6C57;
    }
    .header-icon{
        font-size:42px;
        color:#C89A4B;
    }
    .form-card{
        background:#FFFFFF !important;
        border:1px solid #E9DDC8;
        border-radius:34px !important;
        box-shadow:
            0 12px 35px rgba(0,0,0,.05);
    }
    .form-label{
        color:#2B2B2B;
        font-weight:600;
        margin-bottom:10px;
    }
    .form-modern{
        height:58px;
        border-radius:18px !important;
        background:#FFFFFF !important;
        border:1px solid #E5D7C1 !important;
        color:#333 !important;
        padding:14px 20px;
    }
    .form-modern::placeholder{
        color:#9B8F80;
    }
    .form-modern:focus{
        border-color:#C89A4B !important;
        box-shadow:
            0 0 0 4px rgba(200,154,75,.12)!important;
        background:#fff !important;
    }
    select.form-modern{
        color:#333 !important;
    }
    .password-toggle{
        background:#FFFFFF !important;
        border:1px solid #E5D7C1 !important;
        border-left:none !important;
        border-radius:0 18px 18px 0 !important;
        color:#C89A4B;
    }
    .password-toggle:hover{
        background:#F8F5EF !important;
    }
    .btn-save{
        background:#C89A4B;
        color:#fff;
        border:none;
        border-radius:16px;
        padding:14px 30px;
        font-weight:600;
        transition:.3s;
    }
    .btn-save:hover{
        background:#B88437;
        transform:translateY(-2px);
        box-shadow:
            0 12px 24px rgba(200,154,75,.25);
    }
    .btn-back{
        background:#EFE5D3;
        color:#5B5145;
        border:none;
        border-radius:16px;
        padding:14px 30px;
        font-weight:600;
        transition:.3s;
    }
    .btn-back:hover{
        background:#E5D6BB;
        transform:translateY(-2px);
    }
    @media(max-width:768px){
        .top-card h3{
            font-size:30px;
        }
        .form-card{
            border-radius:24px !important;
        }
        .btn-save,
        .btn-back{
            width:100%;
        }
        .d-flex.gap-3{
            flex-direction:column;
        }
    }
</style>

@endsection

@push('scripts')
<script>
    document.querySelectorAll('.toggle-password')
    .forEach(function (icon) {

        icon.addEventListener('click', function () {

            const input = document.querySelector(
                icon.getAttribute('toggle')
            );

            input.type =
                input.type === 'password'
                ? 'text'
                : 'password';

            icon.classList.toggle('bi-eye');
            icon.classList.toggle('bi-eye-slash');
        });

    });
</script>
@endpush