@extends('layouts.app2') 
@section('badcome')

@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/table_style.css') !!}" media="all" rel="stylesheet" type="text/css" />
<style>
    label.search_panel {

        margin-bottom: 0.4rem;
        padding-left: .5rem;
        background-color: #3f51b5;
        color: white;

        border-bottom-left-radius: .3rem;
        border-top-left-radius: .3rem;
    }

    .f30 {
        font-size: 30px;
    }

    .display_flex {
        display: flex;
    }

    .display_flex label {
        padding-right: 10px;
        padding-top: 8px;
    }

    .form-control {
        border-radius: .0001rem;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        padding: 10px 18px;
        border-bottom: 7px solid #f3f3f3;

    }

    table.dataTable.no-footer {
        border-bottom: 1px solid white;
    }

    .btn.btn-xsm {
        padding: 0.2rem .6rem;
        font-size: 0.54rem;
    }

    @media (max-width: 768px) {
        .col {
            -ms-flex-preferred-size: 0;
            flex-basis: auto;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }

        .display_flex label {
            width: 100px;
        }

        .display_flex {
            margin-bottom: 10px;
        }

        .btn_align {
            float: right;
        }
        label {
            margin-bottom: 0.0rem;
        }
    }

    .pending{
        width: 100% !important;
    }

    .pending tbody tr td:nth-child(8){
        display: flex;
    }
    /* .bhal {
        padding: 8px;

    } */
    .btn.btn-sm {
     padding: 8px; 
    font-size: .64rem;
}
    /* .pending tbody tr td:nth-child(7){
        padding: 2px !important;
        padding: 0px !important;
    } */
    /* .pending th{
        text-align: center;
    } */
    /* .reject_approve{
        width: 100% !important;
    } */

    .reject_approve tbody tr td:nth-child(8){

    }
    .reject_approve th{
        text-align: center;
    }
</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="{{route('employees')}}">Employees</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('bankdetailschangeview')}}">Bank Details Change</a></li>
                </ol>
            </nav>
        </div>
        <div class="col-md-12 pl0 pr0 mt5">
            <div class="card">
                <div class="card-body">

                    <form method="" id="search_form" role="form" class="form-horizontal row justify-content-center">
                        {{csrf_field()}}
                        <div class="col-md-3 display_flex">
                            <label class="control-label search_panel" style="width: 160px;"><i class="fa fa-calendar" aria-hidden="true"></i><strong> MONTH</strong> </label>
                            <select class="form-control input-md text-center" id="month" name="month">
                                  <option value="" selected>== Select A Month ==</option>
                                @foreach($month_array as $month)
                                    <option value="{{$month['month']}}" @if($current_month==$month['month']) {{'selected'}} @endif >{{$month['month_name']}} </option>
                                @endforeach
                           </select>
                        </div>
                        <div class="col-md-3 display_flex">
                            <label class="control-label search_panel" style="width: 160px;">
                                <i class="fa fa-calendar-o" aria-hidden="true"></i><strong> YEAR </strong>
                            </label>
                            <select class="form-control input-md" id="year" name="year">
                                  <option value="" disabled selected>== Select A Year ==</option>
						       @foreach($year_array as $year)
                                    <option value="{{$year['year']}}" @if($current_year==$year['year']) {{'selected'}} @endif >{{$year['year']}} </option>
                                @endforeach
                              </select>
                        </div>
                        <div class="col-md-4 display_flex ">
                            <label class="control-label search_panel" style="width: 160px;"><i class="fa fa-map-marker" aria-hidden="true"></i><strong> LOCATION </strong></label>
                            <select class="form-control input-md" id="location" name="location" @if($level_code==4) {{ 'disabled'}} @endif>
                                  <!--<option value="" disabled selected>=== Select A Location ===</option>-->

						       @foreach($location_array as $loc)
                                    <option value="{{$loc['location_id']}}" @if($location_code==$loc['location_id']) {{'selected'}} @endif >{{$loc['location_name']}} </option>
                                @endforeach
                              </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary  btn-md mt0 btn_align" id="data_search"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                        </div>
                    </form>

                </div>

            </div>

        </div>
    <!--</div>-->

    <input type="hidden" name="image_url" id="image_url" value="{{ $global_data['config']->image_url }}">
    <!-- <input type="hidden" name="location" id="location" value="@if($level_code==1){{1}}@else{{$location_code}}@endif" >-->

<!--    <div class="row">-->
        <div class="col-md-12 pl0 pr0 mt10">
            <div class="card">
                <div class="card-body row">
                    <div class="col-md-12">
                        <h7><strong>PENDING REQUEST <i class="fa fa-angle-double-right fa-lg" aria-hidden="true"></i></strong> </h7>
                        <hr>
                    </div>
                    <div class="col-md-12" style="min-height:100px;">
                        <div id="bank_details_change_request_div">
                            <table class="table table-responsive pending" cellspacing="10">
                                <thead>
                                    <tr class="note note-primary">
                                        <th scope="col" class="note-dange">#</th>
                                        <th scope="col">Employee Code</th>
                                        <th scope="col">Employee Name</th>
                                        <th scope="col">Bank Name</th>
                                        <th scope="col">Ifsc Code</th>
                                        <th scope="col">Account Number</th>
                                        <th scope="col">Passbook</th>
                                        <th scope="col">Action</th>
                                        
                                    </tr>
                                </thead>
                            
                            </table>
                        </div>
                          


                    </div>
                    <div class="col-md-12 pl0 pr0">
                        <hr style="border-top: 10px solid #e6e6e6;">
                    </div>
                    <div class="col-md-12">
                        <h7><strong>APPROVED AND REJECT REQUEST <i class="fa fa-angle-double-right fa-lg" aria-hidden="true"></i></strong> </h7>
                        <hr>
                    </div>
                    <div class="col-md-12">
                       <div id="bank_details_accept_request_div">
                            <table class="table table-responsive reject_approve" cellspacing="10" id="bank_details_accept_request">
                                <thead>
                                    <tr class="note note-primary">
                                        <th scope="col" class="note-dange">#</th>
                                        <th scope="col">Employee Code</th>
                                        <th scope="col">Employee Name</th>
                                        <th scope="col">Bank Name</th>
                                        <th scope="col">Ifsc Code</th>
                                        <th scope="col">Account Number</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Status</th>
                                    </tr>
                                </thead>

                            </table>
                       </div> 

                    </div>
                </div>

            </div>

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

<!-- Modal -->
<div class="modal fade" id="docView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><strong><i class="fa fa-file" aria-hidden="true"></i>  Bank Document</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body" style="background-color:#a2a2a2;">
                <div class="text-center" style="padding:0px 50px 0px 50px;" id="documentContainer">
                    <!--<img src="" class="img-fluid imgUrl" id="imgUrl" style="height: 500px;">-->
                    <!--<iframe class="pdf-iframe" id="iframe" width="100%" height="500px" src=""></iframe>-->
                </div>
            </div>
            <div class="modal-footer text-center" style="justify-content: center;">
                <button type="button" class="btn btn-light" onClick="zoomin();" style="border-radius: 50px;"><i class="fa fa-plus" aria-hidden="true"></i>
</button>
                <button type="button" class="btn btn-light" onClick="zoomout();" style="border-radius: 50px;"><i class="fa fa-minus" aria-hidden="true"></i>
</button>
                
                <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius: 50px;">Ok</button>
            </div>
        </div>
    </div>
</div>



@endsection

@section('dynamic_js')
<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).ready(function() {

            $('.pending').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                        "url": "{{ route('bankdetailsChangeRequest')}}",
                        "data": function (d) {
                            d.month = $('#month').val();
                            d.year = $('#year').val();
                            d.location = $('#location').val();
                        }
                },
                "columns": [
                    {data: 'DT_Row_Index', name: 'DT_Row_Index'},
                    {"data": "employee_code"},
                    {"data": "name"},
                    {"data": "bank_name"},
                    {"data": "ifsc_code"},
                    {"data": "account_no"},
                    {"data": "passbook"},
                    {"data": "action"},

                ]


            });

            $('.reject_approve').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                        "url": "{{ route('bankdetailsApproveReject')}}",
                        "data": function (d) {
                            d.month = $('#month').val();
                            d.year = $('#year').val();
                            d.location = $('#location').val();
                        }
                },
                "columns": [
                    {data: 'DT_Row_Index', name: 'DT_Row_Index'},
                    {"data": "employee_code"},
                    {"data": "name"},
                    {"data": "bank_name"},
                    {"data": "ifsc_code"},
                    {"data": "account_no"},
                    {"data": "approve_date"},
                    {"data": "action"},

                ]


            });

            $(document).on('click', '#approve_bank', function (e) {
                e.preventDefault();
                var approved_id = $(this).attr('href');
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "CONFIRM",
                    cancelButtonText: "CANCEL"
                }).then((result) => {
                    if (result.value)
                {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: "{{route('bankdetailsApprove')}}",
                        dataType: 'json',
                        data: {'approved_id': approved_id},
                        success: function (data) {
                            if (data.msg == 'success') {

                                swal("Success!", "Bank Details approved successfully!", "success");
                                $('.reject_approve').DataTable().ajax.reload();
                                $('.pending').DataTable().ajax.reload();

                            }
                            if (data.msg == 'failed') {

                                Swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!'

                                })


                            }


                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                            Swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!',

                            })


                        }
                    })
                }


            });
            });

            $(document).on('click', '#reject_bank', function (e) {
                e.preventDefault();
                var reject_id = $(this).attr('href');
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "CONFIRM",
                    cancelButtonText: "CANCEL"
                }).then((result) => {
                    if (result.value)
                    {
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "POST",
                            url: "{{route('bankdetailsReject')}}",
                            dataType: 'json',
                            data: {'reject_id': reject_id},
                            success: function (data) {
                                if (data.msg == 'success') {

                                    swal("Success!", "Bank Details rejected successfully!", "success");
                                    $('.reject_approve').DataTable().ajax.reload();
                                    $('.pending').DataTable().ajax.reload();

                                }
                                if (data.msg == 'failed') {

                                    Swal.fire({
                                        type: 'error',
                                        title: 'Oops...',
                                        text: 'Something went wrong!'
                                    })
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                Swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!',

                                })

                            }
                        })
                    }
               });


            });

            $(document).on('submit', '#search_form', function (e) {
                e.preventDefault();
                $('.reject_approve').DataTable().ajax.reload();
                $('.pending').DataTable().ajax.reload();
            });

          
            
            
            
        });






    </script>

@endsection