@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>Edit Institute</h4>
                    </div>
                    <div class="card-body">

                        <form id="editInstituteForm" name="editInstituteForm"
                            action="{{ env('APP_URL', '')}}/update-institute/{{ $user->id }}" method="post"
                            enctype="multipart/form-data">
                            @csrf

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

                                <div class="col-sm-6 required">
                                    <!-- <label class="control-label">Child Lastname</label> -->
                                    <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">
                                    <!--   <label class="control-label">Parent Email Address</label> -->
                                    <input type="text" class="form-control" autocomplete="off" name="institute_contact"
                                        placeholder="Contact no." value=''>
                                </div>
                                <div class="col-sm-6">
                                    <!--    <label class="control-label">Child Email Address</label> -->
                                    <input type="text" class="form-control" autocomplete="off" id="admin" name="admin"
                                        placeholder="Admin" value=''>
                                </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" value='<?php// echo $user->password; ?>'>
                                </div> -->
                                <div class="col-sm-6">
                                    <div style="display: flex;flex-direction: column;">
                                        <label class="control-label">Logo</label>
                                        <img src="{{ env('ASSET_URL', '')}}/public/" alt="logo"
                                            style="width: 100px;">
                                    </div>

                                    <input type="file" class="form-control" autocomplete="off" id="logo" name="logo"
                                        placeholder="Logo">

                                </div>
                            </div>
                            <div class="form-group row" id="mini_div">
                                <div class="col-sm-6">
                                    <div style="display: flex;flex-direction: column;">
                                        <label class="control-label">Splash logo</label>
                                        <img src="{{ env('ASSET_URL', '')}}/public/"
                                            alt="splash logo" style="width: 100px;">
                                    </div>
                                    <input type="file" class="form-control" autocomplete="off" id="splashlogo"
                                        name="splashlogo" placeholder="splash Logo">
                                </div>
                                <div class="col-sm-6">
                                    <input type="color" id="colorpicker" name="color"
                                        pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                        value=''>

                                    <input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
                                        value='' id="hexcolor" name="color"></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 value="">
                                            </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 value="">
                                            </option>
                                        <option value="nolimit" class="form-control">nolimit</option>
                                        <option value="500User" class="form-control">500 User</option>
                                        <option value="200User" 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"
                                        value='' readonly>
                                </div>
                            </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>
@endsection
@section('javascript')
<script>
$('#colorpicker').on('input', function() {
    $('#hexcolor').val(this.value);
});
$('#hexcolor').on('input', function() {
    $('#colorpicker').val(this.value);
});
$("#institute option").each(function() {
    $(this).siblings('[value="' + this.value + '"]').remove();
});
$("#subscription option").each(function() {
    $(this).siblings('[value="' + this.value + '"]').remove();
});
//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");
$("#editInstituteForm").validate({
        rules: {
            errorClass: 'errors',

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

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

        },
        messages: {
            institute_contact: {
                required: "Please Enter Contact Number",
                Digits: "Please Enter only Digits",

            }


        }

    });
</script>
@endsection