@extends('admin.layouts.admin')
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">  
                    <div class="float-right">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">Setting</a>
							</li>
							<li class="breadcrumb-item">
								<a href="">Employee Designation</a>
							</li>
						</ol>
					</div>
                    <h4 class="page-title">Create Employee Designation</h4>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ url('admin/employeeDesignation/store') }}" class="row" >
                        @csrf
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="department" class="mb-2 text-bold-600 text-uppercase"> Department Name<span class="text-danger">*</span> </label>
                                    <select class="form-control required" name="department" id="department"  required>
                                        <option value="">Select Department</option>
                                        @if(isset($departments) && count($departments) > 0)
                                        @foreach($departments as $department)
                                            <option value="{{ $department->id ?? '' }}">{{ $department->name ?? '' }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name" class="mb-2 text-bold-600 text-uppercase"> Designation Name<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control required" name="name" aria-required="true" id="name"  required>
                                    
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="parent" class="mb-2 text-bold-600 text-uppercase">Parent Designation</label>
                                    <select class="form-control " name="parent" id="parent" >
                                        <option value=''></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="zone_id" class="mb-2 text-bold-600 text-uppercase">Zone</label>
                                    <select class="form-control " name="zone_id" id="zone_id" >
                                        <option value=''></option>
                                        @foreach($areas as $area)
                                        <option value="{{ $area->id ?? '' }}">{{ $area->name ?? '' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="working_day" class="mb-2 text-bold-600 text-uppercase">Working Days</label>
                                    <select class="form-control " required name="working_day" id="working_day" >
                                        <option value='5'>5</option>
                                        <option value='6'>6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="monthly_leave" class="mb-2 text-bold-600 text-uppercase">Max Monthly Leave</label>
                                    <input type="text" class="form-control" name="monthly_leave" aria-required="true" id="monthly_leave"  required>
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Create Employee Designation</button>
                            </div>
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; 2022 SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection
@section('script')

<script>
$(function () {    
    
    $('#zone').hide();

    $('#department').on('change', function () {
        var selectVal = $("#department option:selected").val();
        if(selectVal == 1){
            $('#zone').show();
            $('select#zone').attr('required', 1);
        }
        else{
            $('#zone').hide();
            $('select#zone').attr('required', 0);
        }
        $('#parent').empty();
        $.ajax({
            type: "POST",
            url: '{{ route('employeeDesignation.designationByDepartment') }}',
            data: {
                "_token": "{{ csrf_token() }}",
                val: selectVal
                },
            success: function(result) {
                var obj = $.parseJSON(result); 
                var toAppend='<option value="null">Select Designation</option>>'                        
                $.each(obj, function (key, value) {                       
                        toAppend+='<option value="'+value.id+'">'+ value.name +'</option>>'                 
                });   
                $("#parent").append(toAppend)                                                   
            }
            
        })

    });
});
</script>
@endsection