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

            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(7){
            display: flex;
        }
        .pending th{
            text-align: center;
        } .pending td{
            text-align: center;
        }
        .reject_approve{
            width: 100% !important;
        }

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

        }
        .reject_approve th{
            text-align: center;
        }

        .reject_approve td{
            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('contactdetailschangeview')}}">Contact Details Change</a></li>
                    </ol>
                </nav>
            </div>

            <!--</div>-->

            <input type="hidden" name="image_url" id="image_url" value="{{ $global_data['config']->image_url }}">


            <!--    <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">Contract From</th>
                                        <th scope="col">Contract To</th>
                                        <th scope="col">Contract Sign With</th>

                                        <th scope="col">Action</th>
                                        <th></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">Contract From</th>
                                        <th scope="col">Contract To</th>
                                        <th scope="col">Contract Sign With</th>

                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>

                        </div>
                    </div>

                </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": "{{ route('contractDetailsChangeRequest') }}",
                "columns": [
                    {data: 'DT_Row_Index', name: 'DT_Row_Index'},
                    {"data": "employee_code"},
                    {"data": "name"},
                    {"data": "contract_from"},
                    {"data": "contract_to"},
                    {"data": "contract_sign_with"},
                    {"data": "action"},

                ]
            });


            $('.reject_approve').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('contractdetailsApproveReject') }}",
                "columns": [
                    {data: 'DT_Row_Index', name: 'DT_Row_Index'},
                    {"data": "employee_code"},
                    {"data": "name"},
                    {"data": "contract_from"},
                    {"data": "contract_to"},
                    {"data": "contract_sign_with"},
                    {"data": "action"},

                ]


            });


            $(document).on('click', '#approve_contract', 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('contractdetailsApprove')}}",
                        dataType: 'json',
                        data: {'approved_id': approved_id},
                        success: function (data) {
                            if (data.msg == 'success') {

                                swal("Success!", "Contract 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_contract', 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('contractdetailsReject')}}",
                    dataType: 'json',
                    data: {'approved_id': approved_id},
                    success: function (data) {
                        if (data.msg == 'success') {

                            swal("Success!", "Contract 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!',

                        })
                    }
                })
            }

        });

        });






    </script>


@endsection