@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-none d-sm-flex align-items-center mb-3"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add Guardian Category</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <!-- Card Section -->
    <div class="card shadow-lg border-0 rounded-3">
        <div class="card-body p-4">
            <h5 class="mb-4 text-primary">Add Guardian Category</h5>
            
            <form method="POST" action="{{ route('add.guardian.store') }}" class="row g-4">
                @csrf

                <!-- Guardian Field -->
                <div class="form-group col-md-6">
                    <label for="input1" class="form-label">Guardian</label>
                    <input type="text" name="guardian" class="form-control shadow-sm" id="input1" placeholder="Enter Guardian Name" required>
                </div>

                <!-- Submit Button -->
                <div class="col-md-12">
                    <div class="d-md-flex justify-content-start gap-3">
                        <button type="submit" class="btn btn-primary px-4 py-2 shadow-sm hover-shadow">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Card Section -->
</div>

@endsection

<style>
    /* Card Shadow and Hover Effects */
    .card.shadow-lg {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card.shadow-lg:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    /* Form Field Focus & Border */
    .form-control {
        transition: border-color 0.3s ease;
        border-radius: 8px;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25);
    }

    /* Button Hover Effects */
    .btn-primary {
        transition: all 0.3s ease;
        background-color: #007bff;
        padding: 10px 25px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Form Spacing and Layout */
    .row.g-4 {
        margin-left: -15px;
        margin-right: -15px;
    }

    .form-label {
        font-weight: 600;
        color: #333;
    }

    /* Small Screens */
    @media (max-width: 576px) {
        .card-body {
            padding: 1.5rem;
        }
        .btn-primary {
            font-size: 0.9rem;
            padding: 8px 20px;
        }
    }
</style>