@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Post Master')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="/assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="/assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />
<script src="/assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="/assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>

<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>

<!-- <script src="/assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> -->
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
@push('head')




<style>
    /*Custom CSS*/
    span {
        transition: color 0.5s ease-in;
    }

    label:focus-within span {
        color: blue;
    }

    input {
        display: block;
        width: 100%;
    }

    label,
    select {

        display: block;
        width: 100%;
        max-width: 100%;
    }
    /*Profile Pic Start*/
    .picture-container{
        position: relative;
        cursor: pointer;
        text-align: center;
    }
    .picture{
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }
    .picture:hover{
        border-color: #2ca8ff;
    }
    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src{
        width: 100%;

    }
    /*Profile Pic End*/
    .form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
        border-color: #6265e4 !important;
        box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
    }

</style>
@endpush
@section('content')
<script>
@if (Session::has('success'))

   swal("{{Session::get('success')}}").then(function() {
//window.location = "/project/" + loc;
});
        @endif


</script>
<section>
    <div class="row">
        <div class="col-xl-12">
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Department Master</h4>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="card border-0">
                            <form action="{{url('/saveDeptMaster')}}" method="POST">
                                @csrf
                                <div class="row" style="float:none;margin:auto;">
                                    <div class="col-sm-2">
                                        <label class="control-label" for="ddl_dept_subdept"><b>Department/Subdepartment</b></label>
                                        <!--<select name="ddl_member" id="ddl_member" class="form-select form-select-sm">-->
                                        <select name="ddl_dept_subdept" id="ddl_dept_subdept" class="form-select form-select-sm">
                                           <option value="0">Department</option>
                                           <option value="1">Sub Department</option>
                                        </select>
                                    </div>
                                    <div id="fordepttype" class="col-sm-2 @error('ddl_dept_type') has-error @enderror">
                                        <label class="control-label" for="ddl_dept_type"><b>Select Department Type</b></label>
                                        <!--<select name="ddl_member" id="ddl_member" class="form-select form-select-sm">-->
                                        <select name="ddl_dept_type" id="ddl_dept_type" class="form-select form-select-sm @error('ddl_dept_type') is-invalid @enderror">
                                            <option value="">---------- Select Type ----------</option>
                                            @foreach($allDeptType as $allDept)
                                                <option value="{{ $allDept->deptype }}">{{ $allDept->depname }}</option>
                                            @endforeach    
                                        </select>
                                        @error('ddl_dept_type')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div id="forsubdepartment" class="col-sm-2 @error('ddl_dept') has-error @enderror">
                                        <label class="control-label" for="ddl_dept"><b>Select Department</b></label>
                                        <!--<select name="ddl_member" id="ddl_member" class="form-select form-select-sm">-->
                                        <select name="ddl_dept" id="ddl_dept" class="form-select form-select-sm @error('ddl_dept') is-invalid @enderror">
                                            <option value="">---------- Select Department ----------</option>
                                            @foreach($allDepts as $allDep)
                                                <option value="{{ $allDep->id }}">{{ ucwords(strtolower($allDep->deptname)) }}</option>
                                            @endforeach 
                                        </select>
                                        @error('ddl_dept')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-2 @error('txt_dept_subdept') has-error @enderror">
                                        <label class="control-label" for="txt_dept_subdept"><b>Name of Dept/Subdept</b></label>
                                        <input id="txt_dept_subdept" name="txt_dept_subdept" type="text" class="form-control @error('txt_dept_subdept') is-invalid @enderror" />
                                        <input id="txt_dept_code" value="0" name="txt_dept_code" type="hidden" class="form-control" />
                                        @error('txt_dept_subdept')
                                        <small class="help-block text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-sm-2">
                                        <label class="control-label" for="txt_email"><b>Email</b></label>
                                        <input type="text" value="" class="form-control" id="txt_email" name="txt_email" />
                                        
                                    </div>
                                    <div class="col-sm-1 mt-3">
                                        <label class="control-label" for="ddl_user_type"><b></b></label>
                                        <input id="btnDept" name="btnDept" type="submit" class="btn-primary form-control" value="Submit" />
                                    </div>
                                    <div class="col-sm-1 mt-3">
                                        <label class="control-label" for="ddl_user_type"><b></b></label>
                                        <input id="reset" type="reset" class="btn-primary form-control" value="Reset" />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 
            <div class="panel" data-sortable-id="form-stuff-3">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Cadre Master Details</h4>
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body tabledata">
                                              
                </div>
            </div>         
        </div>
    </div>
</section>

@endsection
@push('scripts')
<script>
    $(document).ready(function(){

        $("#forsubdepartment").hide();

        loadtable(0,0);

        $("#ddl_dept_subdept").change(function(){
            var dsdep = $("#ddl_dept_subdept").val();
            if(dsdep == 0){
                $("#forsubdepartment").hide();
                $("#fordepttype").show();
            }else if(dsdep == 1){
                $("#forsubdepartment").show();
                $("#fordepttype").hide();
            }
        });  
        
        $("#ddl_dept").change(function(){
            var dept = $("#ddl_dept").val();
            loadtable(0,dept);
        });
        
        $("#ddl_dept_type").change(function(){
            var dept = $("#ddl_dept_type").val();
            loadtable(dept,dept);
        });

        /* For edit the record */
        $(document).on("click", ".pr-1", function(){
           
            var id = this.id;
            var ids = id.split("-");
            var act = ids[0];
            id = ids[1];
            $.ajax({
                url: "editPost",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend:function(){

                },
                data: {id:id},
                success: function (data, status){
                    res = data.split("~");
                    $("#ddl_user_type").val(res[0].trim());
                    $('#ddl_user_type').trigger('change');
                    $("#ddl_cadre").val(res[1]);
                    $('#ddl_cadre').trigger('change');
                    $("#ddl_designation").val(res[2]);
                    $("#txt_post").val(res[3]);
                    $("#txt_post_code").val(id);
                    $("#btnPost").val("Update");
                    $(".activeto").show();

                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }
            });    
        });

    });

    function loadtable(dept, subdept){
        $.ajax({
                url: "getDataTable",
                type: 'GET',
                cache: false,
                async: false,
                beforeSend:function(){

                },
                data: {dept:dept, subdept:subdept},
                success: function (data, status){
                    $(".tabledata").html("");
                   $(".tabledata").html(data);
                   $('#data-table-default').DataTable({
            "pageLength": 10,
            responsive: {
        details: false
    }
        });
                },
                error: function (xhr) {
                    alert("Error:" + xhr.status + ' ' + xhr.statusText);
                }    
        });
    }
    
</script>


@endpush