@extends('layouts.main')
@section('page_css')
<style>
i.fa-circle {
    filter: drop-shadow(0px 0px 3px #aaa);
}
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-time text-primary"></i>
            </span>
            <h3 class="card-label">Shift</h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('shift.add.modal') }}')" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon  svg-icon-2x"><!--begin::Svg Icon | path:C:\wamp64\www\keenthemes\legacy\metronic\theme\html\demo7\dist/../src/media/svg/icons\Code\Time-schedule.svg-->
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"/>
                        <path d="M10.9630156,7.5 L11.0475062,7.5 C11.3043819,7.5 11.5194647,7.69464724 11.5450248,7.95024814 L12,12.5 L15.2480695,14.3560397 C15.403857,14.4450611 15.5,14.6107328 15.5,14.7901613 L15.5,15 C15.5,15.2109164 15.3290185,15.3818979 15.1181021,15.3818979 C15.0841582,15.3818979 15.0503659,15.3773725 15.0176181,15.3684413 L10.3986612,14.1087258 C10.1672824,14.0456225 10.0132986,13.8271186 10.0316926,13.5879956 L10.4644883,7.96165175 C10.4845267,7.70115317 10.7017474,7.5 10.9630156,7.5 Z" fill="#000000"/>
                        <path d="M7.38979581,2.8349582 C8.65216735,2.29743306 10.0413491,2 11.5,2 C17.2989899,2 22,6.70101013 22,12.5 C22,18.2989899 17.2989899,23 11.5,23 C5.70101013,23 1,18.2989899 1,12.5 C1,11.5151324 1.13559454,10.5619345 1.38913364,9.65805651 L3.31481075,10.1982117 C3.10672013,10.940064 3,11.7119264 3,12.5 C3,17.1944204 6.80557963,21 11.5,21 C16.1944204,21 20,17.1944204 20,12.5 C20,7.80557963 16.1944204,4 11.5,4 C10.54876,4 9.62236069,4.15592757 8.74872191,4.45446326 L9.93948308,5.87355717 C10.0088058,5.95617272 10.0495583,6.05898805 10.05566,6.16666224 C10.0712834,6.4423623 9.86044965,6.67852665 9.5847496,6.69415008 L4.71777931,6.96995273 C4.66931162,6.97269931 4.62070229,6.96837279 4.57348157,6.95710938 C4.30487471,6.89303938 4.13906482,6.62335149 4.20313482,6.35474463 L5.33163823,1.62361064 C5.35654118,1.51920756 5.41437908,1.4255891 5.49660017,1.35659741 C5.7081375,1.17909652 6.0235153,1.2066885 6.2010162,1.41822583 L7.38979581,2.8349582 Z" fill="#000000" opacity="0.3"/>
                    </g>
                </svg><!--end::Svg Icon-->
            </span>
            Create Shift</a>
            <!--end::Button-->
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table class="table table-bordered table-hover table-checkable" id="datatable">
            <thead>
                <tr>
                    <th>Shift Name</th>
                    <th>Team Name</th>
                    <th>Start Time</th>
                    {{-- <th>End Time</th> --}}
                    <th>Actions</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">Shift</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="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection
@section('page_js')
    <script>
        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"]'});  
            $('body').on('focus','#start', function(){
                $(this).timepicker({
                    timeFormat: 'hh:mm p',
                    minuteStep: 1,
                    defaultTime: '',
                    showSeconds: false,
                    showMeridian: true,
                    snapToStep: true
                });
            });
        })
        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('shift.ajax.list')}}",
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.name + '<i class="fas fa-circle ml-5" style="color: '+full.color+'"></i>'
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.get_team_details!=null ? full.get_team_details.team_name : '';
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.start!=null ? full.start : '';
                        }
                    },
                    // {
                    //     sortable: false,
                    //     "render": function(data, type, full, meta) {
                    //         return full.end!=null ? full.end : '';
                    //     }
                    // },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            html += `
                            <button class="btn btn-md btn-light-warning btn-icon btn-circle"  onclick="openModalAndShow('${getWebUrl('shift-edit-modal/'+full.id)}')" data-toggle="tooltip" title="Edit Shift"><i class="flaticon-edit-1"></i></button>
                            `;

                            if(full.status == 1){
                               html += `
                                <a href="javascript:" class="btn btn-md btn-light-success btn-icon btn-circle change-status" data-toggle="tooltip" title="Disable Shift" data-id="${full.id}" data-text="This Status will disable after your action!" data-btn="Yes, disable it!" data-toggle="tooltip"><i class="flaticon2-time"></i></a>
                                `; 
                            }else{
                                html += `
                                <a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle change-status" data-toggle="tooltip" title="Enable Shift" data-id="${full.id}" data-text="This Status will Enable after your action!" data-btn="Yes, Enable it!" data-toggle="tooltip"><i class="flaticon2-time"></i></a>
                                `;
                            }
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_list;
        }

        function changeStatusHandler() {
            var shiftId = $(this).attr('data-id');
            var text = $(this).attr('data-text');
            var confirmButtonText = $(this).attr('data-btn');
            Swal.fire({
                title: "Are you sure?",
                text: text,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{route('shift.ajax.status.change')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {shiftId:shiftId},                    
                        success: function (response) {
                            if(response.status){
                                Swal.fire(
                                    response.title,
                                    response.message,
                                    "success"
                                )
                            }else{
                               toastr.error(response.message); 
                            }
                        },
                        error: function (response) {
                            toastr.error("An error occurred");                                
                        },
                        complete:function(){
                            initializeDatatable();
                        }
                    }); 
                }
            });
        }
    </script>
@endsection