@extends('layouts.main')
@section('page_css')
<style>
.dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable td{
    padding:9px;
}
li.list-inline-item {
    width: 24%;
    vertical-align: top;
}
i.fa-circle {
    filter: drop-shadow(0px 0px 3px #aaa);
}
.same-line {
    display: inline-flex;
}
.same-line__edit{
    display: grid;
}

</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-event-calendar-symbol text-primary"></i>
            </span>
            <h3 class="card-label">Scheduling for <span class="text-warning">{{ isset($schedule->name) ? $schedule->name : ''}}</span></h3>
        </div>
        
        <div class="card-toolbar">
            <!--begin::Button-->
            <a  href="javascript:;" onclick="openModalAndShow('{{ route('schedule.schedulelist.modal',[$team->id]) }}')" class="btn btn-warning font-weight-bolder btn-sm">
            <i class="flaticon-calendar-with-a-clock-time-tools"></i> Change Week</a>
            <!--end::Button-->
        </div>
        
    </div>
    <div class="card card-custom card-fit card-border">
        <div class="card-header">
            <div class="card-title">
                <span class="card-icon">
                    <i class="flaticon-time text-primary"></i>
                </span>
                <h3 class="card-label">Career Path Legend</h3>
            </div>
        </div>
        <div class="card-body pt-2">
            <ul class="list-inline">
                @foreach ($careerPath as $career)
                <li class="list-inline-item mb-3">
                    {{-- <span title="Color" class="btn btn-icon btn-xs mr-2 mb-2" style="border-color: #b1b6c5; background-color: {{$career->color}}"></span> --}}
                    <i class="fas fa-circle mr-2" style="color: {{$career->color}}"></i>
                    <span class="">{{$career->name}}  </span>
                </li>
                @endforeach
              </ul>
        </div>
    </div>
    <div class="card-body" id="schedule-table">
        @include('schedule.partials.schedule_list', array('profiles'=>$profiles,'mondayDate'=>$mondayDate,'tuesdayDate'=>$tuesdayDate,'wedDate'=>$wedDate,'thursDate'=>$thursDate,'friDate'=>$friDate,'saturdayDate'=>$saturdayDate,'sundayDate'=>$sundayDate,'schedule'=>$schedule,'team'=>$team,'shifts'=>$shifts))
    </div>    
    <div class="card-body">
        <div class="card card-custom card-fit card-border">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="flaticon-time text-primary"></i>
                    </span>
                    <h3 class="card-label">Shifts Legend</h3>
                    <a href="javascript:;" class="btn btn-light-warning font-weight-bold mr-2" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="sendShiftNotification(this)">
                        <i class="flaticon-alert"></i>Shift Notification</a>
                </div>
                
                @if ((!empty($loggedUserDetails['team_trainer_id']) && $loggedUserDetails['team_trainer_id'] > 0 && $loggedUserDetails['role'] != 0) || $loggedUserDetails['role'] == 2)
                <div class="card-toolbar">
                    <a href="javascript:;" class="btn btn-light-info font-weight-bold mr-2" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="sendScheduleNotification(this)">
                        <i class="flaticon-alert"></i>New Schedule Notification</a>
                    <a href="javascript:;" class="btn btn-sm btn-primary font-weight-bold" onclick="openModalAndShow('{{ route('schedule.duplicate.modal',[$team->id]) }}')">
                    <i class="flaticon-file-2"></i>Duplicate Schedule</a>
                    @if(!empty($check_schedule) && $check_schedule->active==0)
                    <a href="javascript:;" class="btn btn-sm btn-primary font-weight-bold" data-team="{{ $team->id }}" data-schedule="{{ $schedule->id }}" onclick="activeSchedule(this)">
                        <i class="flaticon-file-2"></i>Publish Schedule</a>
                    @endif
                </div>
                @endif
            </div>
            <div class="card-body pt-2">
                <ul>
                    @foreach ($shifts as $shift)
                        <li class="font-size-h6 checkbox-inline">
                            <label class="checkbox checkbox-rounded checkbox-success">
                                <input type="checkbox" name="notificaiton_shift_id" value="{{$shift->id}}" class="notificaiton-shift-id"/>
                                <span></span>
                            </label>
                            <span class="btn btn-icon btn-xs mr-2 mb-2" style="background-color: {{$shift->color}}"></span>{{ucwords($shift->name)}}  (<span class="text-success">{{$shift->start}}</span>)
                            
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
       
    </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">Schedule for <span class="text-info">{{$team->team_name}}</span></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>
        @if ($loggedUserDetails['guard'] == 'user')
        <div class="d-flex align-items-center">
            <!--begin::Actions-->
            <a href="javascript:;" onclick="openModalAndShow('{{ route('schedule.team.modal') }}')" class="btn btn-light-info font-weight-bolder btn-sm"><i class="flaticon-network"></i> Change Team</a>
            <!--end::Actions-->
        </div>
        @endif
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection
@section('page_css')
<style>
    .same-line{display: flex; align-items: center;}
    .same-line button{margin-left: 5px;}
    .dataTable td{padding: 13px 5px !important; }
    .dataTables_scrollHead, .dataTables_scrollBody {
        box-shadow: 0px 2px 7px #ccc;
    }
</style>

@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>
<script src="{{ $common->getTheamUrl('assets/js/pages/crud/datatables/extensions/scroller.js') }}"></script>
@endsection
@section('page_js')

    <script>
        var ajax_datatable_list = null;
        var tableName = $('#datatable');
        var buttonElement = '';
        $(document).ready(function(){

            initializeDatatable(); 
            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif 
            $('[data-toggle="tooltip"]').tooltip()
            $('[data-toggle="popover"]').popover()

            $(document).on('submit', '#schedule-select-form', function(e){
                e.preventDefault();
                var scheduleId = $('#schedule_id').val();
                if(scheduleId!=''){
                  window.location = $(this).attr('action')+'/?schedule_id='+scheduleId;
                }else{
                  $('#schedule_id').addClass('is-invalid');
                  $('#schedule_id').closest('.form-group').find('.invalid-feedback').html('Please select Team!')
                }
            });

            $('body').on('change','.save_shift', saveShiftHandler);
            
            $(document).on('submit', '#schedule-note-form', function(e){
                e.preventDefault();
                var _that=$(this);
                var button=$(this).find('[type="submit"]');
                var loadingHtml=`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing`;
                var buttonHtml=$(button).html();
                $(button).prop('disabled', true).html(loadingHtml)

                $(".invalid-feedback").html('');
                $(".is-invalid").removeClass('is-invalid')
                $.ajax({
                  url : $(this).attr('action'),
                  type : 'post',
                  dataType : "json",
                  data : $(this).serialize(),
                  success: function(response) {
                    $(button).html(buttonHtml);
                    if(response.status){
                      if (response.message) {
                        toastr.success(response.message);
                        if(response.is_admin_note){
                            buttonElement.closest('td').children('div.same-line').children('div.same-line__edit').append('<i class="fas fa-circle text-danger icon-xs ml-2"></i>');
                        }else{
                            buttonElement.closest('td').find('i.fa-circle').remove()
                        }
                        
                      }
                                           
                    } else {
                      $(button).prop('disabled', false)
                      if (response.message) {
                        toastr.error(response.message);
                      }
                      if(response.errors){
                        Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(_that).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                        });
                      }
                    }
              
                  },
                  error: function(response) {
                    $(button).prop('disabled', false).html(buttonHtml);
                    if (response.message) {
                      toastr.error(response.message);
                    }
                  },
                  complete: function(response) {
                      $('#southwind_modal').modal('hide');
                  }
                });
            });
            
            $('input.notificaiton-shift-id').on('change', function() {
                $('input.notificaiton-shift-id').not(this).prop('checked', false);  
            });

            $('body').on('click','.change-status', changeStatusHandler); 

            $('body').on('click','.edit-note-btn',function(){
                buttonElement =$(this);
            });
        })
        function initializeDatatable() {
            if (ajax_datatable_list) {
                ajax_datatable_list.destroy();
            }

            ajax_datatable_list = tableName.DataTable({                
                'scrollX': true,
                'scrollY': '700px',
                'scrollCollapse': true,   
                'paging': false,
                'lengthChange': false,
                'searching': true,
                'ordering': false,
                'pageLength' : datatablePageLength,                            
            });

            
            return ajax_datatable_list;
        }

        function saveShiftHandler() {
            var profileId = $(this).attr('data-pid');
            var scheduleId = $(this).attr('data-sid');
            var teamId = $(this).attr('data-tid');
            var day = $(this).attr('data-day');
            var shiftId = $(this).val();
            var $this = $(this);
            var option = $('option:selected', $this).attr('data-color');
            let pageScrollPos = $('.dataTables_scrollBody').scrollTop(); 
            let bgColor = $(this).find(':selected').attr('data-color'); 

            let totalShift = parseInt($(this).closest('tr').find('td:last').text());
            let tdIndex = $(this).closest('td').index();
            let trLastIndex = ajax_datatable_list.row('tr:last').index(); 
            
            $.ajax({
                    url: "{{route('schedule.save.shift')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {profileId:profileId,scheduleId:scheduleId,teamId:teamId,day:day,shiftId:shiftId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Shift save successfuly');
                            if(response.show){
                                if(shiftId != ''){
                                    if(response.count){ totalShift += 1; }
                                    $this.closest('td').css('background-color',bgColor);
                                    $this.next('.same-line__edit').children('.edit-note-btn').show();
                                }else{
                                    totalShift -= 1;
                                    $this.closest('td').css('background-color','transparent');
                                    $this.next('.same-line__edit').children('.edit-note-btn').hide();
                                    $this.next('.same-line__edit').children('.fa-circle.text-danger').hide();
                                }
                                if(totalShift > 0){
                                    $this.closest('tr').find('td:last').css('background-color','yellow');
                                }else{
                                    $this.closest('tr').find('td:last').css('background-color','transparent');
                                }
                                $this.closest('tr').find('td:last').html('<div style="text-align:center; ">'+totalShift+'</div>');
                                ajax_datatable_list.cell(trLastIndex,tdIndex).data(response.html);
                            }else{
                                //$this.next().hide();                                 
                                //$this.parent().parent().css('background-color','');
                            }
                            //window.location.reload(true)
                            
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });

        
            }

        function activeSchedule(obj){
            var schedule_id = $(obj).attr('data-schedule');
            var teamId = $(obj).attr('data-team');
   

            $.ajax({
                    url: "{{route('schedule.duplicate.active')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Schedule activated successfuly');
                           
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
        }
        function sendScheduleNotification(obj){
            var schedule_id = $(obj).attr('data-schedule');
            var teamId = $(obj).attr('data-team');
            $.ajax({
                    url: "{{route('schedule.notification')}}",
                    type: 'get',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Notification sent successfuly');
                        }else{
                            toastr.error('Not Saved!, Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
        }

        function sendShiftNotification(obj){
            let schedule_id = $(obj).attr('data-schedule');
            let teamId = $(obj).attr('data-team');
            let shiftId = $('input[name="notificaiton_shift_id"]:checked').val();;
            if(!shiftId){
                toastr.error("No Shift was selected.");  
            }else{
                $.ajax({
                    url: "{{route('schedule.notification.shift')}}",
                    type: 'post',
                    dataType: 'json',
                    data: {schedule_id:schedule_id,team_id:teamId, shift_id:shiftId},
                    success: function (response) {
                        if(response.status){
                            toastr.success('Shift Notification Sent!');
                           
                        }else{
                            toastr.error(' Try after some time.'); 
                        }
                    },
                    error: function (response) {
                        toastr.error("An error occurred");                                
                    },                    
                });
            }
        }

        function changeStatusHandler() {
            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,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: confirmButtonText,
                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: "{{route('schedule.timeoff.status.change')}}",
                        type: 'get',
                        dataType: 'json',
                        data: {timeOffId:timeOffId,statusValue:statusValue},                    
                        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(){
                            $this.prev().prev().children().prop('disabled', false)
                            $this.prev().remove();
                            $this.remove();
                        }
                    }); 
                }else{
                    $this.prop('checked', false);
                }
            });
        }
        
    </script>
@endsection