@extends('admin.layout.master')

@section('content')
    <style>
        .col-lg-3 {
            cursor: pointer;
        }
    </style>
    <!-- Content Header (Page header) -->
    <div class="content-header">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                </p>
            @endif
        @endforeach
        <div class="container-fluid">
            <div class="row ">
                <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.col -->
            @if(!empty($WidgetData))
            <div class="text-right">
                <b>Last updated at {{ date('g:i A',strtotime($lastupdatedate->update_at)) }}</b>
            </div>
            @endif
            <div class="row mt-3" id="sortable">

                @foreach ($widgetDataOrder as $wo)
                    @foreach ($WidgetData as $w)
                        @if ($wo == $w->id)
                            @if ($w->type == 1)
                                <div class="col-lg-3 col-6" data-id="{{ $w->id }}">

                                    <div class="box1-{{ $w->id }} small-box bg-danger">
                                        <div class="inner">
                                            <h3 class="value1-{{ $w->id }}">0</h3>
                                            <p>{{ $w->widgets_name }}</p>
                                        </div>
                                        <div class="icon">
                                            <i class="ion ion-pie-graph"></i>
                                        </div>
                                        <a href="{{ $w->widgets_link }}" class="small-box-footer widgets-link-{{ $w->id }}">More info <i
                                                class="fas fa-arrow-circle-right"></i></a>
                                    </div>
                                </div>
                            @elseif($w->type == 2)
                                <div class="col-lg-3 col-6" data-id="{{ $w->id }}">

                                    <div class="box2-{{ $w->id }} small-box bg-danger">
                                        <div class="inner">
                                            <h3 class="value1_2-{{ $w->id }}">0($0)</h3>
                                            <p>{{ $w->widgets_name }}</p>
                                        </div>
                                        <div class="icon">
                                            <i class="ion ion-pie-graph"></i>
                                        </div>
                                        <a href="{{ $w->widgets_link }}" class="small-box-footer widgets-link-{{ $w->id }}">More info <i
                                                class="fas fa-arrow-circle-right"></i></a>
                                    </div>
                                </div>
                            @else
                                <div class="col-lg-3 col-6" data-id="{{ $w->id }}">

                                    <div class="box3-{{ $w->id }} small-box bg-danger">

                                        <div style="padding: 10px;">

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="inner">
                                                        <h3 class="value1-{{ $w->id }}">$0</h3>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="inner">
                                                        <h4 class="text-right value2-{{ $w->id }}">0%</h4>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="inner">
                                                        <h5 class="value3-{{ $w->id }}">0</h5>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="inner">
                                                        <h5 class="text-right value4-{{ $w->id }}">0%</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <p class="text-center">{{ $w->widgets_name }}</p>
                                        <a href="{{ $w->widgets_link }}" class="small-box-footer widgets-link-{{ $w->id }}">More info <i
                                                class="fas fa-arrow-circle-right"></i></a>
                                    </div>
                                </div>
                            @endif
                        @endif
                    @endforeach
                @endforeach

            </div>

        </div>

        @if(auth()->check() && auth()->guard('admin')->user()->id != '45' && !empty($WidgetData))
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-body table-responsive" id="getTrendsData"
                    page-url="{{ url('admin/dashboard-trends') }}">
                </div>
            </div>
        </div>
        @endif
@if(auth()->guard('admin')->user()->is_task_permission == 1)
  <div class="row">
      <div class="col-lg-12">
          <div class="card">
              @if(!empty($admin_sales_rep_id))
                  <h3 class="ml-4 mt-2 mb-0">My Tasks</h3>
              @else
                  <h3 class="ml-4 mt-2 mb-0">Tasks</h3>
              @endif

              <div class="card-body">
                  <div class="table-responsive ">
                      <table id="TaskList" class="table table-bordered table-striped" >
                          <thead class="thead-dark">
                              <tr>
                                  <th>Customer ID</th>
                                  <th>Customer Name</th>
                                  <th>Business</th>
                                  <th>Contacts</th>
                                  <th>Business Group</th>
                                  <th>Lifetime #</th>
                                  <th>Lifetime $</th>
                                  <th>Activity</th>
                                  <th>Completed</th>
                              </tr>
                          </thead>
                          <tbody>
                              @if(!$customer_task->isEmpty())
                                  @foreach ($customer_task as $task)
                                      <tr>

                                          <td><a href="{{ route('admin.customer-profile-information',$task->Customer_ID) }}?type=task-history" style="color:#007bff; cursor:pointer;">{{ str_pad($task->Customer_ID, 6, '0', STR_PAD_LEFT) }}</a></td>
                                          <td>{{ !empty($task->Customer_Name) ? $task->Customer_Name : "-" }}</td>
                                          <td>{{ !empty($task->Business) ? $task->Business : "-" }}</td>
                                          <td>{{ !empty($task->Contacts) ? $task->Contacts : "-" }}</td>
                                          <td>{{ !empty($task->Business_Group) ? $task->Business_Group : "-" }}</td>
                                          <td>{{ !empty($task->Lifetime_order) ? $task->Lifetime_order : 0 }}</td>
                                          <td>
                                              {{ !empty($task->Lifetime_price) ? $task->Lifetime_price : 0 }}
                                          </td>
                                          <td>
                                              {{ !empty($task->Activity) ? $task->Activity : "-" }}
                                          </td>
                                          <td>
                                              @if ($task->is_completed == 0)
                                                  <input class="form-check-input text-center ml-2" type="checkbox" value="" id="flexCheckDefault" onclick="addNotesModal('{{$task->id}}')">
                                              @else
                                                  <a onclick="openNotesViewPopUp({{ json_encode($task->notes) }},{{ json_encode(date('n/d/Y',strtotime($task->completed_date)))}},{{ json_encode($task->task_Completed_Agent_Name)}})" class="btn btn-sm btn-info">View</a>
                                              @endif
                                          </td>
                                      </tr>
                                  @endforeach
                              @else
                                  <tr>
                                      <td colspan="12" class="text-center">No Task History Found....</td>
                                  </tr>
                              @endif
                          </tbody>

                      </table>
                  </div>
              </div>
          </div>
      </div>
  </div>
  @endif
    </div>
    <div class="modal" id="addNotesModal" tabindex="-1">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-start" style="margin-left:35%;">
                        <h3>Add Note</h3>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="row">
                    <div class="col-12">
                        <form id="customerNotesAddForm" action="{{ route('admin.customer-task-notes-save') }}" method="post">
                            @csrf
                            <input type="hidden" name="task_id" id="task_id" value="">
                            <div class="card-body">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="exampleFormControlTextarea1" class="form-label">Notes</label>
                                        <textarea class="form-control" id="exampleFormControlTextarea1" name="notes" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group ml-4">
                                        <input aria-labelledby="PartsWarehouse" type="hidden" name="is_completed" value="0">
                                        <input aria-labelledby="PartsWarehouse" class="form-check-input" type="checkbox" name="is_completed" checked value="1" id="flexCheckChecked">
                                        <label class="form-check-label" for="flexCheckChecked">
                                            Task Completed
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-3 form-group text-center">
                                    <button type="submit" class="btn btn-primary text-center" style="width:20%;">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="NotesTextModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-start">
                        <h3>Notes</h3>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card p-2">
                                        <div class="cDateAndcName" style="font-weight:700; font-size: 16px;"></div>
                                        <div class="notesValue mt-1" style="font-weight:500;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function() {

            $("#sortable").sortable({
                update: function(event, ui) {
                    saveWidgetSorting();
                }
            });

            $("#sortable").disableSelection();
        });
  function openNotesViewPopUp($notes,$cDate,$CuName){


            $('.notesValue').text($notes);
            $('.cDateAndcName').text($cDate +'   /   '+ $CuName);
            $('#NotesTextModal').modal('show');
        }

        function addNotesModal($task_id){
            $('#task_id').val($task_id);
            $('#addNotesModal').modal('show');
        }

        $('#addNotesModal').on('hidden.bs.modal', function () {
            $('#flexCheckDefault').prop('checked', false);
        });
  $(function () {

            $('#customerNotesAddForm').validate({
                rules: {
                    notes: {
                        required: true
                    },

                },
                messages: {
                    notes: {
                        required: "Please enter notes",
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
        function saveWidgetSorting() {

            const idsInOrder = $("#sortable").sortable('toArray', {
                attribute: 'data-id'
            });
            var widget = idsInOrder;

            console.log(widget);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('admin.dashboard-sorting-save') }}",
                dataType: "json",
                type: "POST",
                data: {
                    'widget': widget
                },

                success: function(data) {
                    // window.location.href = "{{ url('admin/dashboard') }}";
                },
            });
        }
    </script>
     <script>

        $(document).ready(function() {
            @forelse ($WidgetData as $w)
                getDashboardWidgetData({{ $w->id }});
            @endforeach

        });

        function getDashboardWidgetData(widget_no) {

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('admin.dashboard-getwidgetdata-new') }}",
                dataType: "json",
                type: "POST",
                data: {
                    'widget': widget_no
                },

                success: function(data) {

                    if(data.type == 1){
                        $('.value1-'+widget_no).text(data.value1);
                        $('.box1-'+widget_no).removeClass('bg-danger');
                        $('.box1-'+widget_no).addClass(data.colorclass);

                    }else if(data.type == 2){

                        $('.value1_2-'+widget_no).html(data.value1 + '<small>(' + data.value2 +')</small>');
                        $('.box2-'+widget_no).removeClass('bg-danger');
                        $('.box2-'+widget_no).addClass(data.colorclass);

                    }else{
                        $('.value1-'+widget_no).text(data.value1);
                        $('.value2-'+widget_no).text(data.value2);
                        $('.value3-'+widget_no).text(data.value3);
                        $('.value4-'+widget_no).text(data.value4);
                        $('.box3-'+widget_no).removeClass('bg-danger');
                        $('.box3-'+widget_no).addClass(data.colorclass);

                    }
		      $('.widgets-link-'+widget_no).attr('href',data.widgets_link);
                },
            });
        }

    </script>
    <script>
        $(document).ready(function() {
            @if(auth()->check() && auth()->guard('admin')->user()->id != '45')
            $('#getTrendsData').text('Loading Trends Data....');
            var url = $('#getTrendsData').attr('page-url');
            $('#getTrendsData').load(url);
            @endif
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.3.0/jquery.peity.min.js"
        integrity="sha512-L5mXjK4YbZPFEuunivJM+SKJG5qxqElc8RlaLDRd1Z5TtDACmugfzIRyFnYSGD4jPYoEMJbXhUJFZsBWDV8yLQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection