@extends('layouts.app2')

@section('title', 'Users')
@section('dynamic_css_excpt')
@endsection
@section('dynamic_css')
    <!-- <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css"/>-->
    <link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css"/>
    <style>
        select.form-control:not([size]):not([multiple]) {
            height: calc(1.95rem + 0px);
        }
        .panel-title{
            font-size: 15px;
            display: table-cell;
            vertical-align: middle;
        }
        .custom-col-md-6{
            width:50%;
            display: table;
            height: 40px;
        }
        .table td {
            padding: .5rem 1rem .5rem 1rem;
            vertical-align: middle;
            border-top: 1px solid #dee2e6;
        }
        .table .btn{
            min-width: 89px;
        }

        select options {
            text-transform: capitalize;
        }

        .text-blue{
            color: #304192;
            font-weight: 600;
            font-size: 14px;
        }
        /************************ slider button ************************************/

        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 55px;
            height: 26px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            /* background-color: red;*/
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 24px;
            width: 24px;
            left: 3px;
            bottom: 1px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;

        }

        input:checked + .slider {
            background-color: #2196F3;
            /* background-color: green;*/
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
            /* background-color: green;*/
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .vl{
            height: 26px;
            border-left: 1px solid #999;
        }

        .fBlack{
            color:#999;
        }

        /*****************************************************************************/
        @media (max-width: 768px)
        {
            li.page-item {

                display: none;
            }
            .dataTables_length {
                margin-bottom: -5px;
                margin-left: 19px;
            }
            .custom-col-md-6{
                width:50%;
                display: table;
                height: 34px;
            }
            .page-item.previous,
            .page-item.next,
            .page-item:first-child,
            .page-item:last-child,
            .page-item.active {

                display: block;
            }

            .result-set{
                padding-left: 15px;
                padding-right: 15px;
            }

            .btn.btn-sm,.btn.btn-xsm {
                padding: .3rem .7rem;
                font-size: .54rem;
            }
            .table .btn {
                min-width: 50px;
            }

            .btn.btn-xsm{
                padding: .2rem .2rem;
            }

            #data-table{
                width: 100% !important;
            }

        }

        .dataTables_filter{
            display: inline-block;
            float: right;
        }

        .btn-secondary {
            background-color: #1c7095!important;
            color: #fff!important;
            padding: .40rem .60rem;
        }

        .verification{
            width: 100% !important;
        }

        /*.verification tbody tr td:nth-child(8){*/
        /*display: flex;*/
        /*}*/
        .verification th{
            text-align: center;
        }
        .verification td{
            text-align: center;
        }
        .dataTables_length{
            margin-bottom: -56px;
        }
        .dt-buttons{
            left: 165px;
        margin-bottom: -43px;
        }

        .img-circular{
            width: 95px;
            height: 95px;
            background-size: cover;
            border-radius: 50%;

        }

        .mod_head{
            background-color: #1f2b49 !important;
        }

        .modal-dialog.modal-notify .modal-body {
            padding: 0px !important;
        }
        .modal-body {
            padding: 0px !important;
        }
        .modal-header{
            height: 52px !important;
            padding: 7px !important;
        }



    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row container_layout">
            <div class="col-md-12 pl0 pr0 mobile_view">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ route('adminhome')}}">
                                <i class="material-icons">home</i>
                            </a>
                        </li>
                        
                        <li class="breadcrumb-item active"><a href="{{ url('regular/employees') }}">Create BDO</a></li>
                    </ol>
                </nav>
            </div>


            <div class="col-md-12 p20 bg-white">
                <div class="panel panel-default">
                    <div class="panel-heading ">

                        

                    </div>
                    <div class="panel-body">
                        <form method="post" action="" id="bdo-form">
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="bdo_block">BLOCK</label>
                                    <select class="form-control" name="bdo_block" id="bdo_block" required>
                                        <option value="">SELECT BLOCK</option>
                                        @foreach ($blocks as $value)
        
                                        <option value="{{$value['block_id']}}">{{$value['block_name']}}</option>
                                            
                                        @endforeach
                                    </select>
                                    <label class="text text-danger bdo_block"></label>
                                </div>
                                <div class="col-md-6">
                                    <label for="bdo_name">BDO Name</label>
                                    <input type="text" name="bdo_name" id="bdo_name" class="form-control" placeholder="Name of a BDO" required>
                                    <label class="text text-danger bdo_name"></label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="" for="block_official_email">Block's Official Email</label>
                                    <input type="text" name="block_official_email" id="block_official_email" class="form-control" required>
                                    <label class="text text-danger block_official_email"></label>
                                </div>
                                <div class="col-md-6">
                                    <label class="" for="bdo_email">BDO's Email</label>
                                    <input type="text" name="bdo_email" id="bdo_email" class="form-control" required>
                                    <label class="text text-danger bdo_email"></label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label class="" for="bdo_no">BDO's Mobile No.</label>
                                    <input type="text" name="bdo_no" id="bdo_no" class="form-control" required>
                                    <label class="text text-danger bdo_no"></label>
                                </div>
                                
                            </div>
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label>Substantive Post</label>
                                </div>
                                <div class="col-md-4">
                                    <label>Yes &nbsp; <input type="radio" name="substantive" value="1" required class="substantive"></label>
                                </div>
                                <div class="col-md-4">
                                    <label>No &nbsp; <input type="radio" name="substantive" value="0" required class="substantive"></label>
                                </div>
                            </div>
                            <div class="form-group row" hidden id="designation_div">
                                <div class="col-md-6">
                                    <label class="" for="designation">Actual Designation</label>
                                    <select class="form-control" name="designation" id="designation">
                                        <option value="">Select Designation</option>
                                        @foreach ($designations as $designation)
                                        <option value="{{$designation->id}}">{{$designation->designation_name}}</option>
                                        @endforeach
                                    </select>
                                    <label class="text text-danger designation"></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 class="row">
			<div class="col-md-12">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>SL No.</th><th>Block</th><th>BDO</th><th>User Name</th><th>Password</th>
						</tr>
					</thead>
					<tbody>
					@php
						$i = 1;
					@endphp
						@foreach($bdoLoginRecord AS $value)
							<tr>
								<td>{{$i}}</td><td>{{$value['block_name']}}</td><td>{{$value['name']}}</td><td>{{$value['username']}}</td><td>password</td>
							</tr>
							@php
								$i++;
							@endphp
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
    </div>

    



@endsection

@section('dynamic_js')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).on('change','.substantive',function(){
        if($(this).val() == 1){
            $('#designation_div').removeAttr('hidden');
            $('#designation').attr('required','required');
        }else{
            $('#designation_div').attr('hidden','hidden');
            $('#designation').removeAttr('required');
        }
    });
    $(document).on('submit', '#bdo-form', function (e) {
        e.preventDefault();
        Swal.fire({
            position: 'center',
            title: 'Are you sure that you want to confirm a GP team creation?',
            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('regular_bdo')}}",
                    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("");
                                            }
                                        }
                            })
                        },
                    },
                    error: function (data) {

                    },
                    success: function (data) {

                    }
                });
            }
        });

    });
  
</script>
@endsection