<div class="page-header">
    <h3 class="page-title">Add Project</h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="/projects" class="text-decoration-none">Projects</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Project</li>
        </ol>
    </nav>
</div>
<div class="card">
    <div class="card-body">
        <p class="card-description">Please provide the required information. * indicates required field.</p>
        <form class="forms-sample" id="myForm" method="post" action="/projects">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="name">Name *</label>
                        <input type="text" class="form-control" id="name" name="name"
                            placeholder="Please enter first name here">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="url">URL</label>
                        <input type="text" class="form-control" id="url" name="url"
                            placeholder="Please enter name here">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="primaryPerson">Primary Person</label>
                        <select id="primaryPerson" class="multi-select" name="primaryPerson[]" multiple="multiple" style="width: 100%;">
                            <%-dropdowns?.primaryPerson%>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="secondaryPerson">Secondary Person</label>
                        <select id="secondaryPerson" class="multi-select" name="secondaryPerson[]" multiple="multiple" style="width: 100%;">
                            <%-dropdowns?.secondaryPerson%>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-select rounded-0" id="status" aria-label="Default select example"
                            name="status">
                            <option selected value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-gradient-primary me-2">Submit</button>
            <a href="/projects" class="btn btn-light">Cancel</a>
        </form>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#myForm").validate({
            errorElement: 'span',
            errorClass: 'is-invalid',
            validClass: 'is-valid',
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
            },
            messages: {
                name: {
                    required: "Please enter your name.",
                    minlength: "Name must be at least 2 characters."
                },
            },
            success: function (label, element) {
                const $el = $(element);
                const value = $el.val().trim();

                if (value === '') {
                    $el.removeClass('is-valid');
                }
            },

            highlight: function (element) {
                $(element).removeClass('is-valid').addClass('is-invalid');
            },

            unhighlight: function (element) {
                const $el = $(element);
                const value = $el.val().trim();

                if (value !== '') {
                    $el.removeClass('is-invalid').addClass('is-valid');
                } else {
                    $el.removeClass('is-valid is-invalid');
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    });
</script>