@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"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt text-primary"></i></a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Add Roles</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <h5 class="mb-4 text-center text-primary">Add New Role</h5>
            <form id="myForm" action="{{ route('store.roles') }}" method="post" class="row g-3" enctype="multipart/form-data">
                @csrf
                <!-- Roles Name Input -->
                <div class="form-group col-md-6">
                    <label for="input1" class="form-label">Roles Name</label>
                    <input type="text" name="name" class="form-control shadow-sm rounded" id="input1" placeholder="Enter role name" required>
                </div>

                <!-- Save Button -->
                <div class="col-md-12">
                    <div class="d-md-flex d-grid align-items-center gap-3 justify-content-center">
                        <button type="submit" class="btn btn-primary px-4 py-2 shadow-sm rounded-pill save-btn">
                            <i class="bx bx-save"></i> Save Changes
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Styles -->
<style>
    /* Form Input Styling */
    .form-control {
        border-radius: 8px;
        border: 1px solid #ced4da;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
    }

    /* Save Button */
    .save-btn {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        transition: all 0.3s ease-in-out;
        font-size: 1.1rem;
    }

    .save-btn:hover {
        transform: scale(1.05);
        box-shadow: 0px 5px 20px rgba(0, 123, 255, 0.4);
    }

    /* Card Styling */
    .card {
        border-radius: 15px;
        border: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Form Title */
    h5 {
        font-weight: 600;
        color: #007bff;
    }

    /* Breadcrumb Styling */
    .breadcrumb-item a {
        color: #007bff;
        text-decoration: none;
    }

    .breadcrumb-item.active {
        color: #6c757d;
    }

    .breadcrumb {
        background: none;
        padding: 0;
    }

    .breadcrumb-item i {
        font-size: 1.2rem;
    }

    /* Input Focus */
    .form-control:focus {
        box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.6);
    }
</style>

@endsection