@extends('admin.admin_dashboard')
@section('admin')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.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:;" class="breadcrumb-icon"><i class="bx bx-home-alt"></i></a>
                    </li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Add Permission</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card glass-card border-0 shadow-lg">
        <div class="card-body p-5">
            <h3 class="fw-bold text-center text-primary mb-4">✨ Add New Permission</h3>
            <form id="myForm" action="{{ route('store.permission') }}" method="post" class="row g-4" enctype="multipart/form-data">
                @csrf

                <!-- Permission Name -->
                <div class="form-group col-md-6">
                    <label for="input1" class="form-label fw-bold text-dark">🔖 Permission Name</label>
                    <input type="text" name="name" class="form-control custom-input" id="input1" placeholder="Enter permission name">
                </div>

                <!-- Group Name -->
                <div class="form-group col-md-6">
                    <label for="group_name" class="form-label fw-bold text-dark">📂 Group Name</label>
                    <select class="form-select custom-select select2" id="group_name" name="group_name">
                        <option disabled selected>Choose a group...</option>
                        @foreach ($groups as $group)
                            <option value="{{ $group->group_name }}" {{ old('permission_group') == $group->group_name ? 'selected' : '' }}>
                                {{ $group->group_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Submit Button -->
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn save-btn">
                        <i class="bx bx-save" style="font-size: 1.4rem;"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Styles for Enhanced UI/UX -->
<style>
    /* Glassmorphism Effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease-in-out;
    }

    .glass-card:hover {
        transform: scale(1.03);
        box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.2);
    }

    /* Custom Input & Select2 Styling */
    .custom-input, .select2-container--default .select2-selection--single {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 14px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.85);
        transition: all 0.3s ease-in-out;
        height: 50px; /* Ensuring the same height */
    }

    /* Select2 Adjustments */
    .select2-container--default .select2-selection--single {
        display: flex;
        align-items: center;
        height: 50px !important;
        width: 100% !important; /* Ensures Select2 occupies full width */
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 50px !important;
        padding-left: 15px;
        color: #333;
        font-weight: 500;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 50px !important;
        right: 12px;
    }

    .custom-input:focus, .select2-container--default .select2-selection--single:focus {
        border-color: #007bff;
        box-shadow: 0px 0px 12px rgba(0, 123, 255, 0.5);
    }

    /* Save Button */
    .save-btn {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        border-radius: 12px;
        padding: 14px 28px;
        font-size: 1.2rem;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        transition: all 0.3s ease-in-out;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 6px 16px rgba(0, 123, 255, 0.4);
    }

    .save-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0px 12px 28px rgba(0, 123, 255, 0.5);
    }

    /* Breadcrumb Icon Animation */
    .breadcrumb-icon i {
        font-size: 1.4rem;
        color: #007bff;
        transition: all 0.3s ease-in-out;
    }

    .breadcrumb-icon i:hover {
        color: #0056b3;
        transform: scale(1.3);
    }
</style>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            width: '100%', // Ensuring it fits the form design
            placeholder: "Choose a group...",
            allowClear: true
        });
    });
</script>

@endsection