@extends('admin.admin_dashboard')
@section('admin')
<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
                    <!-- Changed breadcrumb color for "Edit Roles" -->
                    <li class="breadcrumb-item active text-info" aria-current="page">Edit Roles</li>
                </ol>
            </nav>
        </div>
        <div class="ms-auto">
            <a href="{{ route('all.roles') }}" class="btn btn-secondary px-4 py-2 shadow rounded-pill back-btn">
                <i class="bx bx-arrow-back" style="font-size: 1.2rem;"></i> Back to Roles
            </a>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-lg border-0">
        <div class="card-body p-4">
            <h5 class="fw-bold text-primary mb-4 text-center">Edit Role</h5>
            <form id="myForm" action="{{ route('update.roles') }}" method="post" class="row g-3" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ $roles->id }}">

                <div class="form-group col-md-12 col-lg-6">
                    <label for="input1" class="form-label">Role Name</label>
                    <input type="text" name="name" class="form-control" id="input1" value="{{ $roles->name }}" required>
                </div>

                <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-success px-4 py-2 shadow rounded-pill save-btn">
                            <i class="bx bx-save"></i> Save Changes
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- Custom Styles -->
<style>
    /* Improved Breadcrumb styling */
    .page-breadcrumb {
        background: linear-gradient(135deg, #007bff, #0056b3);
        color: white;
        border-radius: 10px;
        padding: 10px 20px;
    }

    /* Active breadcrumb item color */
    .breadcrumb-item.active {
        color: #17a2b8; /* Light blue color for active breadcrumb item */
        font-weight: bold;
    }

    .back-btn {
        background: #f8f9fa;
        color: #007bff;
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .back-btn:hover {
        background: #007bff;
        color: white;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    }

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

    .card-body {
        background: #ffffff;
    }

    .form-control {
        border-radius: 8px;
        border: 1px solid #ccc;
        transition: all 0.3s;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    }

    .save-btn {
        background: linear-gradient(135deg, #28a745, #218838);
        color: white;
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .save-btn:hover {
        background: #218838;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }

    /* Responsiveness */
    @media (max-width: 768px) {
        .page-breadcrumb {
            padding: 8px 15px;
        }

        .back-btn {
            font-size: 1rem;
            padding: 8px 15px;
        }

        .card-body {
            padding: 2rem;
        }

        .form-group.col-md-12 {
            margin-bottom: 1rem;
        }

        .save-btn {
            width: 100%;
            text-align: center;
        }

        .text-center {
            text-align: center !important;
        }
    }
</style>

@endsection