@extends('admin.admin_dashboard')
@section('admin')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex align-items-center mb-4" style="background: linear-gradient(45deg, #007bff, #0056b3); border-radius: 10px; color: white; padding: 10px 20px;">
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="javascript:;" style="color: white;"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page" style="color: white;">Add User</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <h4 class="mb-4 text-primary">Add New User</h4>
            <form id="myForm" action="{{ route('store.user') }}" method="post" class="row g-3" enctype="multipart/form-data">
                @csrf

                <div class="col-md-6">
                    <label class="form-label fw-bold">Username</label>
                    <input type="text" name="username" class="form-control shadow-sm" placeholder="Enter username" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Full Name</label>
                    <input type="text" name="name" class="form-control shadow-sm" placeholder="Enter full name" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Email Address</label>
                    <input type="email" name="email" class="form-control shadow-sm" placeholder="Enter email" required>
                </div>

                <div class="col-md-6">
<<<<<<< HEAD
                    <label for="append-toggle-single-field" class="form-label fw-bold">Role</label>
                    <select name="roles" id="append-toggle-single-field" class="form-select shadow-sm" required>
                        <option selected disabled>Select role</option>
=======
                    <label for="user-role" class="form-label fw-bold">Role</label>
                    <select name="roles" id="user-role" class="form-select chm-select shadow-sm" data-placeholder="Select role" required>
                        <option value="" disabled selected>Select role</option>
>>>>>>> origin/main
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                

                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary px-4 py-2 shadow rounded-pill">Save User</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .form-control, .form-select {
        border-radius: 8px;
        padding: 10px;
        font-size: 16px;
    }
    .btn-primary {
        background: linear-gradient(135deg, #28a745, #218838);
        border: none;
        transition: all 0.3s ease-in-out;
    }
    .btn-primary:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
    }
</style>
@endsection