@extends('layouts.app')

@section('content')

<div class="pengguna-form-page">

    {{-- =====================================================
         HEADER
    ====================================================== --}}

    <div class="form-header">

        <div>

            <h3 class="form-title">

                <i class="bi bi-person-plus me-2"></i>

                Tambah Pengguna

            </h3>

            <p class="form-subtitle">

                Tambahkan pengguna baru ke dalam sistem.

            </p>

        </div>

        <a
            href="{{ route('pengguna.index') }}"
            class="btn btn-secondary">

            <i class="bi bi-arrow-left me-1"></i>

            Kembali

        </a>

    </div>


    {{-- =====================================================
         ERROR VALIDATION
    ====================================================== --}}

    @if ($errors->any())

        <div class="alert alert-danger">

            <div class="fw-bold mb-2">

                <i class="bi bi-exclamation-triangle me-1"></i>

                Terjadi kesalahan:

            </div>

            <ul class="mb-0">

                @foreach ($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif


    {{-- =====================================================
         FORM CARD
    ====================================================== --}}

    <div class="card pengguna-form-card shadow-sm border-0">

        <div class="card-header bg-primary text-white">

            <i class="bi bi-person-plus-fill me-2"></i>

            Form Data Pengguna

        </div>


        <div class="card-body">

            <form
                action="{{ route('pengguna.store') }}"
                method="POST">

                @csrf


                {{-- =================================================
                     NAMA
                ================================================== --}}

                <div class="mb-3">

                    <label
                        for="nama"
                        class="form-label">

                        Nama

                    </label>

                    <input
                        type="text"
                        id="nama"
                        name="nama"
                        class="form-control @error('nama') is-invalid @enderror"
                        value="{{ old('nama') }}"
                        placeholder="Masukkan nama pengguna"
                        required>

                    @error('nama')

                        <div class="invalid-feedback">

                            {{ $message }}

                        </div>

                    @enderror

                </div>


                {{-- =================================================
                     USERNAME
                ================================================== --}}

                <div class="mb-3">

                    <label
                        for="username"
                        class="form-label">

                        Username

                    </label>

                    <input
                        type="text"
                        id="username"
                        name="username"
                        class="form-control @error('username') is-invalid @enderror"
                        value="{{ old('username') }}"
                        placeholder="Masukkan username"
                        required>

                    @error('username')

                        <div class="invalid-feedback">

                            {{ $message }}

                        </div>

                    @enderror

                </div>


                {{-- =================================================
                     EMAIL
                ================================================== --}}

                <div class="mb-3">

                    <label
                        for="email"
                        class="form-label">

                        Email

                    </label>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="form-control @error('email') is-invalid @enderror"
                        value="{{ old('email') }}"
                        placeholder="contoh@umts.ac.id"
                        required>

                    @error('email')

                        <div class="invalid-feedback">

                            {{ $message }}

                        </div>

                    @enderror

                </div>


                {{-- =================================================
                     PASSWORD
                ================================================== --}}

                <div class="mb-3">

                    <label
                        for="password"
                        class="form-label">

                        Password

                    </label>

                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-control @error('password') is-invalid @enderror"
                        placeholder="Masukkan password"
                        required>

                    @error('password')

                        <div class="invalid-feedback">

                            {{ $message }}

                        </div>

                    @enderror

                </div>


                {{-- =================================================
                     ROLE
                ================================================== --}}

                <div class="mb-4">

                    <label
                        for="role"
                        class="form-label">

                        Role

                    </label>

                    <select
                        id="role"
                        name="role"
                        class="form-select @error('role') is-invalid @enderror"
                        required>

                        <option value="">
                            -- Pilih Role --
                        </option>

                        <option
                            value="admin"
                            {{ old('role') == 'admin' ? 'selected' : '' }}>

                            Admin

                        </option>

                        <option
                            value="staff_lab"
                            {{ old('role') == 'staff_lab' ? 'selected' : '' }}>

                            Staff Laboratorium

                        </option>

                        <option
                            value="dosen_mahasiswa"
                            {{ old('role') == 'dosen_mahasiswa' ? 'selected' : '' }}>

                            Dosen / Mahasiswa

                        </option>

                    </select>

                    @error('role')

                        <div class="invalid-feedback">

                            {{ $message }}

                        </div>

                    @enderror

                </div>


                {{-- =================================================
                     BUTTON
                ================================================== --}}

                <div class="form-actions">

                    <button
                        type="submit"
                        class="btn btn-primary">

                        <i class="bi bi-save me-1"></i>

                        Simpan

                    </button>


                    <a
                        href="{{ route('pengguna.index') }}"
                        class="btn btn-secondary">

                        <i class="bi bi-x-circle me-1"></i>

                        Batal

                    </a>

                </div>

            </form>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE
====================================================== --}}

<style>

/* =====================================================
   PAGE
===================================================== */

.pengguna-form-page {

    width: 100%;

}


/* =====================================================
   HEADER
===================================================== */

.form-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}


.form-title {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.form-subtitle {

    margin: 5px 0 0;

    color: #6c757d;

    font-size: 13px;

}


/* =====================================================
   CARD
===================================================== */

.pengguna-form-card {

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    border-radius: 10px;

    overflow: hidden;

}


.pengguna-form-card .card-header {

    padding: 15px 20px;

    font-weight: 600;

}


.pengguna-form-card .card-body {

    padding: 25px;

}


/* =====================================================
   FORM
===================================================== */

.form-label {

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 7px;

}


.form-control,
.form-select {

    min-height: 43px;

    font-size: 14px;

}


textarea.form-control {

    min-height: 100px;

}


/* =====================================================
   BUTTON
===================================================== */

.form-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}


.form-actions .btn {

    min-width: 110px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991.98px) {

    .form-title {

        font-size: 21px;

    }


    .pengguna-form-card .card-body {

        padding: 20px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767.98px) {

    .form-header {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    .form-title {

        font-size: 20px;

    }


    .form-subtitle {

        font-size: 12px;

        line-height: 1.5;

    }


    .form-header .btn {

        width: 100%;

    }


    .pengguna-form-card {

        border-radius: 8px;

    }


    .pengguna-form-card .card-header {

        padding: 13px 15px;

        font-size: 14px;

    }


    .pengguna-form-card .card-body {

        padding: 15px;

    }


    .form-label {

        font-size: 13px;

    }


    .form-control,
    .form-select {

        min-height: 42px;

        font-size: 13px;

    }


    .form-actions {

        flex-direction: column;

    }


    .form-actions .btn {

        width: 100%;

        min-width: 0;

    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 575.98px) {

    .form-title {

        font-size: 18px;

    }


    .pengguna-form-card .card-body {

        padding: 12px;

    }


    .form-control,
    .form-select {

        font-size: 13px;

    }

}

</style>

@endsection