@extends('dashboard.base')

@section('content')
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Create Institute</h4>
                    </div>
                    <div class="card-body">
                        @if(session()->has('success'))
                        <div class="alert alert-success" role="alert">
                            <strong></strong> {{ session()->get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @endif

                        @if(session()->has('error'))
                        <div class="alert alert-danger" role="alert">
                            <strong></strong> {{ session()->get('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @endif
                        <form id="AddInstituteForm" name="addInstituteForm" action="{{ env('APP_URL', '')}}/add-institute" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group row ">
                                <div class="col-sm-6 required">
                                    <input type="text" autocomplete="off" class="form-control" value="" name="institute_name" placeholder="Name">
                                </div>

                                <div class="col-sm-6 required">
                                    <input type="text" class="form-control" value="" name="institute_email" placeholder="Email">
                                </div>

                            </div>
                            <div class="form-group row" id="mini_div">
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" autocomplete="off" name="institute_contact" placeholder="Contact no.">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" autocomplete="off" id="admin" name="admin" placeholder="Admin Name">
                                </div>
                            </div>
                            <div class="form-group row" id="mini_div">
                                <div class="col-sm-6">
                                    <input type="password" class="form-control" autocomplete="off" id="password" name="password" placeholder="Password">
                                </div>
                                <div class="col-sm-6">
                                    
                                    <label for="logo">Logo</label>
                                    <div>
                                    <input type="file" class="form-control" autocomplete="off" id="logo" name="logo" placeholder="Logo" style="padding-bottom:34px;color:black;">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="mini_div">
                                <div class="col-sm-6">
                                    

                                    
                                    <label for="logo">Splash Logo</label>
                                    <div>
                                    <input type="file" class="form-control" autocomplete="off" id="splashlogo" name="splashlogo" placeholder="splash Logo" style="padding-bottom:34px;color:black;">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <input type="color" id="colorpicker" name="color" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$">

                                    <input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" id="hexcolor"  ></input>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    <label for="institute_type">Select type of institute:</label>
                                    <select name="institute_type" id="institute" class="form-control">
                                        <option class="form-control" selected>Select_Institute</option>
                                        <option value="university" class="form-control">University</option>
                                        <option value="school" class="form-control">school</option>

                                    </select>
                                </div>
                                <div class="col-sm-6">
                                    <label for="subscription_type">Select type of subscription:</label>
                                    <select name="subscription_type" id="subscription" class="form-control">
                                        <option class="form-control" selected>Subscription_type</option>
                                        <option value="nolimit" class="form-control">No Limit</option>
                                        <option value="500 User" class="form-control">500 User</option>
                                        <option value="200 User" class="form-control">200 User</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" autocomplete="off" id="domain" name="domain" placeholder="Domain Name">
                                </div>

                                
                            </div>
                            <div>
                            <p id="domainError" style="color:red; display:none;">This Domain Name is already exits.</p>
                            </div>
                            <div>
                                <p class="success-msg" style="display:none;color:green;"> Institute Created Succesfully
                                </p>
                            </div>
                            <button class="btn btn-success" type="submit">Save</button>
                            <a href="{{route('index')}}" class="btn btn-primary">Cancel</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    /// for color
    $('#colorpicker').on('input', function() {
        $('#hexcolor').val(this.value);
    });
    $('#hexcolor').on('input', function() {
        $('#colorpicker').val(this.value);
    });
    //for white space
    jQuery.validator.addMethod("whiteSpace", function(value, element) {
        if (this.optional(element) || /^[ \s]/g.test(value)) {
            return false;
        } else {
            return true;
        }
    }, "Remove white space.");
    //for leter only
    jQuery.validator.addMethod("lettersonlys", function(value, element) {
        return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
    }, "Letters only please");
    ///for select
    $.validator.addMethod("valueNotEquals", function(value, element, arg) {
        return arg !== value;
    }, "Value must not equal arg.");
    jQuery.validator.addMethod("noSpace", function(value, element)
    	{ return value.indexOf(" ") < 0 && value != ""; }, "No space please and don't leave it empty");


    $(document).ready(function() {


        $("#AddInstituteForm").validate({
            rules: {
                errorClass: 'errors',

                institute_name: {
                    required: true,
                    minlength: 3,
                    maxlength: 30,
                    //lettersonlys: true,
                    whiteSpace: true

                },
                institute_email: {
                    required: true,
                    email: true,
                    whiteSpace: true
                },
                institute_contact: {
                    required: true,
                    digits: true,
                    // minlength: 10,
                    // maxlength: 10,
                    whiteSpace: true
                },
                admin: {
                    required: true,
                    //lettersonlys: true,
                    whiteSpace: true

                },
                password: {
                    required: true,
                    whiteSpace: true
                },
                logo: {
                    required: true,
                    whiteSpace: true,
                    extension: "jpg|jpeg|png",
                },
                splashlogo: {
                    required: true,
                    whiteSpace: true,
                    extension: "jpg|jpeg|png",
                },
                color: {
                    required: true,
                    whiteSpace: true
                },
                domain: {
                    required: true,
                    noSpace: true 

                },
                institute_type: {
                    valueNotEquals: "Select_Institute",
                },
                subscription_type: {
                    valueNotEquals: "Subscription_type",
                },

            },
            messages: {
                institute_name: {
                    required: "Please Enter  Name",
                },

                institute_email: {
                    required: "Please Enter  Email",
                },
                institute_contact: {
                    required: "Please Enter Contact Number",
                    Digits: "Please Enter Only Digits",

                },
                admin: {
                    required: "Please Enter Admin Name",
                },
                password: {
                    required: "Please Enter Password",
                },
                logo: {
                    required: "Please Choose Logo",
                    extension: "Please upload file in these format only (jpg, jpeg, png).",
                },
                splashlogo: {
                    required: "Please Choose Splash Logo",
                    extension: "Please upload file in these format only (jpg, jpeg, png).",
                },
                color: {
                    required: "Please Choose Color",
                },
                domain: {
                    required: "Please Enter Domain Name",
                },
                institute_type: {
                    valueNotEquals: "Please Choose One Option",
                },
                subscription_type: {
                    valueNotEquals: "Please Choose One Option",
                },



            }

        });
        ///
        var blogfrm = $('#AddInstituteForm');
        $(document).on("submit", "#AddInstituteForm", function(e) {



            e.preventDefault();
            var formData = new FormData(this);
            var value = $('#AddInstituteForm').val();


            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: blogfrm.attr('action'),
                dataType: 'text',
                cache: false,
                contentType: false,
                processData: false,
                data: formData,
                type: 'post',
                success: function(output) {

                    if (output == false) {
                        $('#domainError').show();
                        return false;
                    }
                    $('.success-msg').show();
                    $('#AddInstituteForm').trigger("reset");
                    window.location = 'institute-management';
                },
                error: function(err) {

                } 
            });
        });
    })
</script>
@endsection
@section('javascript')

@endsection