@extends('layouts.appuser')




@section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
    <style>
        select.form-control:not([size]):not([multiple]) {
            height: calc(2rem + 2px);
        }
        
        .modal-backdrop{
            display: contents;
        }
        @media (max-width: 768px)
        {

        }

        /*body{
    background: -webkit-linear-gradient(left, #3931af, #00c6ff);
}*/
        .emp-profile{
            /*padding: 3%;*/
            margin-top: 1%;
            margin-bottom: 1%;
            border-radius: 0.5rem;
            background: #fff;
        }
        .profile-img{
            text-align: center;

        }
        .profile-img img{
            width: 225px;
            height:200px;
        }
        .profile-img .file {
            position: relative;
            overflow: hidden;
            margin-top: -14%;
            width: 225px;
            border: none;
            border-radius: 0;
            font-size: 15px;
            background: #212529b8;
        }
        .profile-img .file input {
            position: absolute;
            opacity: 0;
            right: 0;
            top: 0;
        }
        .profile-head h5{
            color: #333;
        }
        .profile-head h6{
            color: #0062cc;
        }
        .profile-edit-btn{
            border: none;
            border-radius: 1.5rem;
            width: 70%;
            padding: 2%;
            font-weight: 600;
            color: #6c757d;
            cursor: pointer;
        }
        .proile-rating{
            font-size: 12px;
            color: #818182;
            margin-top: 5%;
        }
        .proile-rating span{
            color: #495057;
            font-size: 15px;
            font-weight: 600;
        }
        .profile-head .nav-tabs{
            margin-bottom:5%;
        }
        .profile-head .nav-tabs .nav-link{
            font-weight:600;
            border: none;
        }
        .profile-head .nav-tabs .nav-link.active{
            border: none;
            border-bottom:2px solid #0062cc;
        }
        .profile-work{
            padding: 14%;
            margin-top: -20%;
        }
        .profile-work p{
            font-size: 12px;
            color:white;
            font-weight: 600;
            margin-top: 10%;
            padding: 7px 5px;
            background-color: #1d93ae;
            box-shadow: 0px 1px 5px 0px #083c50;
        }
        .profile-work a{
            text-decoration: none;
            color:white;
            /*font-weight: 600;*/
            font-size: 14px;
            display: -webkit-box;
        }
        .profile-work ul{
            list-style: none;
        }
        .profile-tab label{
            font-weight: 600;
        }

        .profile-tab label{
            font-weight: 800;
            color: #0062cc;
        }

        .profile-tab .row{
            margin-top: 10px;
        }


        .nav-tabs .nav-item {
            margin-bottom: -1px;
            margin-top: 5px;
            margin-left: 5px;
            border-right: 1px solid white;
        }

        .full-width-tabs > ul.nav.nav-tabs {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .full-width-tabs > ul.nav.nav-tabs > li {
            float: none;
            display: table-cell;
        }
        .full-width-tabs > ul.nav.nav-tabs > li > a {
            text-align: center;
        }


        .box_shadow{
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }
        
        .profile_padding_left{
            padding-left: 0px;
        }
        .mt0 {
            margin-top: 0px !important;
        }
        
        p{
           margin-bottom: .2rem;
           color: #3c3939;
        }
        .mt25{
            margin-top: 25px !important;
        }
    </style>
@endsection
@section('content')
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Nodal Officer <b>{{$blockName}}</b></div>

                <div class="card-body">

                    <form method="post" action="" id="nodal-form">
                        <!--<div class="form-group row">
                            <div class="col-md-6">
                                <label class="" for="district">DISTRICT</label>
                                <select class="form-control" id="district" name="district">
                                    <option value="">SELECT DISTRICT</option>
                                    @foreach ($districts as $value)
                                        <option value="{{$value['id']}}">{{$value['district_name']}}</option>
                                    @endforeach
                                </select>
                                <label class="district text text-danger"></label>
                            </div>
                            <div class="col-md-6">
                                <label class="" for="block">BLOCK</label>
                                <select class="form-control" id="block" name="block">
                                    <option value="">SELECT BLOCK</option>
                                </select>
                                <label class="block text text-danger"></label>
                            </div>
                        </div>-->
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="" for="gp">GRAM PANCHAYAT</label>
                                <select class="form-control" id="gp" name="gp">
                                    <option value="">SELECT GRAM PANCHAYAT</option>
                                    @foreach ($gps as  $value)
                                    <option value="{{$value['id']}}">{{$value['gp_name']}}</option>
                                    @endforeach
                                </select>
                                <label class="gp text text-danger"></label>
                            </div>
                            
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="" for="nodal-designation">NODAL OFFICER DESIGNATION</label>
                                <select class="form-control" id="nodal-designation" name="nodal-designation">
                                    <option value="">SELECT DESIGNATION</option>
                                    @foreach ($nodalDesignations as $value)
                                    <option value="{{$value['id']}}" data-technical_status={{$value['technical_status']}}>{{$value['designation_name']}}</option>
                                    @endforeach
                                </select>
                                <label class="nodal-designation text text-danger"></label>
                            </div>
                            <div class="col-md-6">
                                <label class="" for="nodal-name">NODAL OFFICER NAME</label>
                                <input type="text" name="nodal-name" id="nodal-name" class="form-control">
                                <label class="nodal-name text text-danger"></label>
                            </div>
							
                        </div>
                      
                        <div class="form-group row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">SAVE</button>&nbsp;&nbsp;<button type="reset" class="btn btn-warning">RESET</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>


@endsection




@section('dynamic_js')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).on('change','#district',function(){

        $.get("{{route('district_block')}}",{
            district:$(this).val()
        },function(j){
            var option = "<option value=''>SELECT BLOCK</option>";
            for(var i = 1; i < j.length; i++){
                option += '<option value='+j[i].block_id+'>'+j[i].block_name+'</option>';
            }
            $('#block').html(option);
        });

    });

    $(document).on('change','#block',function(){

        $.get("{{route('block_gps')}}",{
            block_id:$(this).val()
        },function(j){
            var option = "<option value=''>SELECT GP</option>";
            for(var i = 1; i < j.length; i++){
                option += '<option value='+j[i].gp_id+'>'+j[i].gp_name+'</option>';
            }
            $('#gp').html(option);
        });

    });
    var increment = 0;
    $(document).on('click','#add-member',function(){
        $(this).attr('data-member',increment+1)
        var memberDiv = $('#member-div').clone();
        $('#member-div').after(memberDiv);
        memberDiv.attr('id','member-div'+(increment));
        memberDiv.find("select.member_designation").attr('id','member-designation'+(increment+1));
        memberDiv.find("input.team_member").attr('id','team_member'+(increment+1));
		memberDiv.find("input.member_mobile").attr('id','member_mobile'+(increment+1));
        memberDiv.find("select.member_designation").attr('data-select',(increment+1));
        memberDiv.find("select.member_name").attr('id','member_name'+(increment+1));
        memberDiv.find("select.member_name").attr('data-input',(increment+1));
        memberDiv.find("label.member_designaion_error").removeClass('member_designation'+increment);
        memberDiv.find("label.member_designaion_error").addClass('member_designation'+(increment+1))
        memberDiv.find("label.member_name_error").removeClass('member_name'+increment);
        memberDiv.find("label.member_name_error").addClass('member_name'+(increment+1))
		memberDiv.find("label.member_mobile_error").removeClass('member_mobile'+increment);
        memberDiv.find("label.member_mobile_error").addClass('member_mobile'+(increment+1))
        increment++;

    })

    $(document).on('change','#nodal-designation',function(){
        if($(this).find(':selected').data('technical_status') != "1"){
            $('#ae-div').removeAttr("hidden");
            $.get("{{route('gp_ae')}}",{
                gp:$('#gp').val()
            },function(j){
                var option  = "<option value=''>SELECT ACCREDITED ENGINEER</option>"
                for(var i = 1; i < j.length; i++){
                   option +="<option value='"+j[i].employee_id+"'>"+j[i].employee_name+"</option>";
                }
                $('#ae').html(option);
            })
        }else{
            $('#ae-div').attr("hidden","hidden");
        }
        $.get("{{route('regular_employees')}}",{
            designation:$(this).val(),
            gp:$('#gp').val()
        },function(j){
            var option = "<option value=''>SELECT REGULAR EMPLOYEES</option>";
            for(var i = 1; i < j.length; i++){
                option += "<option value='"+j[i].employee_id+"'>"+j[i].employee_name+"</option>";
            }
            $('#nodal-name').html(option);
        });
    });
    
</script>
<script>
    $(document).on('submit', '#nodal-form', function (e) {
        e.preventDefault();
        Swal.fire({
            position: 'center',
            title: 'Are you sure that you want to add nodal officer record?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Confirm'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "POST",
                    url: "{{route('create_nodal')}}",
                    dataType: "json",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    statusCode: {
                        422: function (data) {
                            // Error...
                            var object = "";
                            $.each(data, function (key, val) {

                                if (key === "responseText") {
                                    object = jQuery.parseJSON(val);
                                }

                            });
                            var error = "";
                            $.each(object.errors, function (key, val) {
                                if(key.indexOf('.') != -1){
                                    var nameClass = key.split('.');
                                    $('.' +nameClass[0]+''+nameClass[1]).text(val);
                                }else{
                                    $('.' + key).text(val);
                                }
                                
                                
                                $('.' + key).removeAttr('style');

                            });
                            Swal.fire("In valid data has been provided please check!", "", "error");
                        },
                        200: function (data) {
                            var heading = "Success";
                            var message = data[1].success;
                            var status = "success";
                            if (data[1].error) {
                                message = data[1].error;
                                status = "error";
                                heading = "In valid data has been provided please check!";
                            }
                            Swal.fire({
                                        title: heading,
                                        text: message,
                                        icon: status,
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK',
                                        allowOutsideClick: false,
                                        }).then((result) => {
                                        if (result.isConfirmed) {
                                            if(status != "error"){
                                                window.location.reload("{{route('team')}}");
                                            }
                                        }
                            })
                        },
                    },
                    error: function (data) {

                    },
                    success: function (data) {

                    }
                });
            }
        });

    });
    $(document).on('change','.member_name',function(){
        var input = $(this).data('input');
        var name = $("#member_name"+input+" option:selected").text();
        $('#team_member'+input).val(name);
    });

    $(document).on('change','.select-member',function(){

        var id = $(this).attr('id');
        var memberText = $('#'+id+' option:selected').text();
        var member = $(this).data('member');
        $('#'+member).val(memberText);

    });
</script>

@endsection