@include('components/header')
@include('components/sidebar')
<script src="{{asset('design/js/lib/jquery-3.6.0.min.js')}}"></script>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Add Department</h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                
                <button class="btn btn-danger mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
        </a>
        <a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" data-target="#add_dept">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Add Department</a>
    </div>
</div>
<div class="layout-px-spacing layout-top-spacing">
    <div class="modal-footer">
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-one widget-table-two">
                <div class="widget-content pl-2 pr-2">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="tab-7" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">DEPARTMENT</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tab-8" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">DESIGNATION</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="tab-7">
                            <div class="widget-tableContent p-0 pt-3">
                                <div class="table-responsive">
                                    <table class="table table-striped dt-table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <div class="th-content text-center">Sr No.</div>
                                                </th>
                                                <th>
                                                    <div class="th-content text-center">Department</div>
                                                </th>
                                                <th>
                                                    <div class="th-content text-center">Action</div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php $i=0 @endphp
                                            @foreach($department as $r)
                                            <tr>
                                                @php $i = $i+1 @endphp
                                                @for($i=$i;$i<=count($department);)
                                                <td>
                                                    <div class="td-content text-center">
                                                        <span class="text-black">{{$i}}</span>
                                                    </div>
                                                </td>
                                                @break
                                                @endfor
                                                <td>
                                                    <div class="td-content text-center">
                                                        <span class="text-black">{{$r->department}}</span>
                                                    </div>
                                                </td>
                                                <td class="td-content">
                                                    <center>
                                                    <div class="td-content">
                                                        <a href="javascript:void(0);" class="approve" data-value="{{$r->id}}" data-toggle="modal" data-bs-placement="top" data-target="#edit" data-name="{{$r->department}}" data-bs-original-title="Delete">
                                                            <img src="design/img/edit.svg" />
                                                        </a>
                                                        <a href="javascript:void(0);" class="delete" data-value="{{$r->id}}" data-toggle="modal" data-bs-placement="top" data-bs-original-title="Delete" data-value="{{$r->id}}" data-target="#delete" data-name="{{$r->department}}" >
                                                            <img src="design/img/delete.svg" />
                                                        </a>
                                                    </div>
                                                    </center>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="tab-8">
                            <form id="form_submit" method="post" class="myForm" action="add_designation">
                                <div class="widget-tableContent p-0 pt-3">
                                    <div class="table-responsive">
                                        <table class="table table-striped add-designation-table dt-table-hover">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="th-content text-center">Sr No.</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content text-center">Department</div>
                                                    </th>
                                                    <th>
                                                        <div class="th-content text-center">Designation</div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>                                                
                                                {{@csrf_field()}}
                                                @php $i=0; @endphp
                                                @foreach($department as $r)
                                                @php $i++ @endphp
                                                <tr>
                                                    <td>
                                                        <div class="td-content text-center">
                                                            <span class="text-black">{{$i}}</span>
                                                        </div>
                                                    </td>
                                                    <td width="30%">
                                                        <div class="td-content text-center">
                                                            @if($r->department == 'NA')
                                                                <input type="hidden" name="department_id" value="{{$r->id}}">
                                                                <span class="text-black" id="check_department">{{$r->department}}</span>
                                                                <div id="check_department_option"></div>
                                                            @else
                                                                <span class="text-black">{{$r->department}}</span>
                                                            @endif
                                                        </div>
                                                    </td>
                                                    <td class="td-content">
                                                        @foreach($domain as $d)
                                                        @if($r->id == $d->department_id)
                                                            <div class="td-content text-left pb-2 mb-3 border-bottom d-flex align-items-center justify-content-between">
                                                                <span class="text-black">{{$d->domain}}</span>
                                                                <div>
                                                                <a href="javascript:void(0);" class="edit_designation" data-value="{{$d->id}}" data-department="{{$r->id}}" data-designation_name="{{$d->domain}}" data-toggle="modal" data-bs-placement="top" data-target="#edit_designation"data-bs-original-title="Delete">
                                                                    <img src="design/img/edit.svg" />
                                                                </a>
                                                                <a href="javascript:void(0);" class="delete" data-value="{{$d->id}}" data-toggle="modal" data-bs-placement="top" data-target="#delete_designation"data-bs-original-title="Delete">
                                                                    <svg id="save" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus minus"><line fill="#ffffff" x1="5" y1="12" x2="19" y2="12"></line></svg>
                                                                </a>
                                                                </div>
                                                            </div>
                                                        @endif
                                                        @endforeach
                                                       
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" data-id="{{$r->id}}"stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus addmore"><line fill="#ffffff" x1="12" y1="5" x2="12" y2="19"></line><line fill="#ffffff" x1="5" y1="12" x2="19" y2="12"></line></svg>
                                                        
                                                    </td>
                                                </tr>
                                                @endforeach
                                        
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    
</div>
</div>
</div>
<div class="modal fade" id="add_dept" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body">
                    <h5><b>Add New Department</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group" method="post" action="add_department">
                    {{@csrf_field()}}
                    <input type="text" name="department" class ="form-control text" id="enter_role" placeholder="Enter Department">
                    <p class="text-danger" id="error_msg"></p>
                    <div class="row float-right">
                        <div class="col-6">
                            <input type="submit" value="Submit" id="add_role" class="btn btn-success">
                            
                        </div>
                        <div class="col-6">
                            <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body">
                    <h5><b>Edit Department</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group" method="post" action="/edit_dept">
                    {{@csrf_field()}}
                    <input type="text" name="role" id="enter_edit_role" class ="form-control text edit_name" placeholder="Enter Department" value="">
                    <input type="hidden" name="id" class="edit_id" value="">
                    <p class="text-danger" id="error_msg2"></p>
                    <br>
                    <div class="row float-right">
                        <div class="col-6">
                            <input type="submit" value="Submit" class="btn btn-success">
                        </div>
                        <div class="col-6">
                            <button type="button" data-dismiss="modal" value="Cancel" class="btn btn-primary">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="edit_designation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body">
                    <h5><b>Edit Designation</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group" method="post" action="/edit_department">
                    {{@csrf_field()}}
                    <div class="mb-2">
                        <label>
                            Designtion Name
                        </label>
                        
                        <input type="hidden" name="designation_id" class ="form-control text designation_id" placeholder="Enter Designation Name" value="">

                        <input type="text" name="designation_name" class ="form-control text designation_name" placeholder="Enter Designation Name" value="">
                    </div>
                    <div class="mb-2">
                        <label>Department Name</label>
                        <select id ="department" name="department" class="form-control">
                        </select>
                    </div>
                    <div class="row float-right">
                        <div class="col-6">
                            <input type="submit" value="Submit" class="btn btn-success">
                        </div>
                        <div class="col-6">
                            <button type="button" data-dismiss="modal" value="Cancel" class="btn btn-primary">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body">
                    <h5><b>Are You Sure You Want To Delete This Department ?</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group" method="post" action="/delete_depart">
                    {{@csrf_field()}}
                    <input type="hidden" name="id" class="delete_id">
                    <div class="row float-right">
                        <div class="col-6">
                            <input type="submit" name="wish" value="Delete" class="btn btn-success">
                        </div>
                        <div class="col-6">
                            <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
<div class="modal fade" id="delete_designation" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <center>
            <div class="modal-header" style="border-bottom: 1px dashed #e0e6ed;">
                <div class="media-body">
                    <h5><b>Are You Sure You Want To Delete This Designation ?</b></h5>
                </div>
            </div>
            </center>
            <div class="modal-body">
                <form class="form-group" method="post" action="/delete_designation">
                    {{@csrf_field()}}
                    <input type="hidden" name="id" class="delete_id">
                    <div class="row float-right">
                        <div class="col-6">
                            <input type="submit" name="wish" value="Delete" class="btn btn-success">
                        </div>
                        <div class="col-6">
                            <input type="reset" data-dismiss="modal" value="Cancel" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("done")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('edit'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("edit")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('delete'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("delete")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('error'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("error")@endphp',
        type: 'warning',
        padding: '2em'
    })
    </script>
@endif
@include('components/footer')
<script>
    $("#add_role").on('click',function(event){
        if($("#enter_role").val() ==''){
        $("#error_msg").text('This field is required*');
        event.preventDefault();
    }
    });
    $("#add_designa").on('click',function(event){
        if($("#add_design").val() ==''){
        $("#error_desi").text('This field is required*');
        event.preventDefault();
    }
    if($("#enter_dept option:selected").index() == 0){
        $("#error_dep").text('This field is required*');
            event.preventDefault();
        }
    });
    $("#edit_role").on('click',function(event){
        if($("#enter_edit_role").val() ==''){
            $("#error_msg2").text('This field is required*');
            event.preventDefault();
        }
    });
    $('.approve').click(function(){
        var id = $(this).data('value');
        var name = $(this).data('name');
        $('.edit_id').val(id);
        $('.edit_name').val(name);
    });
    $('.delete').click(function(){
        var id = $(this).data('value');
        var name = $(this).data('name');
        $('.delete_id').val(id);
        $('.delete_name').val(name);
    });

    $('.edit_designation').click(function(){
        var designation = $(this).data('value');
        var designation_name = $(this).data('designation_name');
        var department = $(this).data('department');
        if(department){
            $.ajax({
                url : "{{url('get_department')}}",
                type: "get",
                data : {department:department},
                success: function(html) {
                    $("#department").html(html);
                }
            })
        }
        $('.designation_id').val(designation);
        $('.designation_name').val(designation_name);
        $('.department_id').val(department);
    });

    var i = 0;
    $('.addmore').click(function(){
        ++i;
        var currentRow=$(this).closest("tr");
        var dept_id = $(this).data('id');
        var col1=currentRow.find("td:eq(2)"); // get current row 1st TD value
        $('<div>').attr({
            class:'div_class mt-3 pb-3 mb-4 designation-field',
            id:'div'+i,
        }).appendTo(col1);
            
        $('<input>').attr({
            type: 'text',
            id: 'check'+i,
            class: 'input_field form-control mb-2',
            name: 'designation_name'
            }).appendTo('#div'+i);
        $('<input>').attr({
            type: 'hidden',
            name: 'department_id',
            value: dept_id
        }).appendTo('#div'+i);
        $('<div>').html("<svg class='addmore p-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg>").attr({class:"p-0 save_data"}).appendTo('#div'+i);
        $('<span>').attr({
            class : 'text-danger span_error',
            style : 'float:left;'
        }).appendTo('#div'+i);
        $('<br>').appendTo('#div'+i);
          
        $('<div>').html("<svg id='save' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus minus'><line fill='#ffffff' x1='5' y1='12' x2='19' y2='12'></line></svg>").attr({ class:"remove_field p-0" }).appendTo('#div'+i);
        $('<br>').appendTo('#div'+i);
                 
    });
    $(document).on('click','.remove_field',function(){
        $(this).parents('.div_class').remove();
    });
    $(document).on('click','.save_data',function(event){
        $('.div_class').each(function(){
            var save_data = $(this).children().children();
            var a =  $(this).children().val();
            if(a == ''){
                var span_check = $(this).find('span');
                span_check.text('This field is required*');
            }
            else{
                var span_check = $(this).find('span');
                span_check.text('');
                var forms = $('#form_submit');
                    $('#form_submit').submit();
            }
        });
    });
    $("#tab-8").on('click',function(){
        var data = $(this).text();
        localStorage.setItem('active',data);
    });

    $("#tab-7").on('click',function(){
        var data = $(this).text();
        localStorage.setItem('active',data);
    });
    $(document).ready(function(){
        var data = localStorage.getItem('active');
        if(data == 'DESIGNATION'){
            $("#tab-8").addClass('active');
            $("#tab-8").attr('selected',true);
            $("#profile").addClass("active");
            $("#profile").addClass("show");
            $("#home").removeClass("active");
            $("#home").removeClass("show");
            $("#tab-7").removeClass('active');
            $("#tab-7").removeClass('show');
        }else{
            $("#tab-8").removeClass('active');
            $("#tab-7").attr('selected',true);
            $("#profile").removeClass("active");
            $("#profile").removeClass("show");
            $("#home").addClass("active");
            $("#home").addClass("show");
            $("#tab-7").addClass('active');
        }
    });

    $("#check_department").click(function(){
        $.ajax({
            url:"{{url('get_department')}}",
            success: function(html) {
                $("#check_department_option").html(html);
            }
        })
    })
</script>