@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-event-calendar-symbol text-primary"></i>
            </span>
            <h3 class="card-label">Manage Days Off</h3>
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <button type="button" onclick="changeListType(this,'out')" class="btn btn-primary font-weight-bold outstanding_btn">OutStanding</button>
        <button type="button" onclick="changeListType(this,'com')" class="btn btn-default font-weight-bold completed_btn">Completed</button>
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Off Day</th>
                    <th>Message</th>
                    <th>Requisition Day</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Manage Days Off</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        var listType="outstanding";
        var ajax_datatable_list = null;
        var tableName = $('#datatable');
        $(document).ready(function(){
            initializeDatatable(); 
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 
            $('body').on('click','.change-status', changeStatusHandler);  
            $('body').tooltip({selector: '[data-toggle="tooltip"]'});
        })

        function changeListType(obj, type){
            if(type=="out"){
                $(".completed_btn").removeClass('btn-primary').addClass('btn-default');
                $(".outstanding_btn").removeClass('btn-default').addClass('btn-primary');
                listType="outstanding";
            }else if(type=="com"){
                $(".outstanding_btn").removeClass('btn-primary').addClass('btn-default');
                $(".completed_btn").removeClass('btn-default').addClass('btn-primary');
                listType="completed";
            }
            initializeDatatable()
        }
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = tableName.DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('schedule.timeoff.ajax.list')}}?listType="+listType+"",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.get_profile!=null ? full.get_profile.profile_first_name+' '+full.get_profile.profile_last_name : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.off_date!=null ? moment(full.off_date).format(moment_date_format) : '';
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.req_message!=null ? full.req_message : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.created_at!=null ? moment(full.created_at).tz('America/Chicago').format(moment_date_time_format) : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            if(full.status == 0){
                               html += `
                               <div class="radio-inline">
                               <label class="radio radio-outline radio-success">
                                    <input type="radio" name="radios18" value="1" class="change-status" data-text="You want to Approve it ?" data-btn="Yes" data-id="${full.id}"/>
                                    <span></span>
                                    Approve
                                </label>
                                <label class="radio radio-outline radio-danger">
                                    <input type="radio" name="radios19" value="-1" class="change-status" data-text="You want to Reject it ?" data-btn="Yes" data-id="${full.id}"/>
                                    <span></span>
                                    Reject
                                </label>
                                </div>
                                `; 
                            }else if(full.status == 1){
                                html += `
                                <a href="javascript:" class="btn btn-md btn-text-success btn-icon-success btn-hover-bg-light " data-toggle="tooltip" title="Reason : ${full.type_of_time_off}"><i class="far fa-calendar-check"></i> Approved</a>
                                `;
                                html +=`<button class="btn btn-light btn-text-warning btn-hover-warning font-weight-bold change-status" value="-1" data-text="You want to Reject this approval ?" data-btn="Yes" data-id="${full.id}"> Change Mind ?</button>
                                `;

                            }else if(full.status == -1){
                                html += `<a href="javascript:" class="btn btn-md btn-text-danger btn-icon-danger btn-hover-bg-light"><i class="far fa-calendar-times"></i> Rejected</a>`;
                                html +=`<button class="btn btn-light btn-text-warning btn-hover-warning font-weight-bold change-status" value="1" data-text="You want to Approve this rejection ?" data-btn="Yes" data-id="${full.id}"> Change Mind ?</button>
                                `;
                            }
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        function changeStatusHandler() {
            $('.swal2-select').addClass('form-control');
            var $this = $(this);
            var timeOffId = $(this).attr('data-id');
            var statusValue = $(this).val();
            var text = $(this).attr('data-text');
            var confirmButtonText = $(this).attr('data-btn');
            
            Swal.fire({
                title: "Are you sure?",
                text: text,
                input: (statusValue == 1) ? 'select' : '',
                inputOptions: {
                    Holiday: 'Holiday',
                    PTO: 'PTO',
                    Bereavement: 'Bereavement',
                    SickPay : 'SickPay'
                },
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                showLoaderOnConfirm: true,
                customClass: {
                    input: 'form-control',  
                },
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{route('schedule.timeoff.status.change')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {timeOffId:timeOffId,statusValue:statusValue,typeOfTimeOff:result.value},                    
                        success: function (response) {
                            if(response.status){
                                Swal.fire(
                                    response.title,
                                    response.message,
                                    response.swal
                                )
                            }else{
                               toastr.error(response.message); 
                            }
                        },
                        error: function (response) {
                            toastr.error("An error occurred");                                
                        },
                        complete:function(){
                            initializeDatatable();
                        }
                    }); 
                }else{
                    $this.prop('checked', false);
                }
            });
        }
    </script>
@endsection