@extends('admin.layout.master')

@section('content')
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Sales Management</h1>
            </div><!-- /.col -->
            <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">Sales Management</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.sales-management-page') }}" id="frm_search" method="get">
                    <div class="row mb-2">
                        <!-- <div class="col-2">
                            <label for="form-label">Customer#</label>
                            <input type="text" name="customer_id" id="customer_id" value="{{ $customer_id }}" class="form-control" placeholder="Search Customer#">
                        </div> -->
                                                    <div class="col-2">
                                <div class="mb-3 form-group">
                                    <label for="sales_rep">Sales Rep</label>
                                    <select name="sales_rep" id="sales_rep" style="width: 100%" data-palcehoder="Select Sales Rep" class="form-control">
                                            <option value="" selected>All</option>
                                            @foreach ($user as $c)
                                                <option data-id="{{ $c->id }}" value="{{ $c->id }}" @if($sales_rep == $c->id) selected @endif>{{ $c->name }}</option>
                                            @endforeach
                                    </select>
                                </div>
                            </div>
                        
                        <div class="col-2">
                            <div class="mb-3 form-group">
                                <label for="period">Period</label>
                                <select name="period" id="period" style="width: 100%" data-palcehoder="Select Period" class="form-control">
                                    <option value="All" @if($period == "All") selected @endif>All</option>
                                    <option value="Future" @if($period == "Future") selected @endif>Future</option>
                                    <option value="Today" @if($period == "Today") selected  @endif>Today</option>
                                    <option value="Past" @if($period == "Past") selected @endif>Past</option>
                                    <option value="Today-Future" @if($period == "Today-Future") selected @endif>Today/Future</option>
                                    <option value="Today-Past" @if($period == "Today-Past") selected @endif>Today/Past</option>
                                </select>
                            </div>
                        </div>

                        <!-- <div class="col-2">
                            <label for="form-label">Completed Date</label>
                            <input type="date" name="completed_date" id="completed_date" value="{{ $completed_date }}" class="form-control" placeholder="Search Date">
                        </div> -->
                        <div class="col-2">
                            <div class="mb-3 form-group">
                                <label for="status">Status</label>
                                <select name="status" id="status" style="width: 100%" data-palcehoder="Select Status" class="form-control">
                                    <option value="3" @if($status == "3") selected @endif>All</option>
                                    <option data-id="1" value="1" @if($status == "1") selected @endif>Completed</option>
                                    <option data-id="2" value="2" @if($status == "2") selected @endif>InComplete</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-2">
                            <button class="btn btn-success " type="submit" style="margin-top: 30px !important;">Submit</button>
                            <a class="btn btn-warning" href="{{ route('admin.tasks') }}" style="margin-top: 30px !important;">Reset</a>

                        </div>
                    </div>
                </form>
            </div>
        </div>
      <div class="row">
        <div class="col-12">

          <div class="card">
            <!-- /.card-header -->
            <div class="card-body">
              <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>Sales Rep</th>
                            <th>Contacts</th>
                            <th>Business Group</th>
                            <th>Lifetime #</th>
                            <th>Lifetime $</th>
                            <th>Activity</th>
                            <th>Completed Date</th>
                            <th>Due Date</th>
                            <th>Action</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) }}" 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->SalesRep) ? $task->SalesRep : "-" }}</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>{{ !empty($task->CompletedDate) ? date('n/d/Y',strtotime($task->CompletedDate))  : "-" }}</td>

                                    <td>{{ !empty($task->choose_date) ? date('n/d/Y',strtotime($task->choose_date))  : "-" }}</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>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->

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

  </section>
  <!-- /.content -->

  <script>
     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');
                }
            });
        });
  </script>
  <script>
     $(document).ready(function() {
      $('#sales_rep').select2({
            theme: 'bootstrap4'
        });
    });

    $(function () {
        $("#TaskList").DataTable({
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "ordering": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        });
    });
  </script>
@endsection