@extends('layouts.appuser')

@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;

        }

        .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"><a href="">Employees</a></li>
                        <li class="breadcrumb-item active"><a href="">View Picture</a></li>
                    </ol>
                </nav>
            </div>


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

                        <div class="row e1f5fe bdbdbd grey lighten-1 custom_row_o" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="cursor: pointer;">
                            <div class="col-md-6 custom-col-md-6" style="max-width: 50%;">

                                <div class="panel-title pl5">
                                    <i class="fa fa-filter"></i> <span class="label_text"> Custom Filter </span>
                                </div>

                            </div>
                            <div class="col-md-6 custom-col-md-6 text-right" style="max-width: 50%;">

                            </div>
                        </div>

                    </div>
                    <div class="panel-body">
                        <div class="row bg_body custom_row_o">
                            <div class="col-md-12 collapse show mt10" id="collapseExample">

                                {{ csrf_field() }}
                                <div class="row result-set">
                                    <div class="col-md-3 mb-3">
                                        <label class="control-label text-blue"> District </label>
                                        <select class="form-control input-md" id="district" name="district">
                                            @if($data['districts'])
                                                <option value="" selected disabled>==== Select District ====</option>
                                                <option value="1" @if($data['district']==1) {{'selected'}} @endif> All </option>

                                                @foreach($data['districts'] as $dist)
                                                    @if(($data['district']) && ($data['district']==$dist->district_code))
                                                        <option value="{{ $dist->district_code}}" selected> {{ $dist->district_name }} </option>
                                                    @else
                                                        <option value="{{ $dist->district_code}}"> {{ $dist->district_name }} </option>
                                                    @endif
                                                @endforeach
                                            @else
                                                <option value="{{$data['district']}}" selected>{{$data['district_name']}}</option>
                                            @endif
                                        </select>
                                    </div>

                                    <div class="col-md-3 text-right margin-auto">
                                        <button type="submit" class="btn btn-primary btn-sm search"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                                        <a href="" class="btn btn-warning  btn-sm"> <i class="fa fa-refresh" aria-hidden="true"></i> Reset</a>
                                    </div>
                                </div>




                            </div>
                        </div>
                        <div class="result-set mt10" id="no-more-tables">
                            <div class="row">
                                <div class="col-md-12 pl0 pr0">
                                    <table class="table table-responsive employeeList" cellspacing="10">
                                        <thead>
                                        <tr class="note note-primary">
                                            <th width="100px">#</th>
                                            <th width="100px">District</th>
                                            <th width="100px"> Block</th>
                                            <th width="90px">Work Code</th>
                                            <th width="90px">Value of the work</th>
                                            <th width="85px">Date of sanction</th>
                                            <th width="100px">Date of completion</th>


                                            <th>View</th>



                                        </tr>
                                        </thead>

                                    </table>

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



        </div>

    </div>

    <div class="modal fade top" id="personalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="true"  style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-top modal-notify modal-primary" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header mod_head">
                    <p class="heading lead">Personal Details</p>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>

                <!--Body-->
                <div class="modal-body">
                    <div id="printSection">
                        <div class="container">

                        </div>

                    </div>


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




    <div class="modal fade top" id="postingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="true"  style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-top modal-notify modal-primary" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header mod_head">
                    <p class="heading lead">Add Posting Details</p>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>

                <!--Body-->
                <div class="modal-body">
                    <form id="submitPosting_cur">
                        <div class="container" style="padding: 30px;">
                            <p>Name: <span id="emp_name"></span></p>

                            <div id="error">

                            </div>
                            <div id="emp_details">




                            </div>

                            <div class="row" style="background-color: #eaeaea;padding: 13px;">
                                <div class="col-md-6">
                                    <select class="form-control district_current" name="dis"  id="district_current" required>

                                    </select>

                                </div>
                                <input type="hidden" id="emp_id" name="emp_id">
                                <div class="col-md-6" >
                                    <select class="form-control block" name="block" id="block_cur" data-id="0" required>
                                        <option>Select Block</option>
                                    </select>

                                </div>
                                {{csrf_field()}}

                                <div class="col-md-4 mt-2" >
                                    <p>Date of Joining <span style="color: red">*</span></p>
                                    <input type="date" class="form-control" name="doj" id="doj" required>

                                </div>
                                <div class="col-md-4 mt-2" >
                                    <p>Joining Letter <span style="color: red">*</span></p>
                                    <input type="file" id="j_copy" name="j_copy" class="form-control" required>

                                </div>

                            </div>

                        </div>
                        <div>
                            <div class="row">
                                <div class="col-md-8 mt-2" style="display: flex;">
                                    <div>
                                        <button class="btn-sm btn btn-primary" id="add" style="margin: 0 0 15px 45px;" ><i class="fa fa-plus-circle" aria-hidden="true"></i> Add</button>
                                    </div>
                                    <div style="margin-left: 19px;">
                                        <button class="btn-sm btn btn-danger pull-right" data-dismiss="modal" style="margin: 0 17px 15px 0;" >Cancel</button>
                                    </div>


                                </div>

                            </div>


                        </div>
                    </form>



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



@endsection

@section('dynamic_js')
    <script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    <script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>

    <!--<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>-->
    <script>


        $(document).on('change','#district',function () {
            $('.page-loader-wrapper').fadeIn();
            var dis_id=$('#district').val();
            $('#block').empty();
            var option = "<option value=''>==== Select A Block ====</option>";
            $('#block').append(option);
            $('#panchyat').empty();
            var option = "<option value=''>==== Select Gram Panchayat ====</option>";
            $('#panchyat').append(option);
            $.ajax({
                // headers: {
                //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                // },
                type: "GET",
                url: "{{route('get_employees_blocks')}}",
                dataType: 'json',
                data: {'dis_id': dis_id,},
                success: function (data) {
                    $('.page-loader-wrapper').fadeOut();

                    $('#block').empty();
                    var option = "<option value=''>==== Select A Block ====</option>";
                    $.each(data,function (index,value) {
                        option += '<option class="block_name_count" value="'+value.block_id+'">'+value.block_name+'<span style="color:red;">('+value.count+')</span></option>'
                    });

                    $('#block').append(option);




                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('.page-loader-wrapper').fadeOut();
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'Something went wrong!',

                    })
                }
            })

        });



        $(document).ready(function(){
            $('.employeeList').DataTable({
                "processing": true,
                "serverSide": true,
                "responsive": true,
                "scrollX": true,
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                dom: 'Blfrtip',
                "language": {
                    "processing": 'Loading data...'
                },

                "ajax": {
                    "url": "{{ route('user_fetch_mgnrega_photo_list')}}",
                    "data": function (d) {
                        d.dis_id=$('#district').val();
                        d.block_id=$('#block').val();


                    }
                },
                "columns": [
                    {data: 'DT_Row_Index'},

                    {"data": "district_name"},
                    {"data": "block_name"},
                    {"data":"work_code"},
                    {"data": "value_work"},
                    {"data": "d_sanction"},


                    {"data": "d_complition"},
                    {"data": "view"},

                ]

            });

        });


        $(document).on('click', '.search', function (e) {
            e.preventDefault();
            $('.employeeList').DataTable().ajax.reload();

        });
    </script>
@endsection