@section('title', 'Manage Sub-Admin')
@extends('admin.layouts.app')
<!-- Parsley CSS -->
@push('style')
<link rel="stylesheet" href="{{asset('assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/color_skins.css')}}">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<style>
    .app-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #FFF;
        margin: -30px -30px 30px;
        padding: 23.7px 30px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .app-title h1,
    .app-title .h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
    }

    .app-title p {
        margin-bottom: 0;
        font-style: italic;
    }

    .app-title a {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    }

    .block-header h2 {
        margin-top: 10px !important;
        font-size: 20px;
    }

    select {
        width: 100%;
        padding: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
</style>
@endpush


@section('content')
<section class="content home">


    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"></i>
                    Add Sub-Admin
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin-manage_sub_admin')}}">Manage Role-Based Access</a></li>
                    <li class="breadcrumb-item active">Add Sub-Admin</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Start Content-->
    <div class="container-fluid">
        <div class="body">
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <a class="btn btn-white float-left ml-3 mt-2" href="{{ route('admin-manage_sub_admin') }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>
                        
                        <div class="card-body mt-4">

                            @if(empty($doctorDetails))
                            <form class="form" name="createUser" id="createUser" method="post" action="{{route('admin-store_sub_admin')}}" enctype="multipart/form-data">
                                @else
                                <form class="form" name="updateUser" id="updateUser" method="post" enctype="multipart/form-data">
                                    @method('PUT')
                                    @endif

                                    @csrf

                                    <input type="hidden" name="sub_admin_id" id="sub_admin_id">

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="name" name="name" class="form-control" value="{{ old('name')}}">
                                            <label class="form-label">Name</label>
                                        </div>
                                    </div>

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="email" id="email" name="email" class="form-control" value="{{ old('email') }}">
                                            <label for="email" class="form-label">Email</label>
                                        </div>
                                        @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>


                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
                                            <label class="form-label">Phone Number</label>
                                        </div>
                                        @error('phone')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="designation" name="designation" class="form-control" value="{{ old('designation')}}">
                                            <label class="form-label">Designation</label>
                                        </div>
                                    </div>

                                    <div>
                                        <input type="submit" class="btn btn-success" class="add_user" value="Add">
                                        <!-- <input type="submit" class="btn btn-success" class="update_user" value="Update"> -->
                                    </div>
                                </form>
                            </form>

                        </div>
                    </div> <!-- end card-->
                </div> <!-- end col-->
            </div>

        </div>

    </div>
    </div>
</section>
@endsection

@push('script')
<script src="{{asset('assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    $(document).ready(function() {

        $.validator.addMethod('validateEmail', function(value, element) {
            var pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
            return this.optional(element) || pattern.test(value);
        }, 'Please enter a valid email address.');

        $('#createUser,#updateUser').validate({

            rules: {
                name: {
                    required: true
                },
                email: {
                    required: true,
                    email: true,
                    validateEmail: true
                },
                phone: {
                    required: true,
                    digits: true,
                    minlength: 10,
                    maxlength: 12,
                },
                designation:{
                    required: true,
                }
            },

            messages: {
                name: {
                    required: "Please enter your name."
                },
                email: {
                    required: "Please enter your email address.",
                    email: "Please enter a valid email address.",
                    validateEmail: "Please enter a valid email address."
                },
                phone: {
                    required: "Please enter your phone number.",
                    digits: "Please enter a valid phone number.",
                    minlength: 'Please enter 10 to 12 digits number only.',
                    maxlength: 'Please enter 10 to 12 digits number only.'
                },
                designation:{
                    required: "Please enter designation.",
                }
            },

            highlight: function(input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function(input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error);
            }
        });

        //WHEN EDIT FORM WILL OPEN
        document.addEventListener('DOMContentLoaded', function() {
            const formInputs = document.querySelectorAll('.form-control');

            formInputs.forEach(function(input) {
                // Check if the input has a predefined value
                if (input.value !== '') {
                    input.parentElement.classList.add('focused');
                }

                // Add event listener for input focus
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('focused');
                });

                input.addEventListener('blur', function() {
                    // Check if the input value is empty
                    if (this.value === '') {
                        this.parentElement.classList.remove('focused');
                    }
                });
            });
        });
    });
</script>
@endpush