@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 School</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow border-0 rounded-lg">
        <div class="card-body p-4">
            <h5 class="mb-4 fw-bold text-primary">Add School</h5>
            
            <form id="myForm" method="POST" action="{{ route('add.school.store') }}" class="row g-3">
                @csrf

                <div class="form-group col-md-6">
                    <label for="school_name" class="form-label">School Name</label>
                    <input type="text" name="school_name" class="form-control" id="school_name" value="{{ old('school_name') }}">
                </div>

                <div class="form-group col-md-6">
                    <label for="school_contact" class="form-label">School Contact</label>
                    <input type="text" name="school_contact" class="form-control" id="school_contact" value="{{ old('school_contact') }}">
                </div>

                <div class="form-group col-md-12">
                    <label for="address" class="form-label">Address</label>
                    <textarea name="address" class="form-control" id="address" rows="3">{{ old('address') }}</textarea>
                </div>

                <div class="col-md-12 mt-3">
                    <div class="d-md-flex d-grid align-items-center gap-3">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bx bx-save me-2"></i> Save School
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- jQuery Validation -->
<script type="text/javascript">
    $(document).ready(function (){
        $('#myForm').validate({
            rules: {
                school_name: { required: true },
                address: { required: true },
                school_contact: {
                    required: true,
                    minlength: 9,
                    maxlength: 15,
                    digits: true
                },
            },
            messages: {
                school_name: { required: 'Please enter the school name' },
                address: { required: 'Please enter the school address' },
                school_contact: {
                    required: 'Please provide a school contact number',
                    minlength: 'Contact number must be at least 9 digits',
                    maxlength: 'Contact number must not exceed 15 digits',
                    digits: 'Only numbers are allowed for contact'
                },
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element) {
                $(element).removeClass('is-invalid');
            },
        });
    });
</script>
@endsection