{{View::make('layout.header')}}
<style>
.fc-right .fc-state:hover{
     background-color:#fff !important;
    
}
.fc-right .fc-button{
     padding: 0.438rem 0.5rem !important;
     background:#fff !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    height: 100%;
}
.fc-right .fc-state-active {
    background-color: rgba(115, 103, 240, 0.2) !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    z-index: 1 !important;
}
.fc-next-button, .fc-prev-button{
    background: #fff !important;
}
.fc-month-button, .fc-agendaWeek-button{
border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }
    .fc-agendaWeek-button, .fc-agendaDay-button{
        border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    }
.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {
    top:-10% !important;
}
.fc-icon-left-single-arrow:after{
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e900" !important;
}
.fc-icon-right-single-arrow:after {
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e901" !important;
}
.fc-state-default {
    box-shadow: none !important;
}
.fc-content .fc-title{
    color:#fff;
    font-size:11px;
       white-space: break-spaces !important;
}

.fc-right .fc-button-group{
    width: 60% !important;
    float: right !important;
}
@media only screen and (min-width: 768px) {
.fc-left, .fc-right{
    width:50% !important;
}
.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}
}
@media only screen and (max-width: 768px) {
.fc-left, .fc-right{
    width:100% !important;
}
.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}
}

</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('edit-department-category-branch')}}">Department / Category / Branch</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Add New Department</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                        <div class="card-header" >
                            <h4 class="card-title" >Create New Department</h4>
                        </div>
                        <div class="col-md-12">
                            @if (\Session::has('statusMsg'))
                            
                            <div class="alert alert-success alert-dismissible" style="margin-top:18px;">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                                <strong>Success!</strong> {{ Session::get('statusMsg') }}
                            </div>
                            
                            @endif
                        </div>
                        <div class="card-body" style="padding-top:0px;">
                            
                            <form  id="all-filter11"  enctype="multipart/form-data">
                                <div class="row">
                                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                    
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label class="form-label" for="payment-date">Department Name :*</label>
                                                <input type="text" name="department_name" id="department_name" class="form-control"  style="padding-left: 10px;" value="" placeholder="" required onblur="checkDepAvailability(this.value);">
                                            <label><span id="availability1"></span></label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label class="form-label" for="payment-date">Department Email :</label>
                                                <input type="text" name="department_email" id="department_email" class="form-control"  style="padding-left: 10px;" value="" placeholder="" >
                                            
                                        </div>
                                    </div>

                                    <div class="col-md-4 col-12">
                                        <div class="form-group">
                                            <label class="form-label" for="payment-date">Forecast :*</label>
                                                <input type="text" name="department_forecast" id="department_forecast" class="form-control"  style="padding-left: 10px;" value="" placeholder="" required>
                                            
                                        </div>
                                    </div>

                                    <div class="col-md-12 col-12">
                                        <div class="form-group">
                                            <label class="form-label" for="payment-date">Department Description :*</label>
                                                <textarea name="department_description" id="department_description" class="form-control"  style="padding-left: 10px;" value="" placeholder="" required></textarea>
                                            
                                        </div>
                                    </div>
                                
                                    <div class="col-md-12 col-12">
                                        <div class="form-group d-flex flex-wrap mb-0">
                                            <button type="button" onclick="saveDepartmentDetails()" class="btn btn-primary mr-1" id="dept">Add</button>
                                            
                                            
                                        </div>
                                        <div id="msg" style="margin-top:15px;"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        </div>
                    </div>

                </div>
              </section>

            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    <script>
        function checkDepAvailability(department){
            $.ajax({
                url:'{{route('isDepartmentAvailable')}}',
                method:'get',
                data:{ department: department, },
                success:function(e){
                    var messege = e;
                    if(messege ==  false){
                        deptname = "no";
                        showMessage11("Department name already taken.");
                        //document.getElementById("dept").disabled = true;
                        setTimeout(() => {
                            $('#dept').attr("disabled",true)
                        }, 500);
                    }   
                    else{
                        showeError11("Department name valid.");
                        //document.getElementById("dept").disabled = false;
                        setTimeout(() => {
                            $('#dept').attr("disabled",false)
                        }, 500);
                    }
                }
            });
        }
        function showMessage11(message){
            $("#availability1").html("<span style='color:red;'>" + message + "</span>");
        }
        function showeError11(message){
            $("#availability1").html("<span style='color:green;'>" + message + "</span>");
        }

        function saveDepartmentDetails(){
            
            var department_name = $("#department_name").val();
            var department_email = $("#department_email").val();
            var department_forecast = $("#department_forecast").val();
            var department_description = $("#department_description").val();
            if(department_name==''){
                $("#msg").empty();
                    $("#msg").append('<p style="color:red;">Please Enter Department Name</p>');
                    return false;
            }
            // if(department_email==''){
            //     $("#msg").empty();
            //         $("#msg").append('<p style="color:red;">Please Enter Department Email</p>');
            //         return false;
            // }
            if(department_forecast==''){
                $("#msg").empty();
                    $("#msg").append('<p style="color:red;">Please Enter Department Forecast</p>');
                    return false;
            }
            if(department_description==''){
                $("#msg").empty();
                    $("#msg").append('<p style="color:red;">Please Enter Department Description</p>');
                    return false;
            }
            
            var departmentdata = document.querySelector("#all-filter11");
            var data = new FormData(departmentdata);
            $.ajax({
                url:'{{route('addDepartment')}}',
                contentType:false,
                cache:false,
                processData:false,
                method:'POST',
                data:data,
                success:function(e){
                    //console.log(e);
                    $("#msg").empty();
                    $("#msg").append('<p style="color:green;">Department Added Sucessfully</p>');

                    setTimeout(function(){
                        window.location.reload(1);
                    }, 500);
                    
                }
            });

        }

        function checkCatAvailability(category){
            $.ajax({
                url:'{{route('isCategoryAvailable')}}',
                method:'get',
                data:{ category: category, },
                success:function(e){
                    var messege = e;
                    if(messege ==  false){
                        catename = "no";
                        showError33("Category name already taken.");
                        //document.getElementById("dept").disabled = true;
                        setTimeout(() => {
                            $('#catbtn').attr("disabled",true)
                        }, 100);
                    }   
                    else{
                        showMessage33("Category name valid.");
                        //document.getElementById("dept").disabled = false;
                        setTimeout(() => {
                            $('#catbtn').attr("disabled",false)
                        }, 100);
                    }
                }
            });
        }
        function showError33(message){
            $("#availability3").html("<span style='color:red;'>" + message + "</span>");
        }
        function showMessage33(message){
            $("#availability3").html("<span style='color:green;'>" + message + "</span>");
        }

        function saveCategoryDetails(){
            var category_name = $("#category_name").val();
            var category_email = $("#category_email").val();
            var category_forecast = $("#category_forecast").val();
            var category_description = $("#category_description").val();
            if(category_name==''){
                $("#msgcat").empty();
                    $("#msgcat").append('<p style="color:red;">Please Enter Category Name</p>');
                    return false;
            }
            if(category_email==''){
                $("#msgcat").empty();
                    $("#msgcat").append('<p style="color:red;">Please Enter Category Email</p>');
                    return false;
            }
            if(category_forecast==''){
                $("#msgcat").empty();
                    $("#msgcat").append('<p style="color:red;">Please Enter Category Forecast</p>');
                    return false;
            }
            if(category_description==''){
                $("#msgcat").empty();
                    $("#msgcat").append('<p style="color:red;">Please Enter Category Description</p>');
                    return false;
            }
            
            var categorydata = document.querySelector("#all-filter12");
            var data = new FormData(categorydata);
            $.ajax({
                url:'{{route('addCategory')}}',
                contentType:false,
                cache:false,
                processData:false,
                method:'POST',
                data:data,
                success:function(e){
                    //console.log(e);
                    $("#msgcat").empty();
                    $("#msgcat").append('<p style="color:green;">Category Added Sucessfully</p>');

                    setTimeout(function(){
                        window.location.reload(1);
                    }, 500);
                    
                }
            });

        }

        function checkBranchAvailability(branch){
            $.ajax({
                url:'{{route('isBranchAvailable')}}',
                method:'get',
                data:{ branch: branch, },
                success:function(e){
                    var messege = e;
                    if(messege ==  false){
                        branchname = "no";
                        showError22("Branch name already taken.");
                        //document.getElementById("dept").disabled = true;
                        setTimeout(() => {
                            $('#branchbtn').attr("disabled",true)
                        }, 100);
                    }   
                    else{
                        showMessage22("Branch name valid.");
                        //document.getElementById("dept").disabled = false;
                        setTimeout(() => {
                            $('#branchbtn').attr("disabled",false)
                        }, 100);
                    }
                }
            });
        }
        function showError22(message){
            $("#availability2").html("<span style='color:red;'>" + message + "</span>");
        }
        function showMessage22(message){
            $("#availability2").html("<span style='color:green;'>" + message + "</span>");
        }

        function getstate(){
            var branch_country = $("#branch_country").val();
            $.ajax({
                data:{ country:branch_country},
                url:'{{route('getStateByCountry')}}',
                success:function(result_data){
                    
                    var html = "";
                    html += "<option value=''>Select State</option>";
                    for(var i=0;i<result_data.length;i++){
                        html += "<option value='"+result_data[i].state+"'>"+result_data[i].state+"</option>";
                    }
                    //console.log(html);
                    $("#branch_state").html(html);
                }

            });
        }
        
        function saveBranchDetails(){
            var branch_name = $("#branch_name").val();
            var branch_email = $("#branch_email").val();
            var branch_forecast = $("#branch_forecast").val();
            var branch_country = $("#branch_country").val();
            var branch_state = $("#branch_state").val();
            var branch_description = $("#branch_description").val();
            if(branch_name==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Enter Branch Name</p>');
                    return false;
            }
            if(branch_email==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Enter Branch Email</p>');
                    return false;
            }
            if(branch_forecast==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Enter Branch Forecast</p>');
                    return false;
            }
            if(branch_country==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Select Branch Country</p>');
                    return false;
            }
            if(branch_state==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Select Branch State</p>');
                    return false;
            }
            if(branch_description==''){
                $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:red;">Please Enter Branch Description</p>');
                    return false;
            }
            
            var branchdata = document.querySelector("#all-filter13");
            var data = new FormData(branchdata);
            $.ajax({
                url:'{{route('addBranch')}}',
                contentType:false,
                cache:false,
                processData:false,
                method:'POST',
                data:data,
                success:function(e){
                    //console.log(e);
                    $("#msgbranch").empty();
                    $("#msgbranch").append('<p style="color:green;">Branch Added Sucessfully</p>');

                    setTimeout(function(){
                        window.location.reload(1);
                    }, 500);
                    
                }
            });
        }


    </script>