@extends('layout')
@section('content')
<!-- begin::main content -->
<style>
   .input_upload{
   width:100px;
   height:35px;
   position:absolute;
   bottom:-34px;
   right:350px;
   }
   .import-content p{
   padding:0;
   margin:0;
   margin-bottom:8px;
   font-size:13px;
   }
   .filter-form-box{
   background-color:#FBFAFA;
   padding:10px 24px;
   position:absolute;
   width:450px;
   border:1px solid #ddd;
   border-radius:5px;
   top:71px;
   z-index:20;
   }
   .filter-form-box input{
   height:40px !important;
   }
   .diamond {
   width: 20px;
   height: 20px;
   background-color: #FBFAFA;
   transform: rotate(45deg);
   position: relative;
   top:-21px;
   left:0px;
   border-top:1px solid #ddd;
   border-left:1px solid #ddd;
   }
   .seach-input:focus{
   outline:none !important;
   border-top:1px solid #ddd !important;
   border-bottom:1px solid #ddd !important;
   }
   .seach-input{
   height:40px !important;
   border-top:1px solid #ddd !important;
   border-bottom:1px solid #ddd !important;
   border-left:1px solid #ddd !important;
   }

   .kanban-board {
            display: flex;
           
            justify-content: space-between;
           
        }
        .kanban-column {
            
            background-color: #f1f1f1;
            padding: 10px;
            
            min-height: 300px;
        }
        .kanban-task {
          
            background-color: white;
           
            margin-bottom: 10px;
            padding: 10px;
            cursor: move;
        }
        .highlight {
            border: 2px dashed #007bff;
            background-color: #e6f7ff;
        }
        .processing-lead{
            width:300px;
            position:absolute;
            left:60%;
            top:28%;
            transform:translate(-50%,50%);
            z-index:1000;
        }
</style>
<main class="main-content">
   <div class="container">
      <div class="toast d-none float-right" >
         <div class="toast-body bg-success text-white">
            <i class="fa fa-check fa-lg"></i>&nbsp Status Update Successfully
         </div>
      </div>

      <section class='main-section1'>
          <!-- begin::page header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h3>Manage Leads - Sales</h3>
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Lead</li>
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">Lead</a></li>
                </ol>
                </nav>
            </div>
            <ul class='nav-item dropdown d-flex'>
                <div class="dropdown show" style='margin-right:20px;'>
                  <select class="form-control change_pipeline">
                     @if(!empty($pipelines))
                     @foreach($pipelines as $pipeline)
                     <option value="{{$pipeline->id}}">{{$pipeline->name}}</option>
                     @endforeach
                     @endif
                  </select>

                <div class="dropdown-menu " aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 26px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="#">Sales</a>
                </div>
                </div>

                <!-- Modal Create user-->


              @include('leads.modal.create_modal')
                <!-- Modal Import Lead CV-->
                <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="" >Import Lead CSV file</h5>
                                <button type="button" class="btn-close bg-blue text-white" data-bs-dismiss="modal" aria-label="Close"style='border:none;margin-right:10px;' >
                                <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="d-flex">
                                <p>Download sample Lead CSV file</p>
                                <button class="btn btn-primary waves-effect waves-button waves-light" type="submit" style='margin-left:20px;'>Submit form</button>
                                </div>
                                <div class="form-group">
                                <label for="exampleFormControlFile1">Example file input</label>
                                <input type="file" class="form-control-file" id="exampleFormControlFile1">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary">Create</button>
                            </div>
                        </div>
                    </div>
                </div>
                <li>
                <a href="{{route('lead.list')}}">
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10">
                <i class="fa fa-list" aria-hidden="true"></i>
                </span>
                </a>
                </li>
                <li data-bs-toggle="modal" data-bs-target="#exampleModal2" class='cursor-pointer'>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10 cursor-pointer" style='cursor:pointer;'>
                <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                </span>
                </li>
                <li>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10">
                <i class="fa fa-file-o" aria-hidden="true"></i>
                </span>
                </li>
                <li data-bs-toggle="modal" data-bs-target="#leadModal" class='cursor-pointer'>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10 cursor-pointer" style='cursor:pointer;'>
                <i class="fa fa-plus" aria-hidden="true"></i>
                </span>
                </li>
            </ul>
        </div>
        <!-- end::page header -->
        <x-flashMessage />
        @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

                    @php 
                        
                        $count =0;
                        
                    @endphp
        <div class="processing-lead text-center display-5 alert-info alert" >Processing...</div>
        <div class="row kanban-board">
            @if(isset($stages))
            
                @foreach($stages as $st)
                   
                    <div class="col-md-4 py-3" >
                        <div class="card p-3  kanban-column" data-drop-id="{{$st->id}}">
                        <div class="d-flex justify-content-between">
                            <h5 class="font-size-18 text-capitalize">{{$st->name}}</h5>
                            @foreach($leads as $key=>$value)
                                @if($value->lead_stage->name == $st->name)
                                    @php $count++; @endphp
                                @endif
                            @endforeach
                            <a href="#" class="btn btn-sm bg-primary btn-uppercase waves-effect waves-button waves-light text-white">{{$count}}</a>
                        </div>
                           
                            @foreach($leads as $key=>$value)
                           
                                @if($value->lead_stage->name == $st->name)
                                    <div class="card p-3 mt-3 kanban-task" data-lead-id="{{$value->id}}" data-stage-id="{{$st->id}}">
                                        <div class='d-flex justify-content-between ghm-hotel'>
                                            <h6 class="card-title">{{$value->name}}</h6>
                                            <div class="apexcharts-menu-icon" title="Menu">
                                                <i class="fa fa-menu font-size-16"></i>
                                                <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                        <div class='d-flex justify-content-between mt-4'>
                                            <div class='d-flex justify-content-between'>
                                                <h5 class='mb-0 ms-3'>0</h5>
                                                <h5 class='mb-0 ms-3'>0</h5>
                                            </div>
                                            <div class="avatar-group">
                                                <figure class="avatar">
                                                <span class="avatar-title bg-success rounded-circle" style='width:28px;height:28px;font-size:12px;'>E</span>
                                                </figure>
                                                <figure class="avatar">
                                                <span class="avatar-title bg-danger rounded-circle" style='width:28px;height:28px;font-size:12px;'>S</span>
                                                </figure>
                                                <figure class="avatar">
                                                <span class="avatar-title bg-primary rounded-circle" style='width:28px;height:28px;font-size:12px;'>C</span>
                                                </figure>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                
                            @endforeach
                        </div>
                    </div>
                    @php $count=0; @endphp
                @endforeach
            @endif
        </div>
      </section>


      <section class='main-section '>
          <!-- begin::page header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h3>Manage Leads - Sales</h3>
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Lead</li>
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">Lead</a></li>
                </ol>
                </nav>
            </div>
            <ul class='nav-item dropdown d-flex'>
                <div class="dropdown show" style='margin-right:20px;'>
                <button class="btn btn-light dropdown-toggle waves-effect waves-button waves-light" type="button" data-toggle="dropdown" aria-expanded="false">
                Sales
                </button>
                <div class="dropdown-menu " aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 26px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="#">Sales</a>
                </div>
                </div>

                <!-- Modal Import Lead CV-->
                <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="" >Import Lead CSV file</h5>
                            <button type="button" class="btn-close bg-blue text-white" data-bs-dismiss="modal" aria-label="Close"style='border:none;margin-right:10px;' >
                            <i class="fa fa-times" aria-hidden="true"></i>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex">
                            <p>Download sample Lead CSV file</p>
                            <button class="btn btn-primary waves-effect waves-button waves-light" type="submit" style='margin-left:20px;'>Submit form</button>
                            </div>
                            <div class="form-group">
                            <label for="exampleFormControlFile1">Example file input</label>
                            <input type="file" class="form-control-file" id="exampleFormControlFile1">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary">Create</button>
                        </div>
                    </div>
                </div>
                </div>
                <li>
                <a href="{{route('lead.list')}}">
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10">
                <i class="fa fa-list" aria-hidden="true"></i>
                </span>
                </a>
                </li>
                <li data-bs-toggle="modal" data-bs-target="#exampleModal2" class='cursor-pointer'>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10 cursor-pointer" style='cursor:pointer;'>
                <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                </span>
                </li>
                <li>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10">
                <i class="fa fa-file-o" aria-hidden="true"></i>
                </span>
                </li>
                <li data-bs-toggle="modal" data-bs-target="#exampleModal" class='cursor-pointer'>
                <span class="icon-block bg-blue text-white icon-block-floating icon-block-sm m-r-10 cursor-pointer" style='cursor:pointer;'>
                <i class="fa fa-plus" aria-hidden="true"></i>
                </span>
                </li>
            </ul>
        </div>
        <!-- end::page header -->

      </section>

   </div>
   <!-- The Modal -->
   <div class="modal" id="importModal">
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header bg-success  rounded-0">
               <h4 class="modal-title">Import Distributor</h4>
               <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
               <div class="row">
                  <div class="col-md-3 py-5">
                     <i class="fa fa-warning text-warning" style="font-size:50px"></i>
                  </div>
                  <div class="col-md-9 import-content">
                     <p>Import Distributor (.xls, .xlsx)</p>
                     <p><strong>Follow these steps:</strong></p>
                     <p>1. Download the Excel template to your computer by clicking the <strong>Download</strong> button.</p>
                     <p>2. Integrate your data into the template file, minding the column names.</p>
                     <p>3. Click the <strong>Import</strong> button.</p>
                     <p><strong>IMPORTANT</strong></p>
                     <p>- If you do not have data for a particular column, leave it empty and do not move or delete the column.</p>
                  </div>
               </div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer position-relative">
               <form  class="import-company-form" enctype="multipart/form-data">
                  @csrf
                  <div class="">
                     <div class="">
                        <div class="" style="position:relative">
                           <input type="file" accept="" name="excel_file" class="input_upload input_file_upload" style="z-index:5;opacity:0;cusor:pointer;">
                           <button type="submit" class="btn bg-blue text-uppercase input_upload input_upload_btn text-white mr-2">
                           <i class="fa fa-upload pr-2"></i>
                           Import
                           </button>
                        </div>
                     </div>
                     <div class="">
                        <div class="d-flex justify-content-center">
                           <a href="{{asset('public/distributor_sample.xlsx')}}" class="btn btn-info" download>Download Sample &nbsp<i class="fa fa-download"></i></a>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</main>
<!-- end::main content -->
@endsection
@push('footer-script')
<!-- begin::dataTable -->
<!-- end::dataTable -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- jQuery UI CSS for styling draggable elements -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- end::select2 -->
    <script>
    $(function() {
        // Make the tasks draggable
        $(".kanban-task").draggable({
            revert: "invalid",  // If dropped outside a droppable, the task returns to its original position
            start: function(event, ui) {
                $(this).css('opacity', '0.7');
            },
            stop: function(event, ui) {
                $(this).css('opacity', '1');
            }
        });

        // Make the columns droppable
        $(".kanban-column").droppable({
            accept: ".kanban-task",
            hoverClass: "highlight",  // Highlight the column on hover
            drop: function(event, ui) {
               
                

                $(this).append(ui.draggable);

                ui.draggable.css({
                    top: "auto",
                    left: "auto"
                });

                var leadId = ui.draggable.data('lead-id');
                var stageId = ui.draggable.data('stage-id');
                var drop_stage_id = $(this).data("drop-id");
                //alert(drop_stage_id);

                $.ajax({
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "lead_id": leadId,
                        "stage_id": stageId,
                        "drop_stage_id":drop_stage_id
                    },
                    url: "{{asset('change-lead-status')}}",
                    dataType: "html",
                    beforeSend:function()
                    {

                    },
                    success: function(result) 
                    {
                       var allData = JSON.parse(result);
                       if(allData.message == "success")
                       {

                       }
                    },
                    error:function(xhr,error,status)
                    {
                        console.log(JSON.parse(xhr.responseText));
                    }
                });
            }
        });
    });
</script>

<script>
   $(document).ready(function() {
       $("#checkAll").click(function() {
           $('.userids:checkbox').not(this).prop('checked', this.checked);
           var length = $('.userids[type="checkbox"]:checked').length;
           if($(".multiple-delete-btn").hasClass('d-none'))
           {
               $(".multiple-delete-btn").removeClass("d-none");
               $(".multiple-delete-btn").html('<span class="pt-1">Delete ('+length+")</span>");
           }
           else
           {
               $(".multiple-delete-btn").addClass("d-none");
           }

       });

       //employee delte button code
       $(".emp-delete-btn").click(function(){
           var emp_id = $(this).attr("emp_id");


           swal({
               title: 'Are you sure?',
               text: 'Once deleted, you will not be recover!',
               icon: 'warning',
               dangerMode: true,
               buttons: ["Cancel", "Yes!"],
           }).then(function(value) {
               if (value) {
                   $.ajaxSetup({
                       headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       }
                   });

                   $.ajax({
                       type: "post",
                       data: {
                           "emp_id": emp_id
                       },
                       url: "{{asset('delete-distributor')}}",
                       dataType: "html",
                       success: function(result) {
                           //console.log(result);
                           swal("success!", "Successfully deleted!", "success");
                           window.location.reload();
                       },
                       error:function(error)
                       {
                           swal("Failed !", "Failed !", "error");
                           window.location.reload();
                       }
                   });

               }
           });
       });



       $(".input_file_upload").on("change",function(){
           $(".import-company-form").submit();
       });

       $(".import-company-form").on("submit", function(event) {
               // Prevent the default form submission
               event.preventDefault();


               $.ajax({
                   type: "POST",
                   url: "{{asset('import-distributor')}}",
                   headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       },
                   data: new FormData(this),
                   processData: false,
                   contentType: false,
                   cache:false,
                   beforeSend:function()
                   {
                       $(".import-content").html("<h5>Please wait uploading...</h5>");
                   },
                   success: function(response)
                   {
                       if(response.message=="success")
                       {
                           var div = `<div class='text-success text-center' style='font-size:50px'>
                           <i class='fa fa-check-circle' ></i>
                           <p  style='font-size:20px'>Dealer/Partner Import Successfully !</p>
                       </div>`;
                           $(".import-content").html(div);
                           setTimeout(function(){
                               window.location.reload();
                           },3000);

                       }
                       else
                       {
                           //console.log(error);
                           var div = `<div class='text-danger text-center' style='font-size:50px'>
                           <i class='fa fa-times-circle' ></i>
                           <p  style='font-size:20px'>Please check the datasheet !</p>
                       </div>`;
                           $(".import-content").html(div);
                       }
                   },
                   error: function(xhr, status, error)
                   {
                       //console.log(error);
                       var div = `<div class='text-danger text-center' style='font-size:50px'>
                       <i class='fa fa-times-circle' ></i>
                       <p  style='font-size:20px'>Please check the datasheet !</p>
                   </div>`;
                       $(".import-content").html(div);
                   }
               });
       });


       // Delete Multiple
       $(".multiple-delete-btn").click(function() {
           var URL = "{{ asset('distributor-delete-multiple') }}";
           var user_ids = [];
           $('.userids:checkbox:checked').each(function() {
               user_ids.push($(this).val());
           });



           swal({
               title: 'Are you sure?',
               text: 'Once deleted, you will not be recover!',
               icon: 'warning',
               dangerMode: true,
               buttons: ["Cancel", "Yes!"],
           }).then(function(value) {
               if (value) {
                   $.ajaxSetup({
                       headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       }
                   });

                   $.ajax({
                       type: "post",
                       data: {
                           "ids": user_ids
                       },
                       url: URL,
                       dataType: "html",
                       success: function(result) {
                           console.log(result);
                           swal("success!", "Successfully deleted!", "success");
                           window.location.reload();
                       },
                       error:function(xhr,status,error)
                       {
                           swal("failed!", "Failed !", "error");
                          window.location.reload();
                       }
                   });

               }
           });

       });


   });

   $(".apply-button").click(function(){
       $(".filter-form-box").addClass("d-none");
   });


   //filter company code
   $(".filter-company-btn").click(function(){

       if($(".filter-form-box").hasClass("d-none"))
       {
           $(".filter-form-box").removeClass("d-none");
       }
       else
       {
           $(".filter-form-box").addClass("d-none");
       }
   });


   $(".change_pipeline").on("change",function(){

      var change_pipeline = $('.change_pipeline').val();

      alert(change_pipeline);;
   });


    //change status code
   $(".status-change").on("change",function(){

       var check_val = 0;
       if( $(this).is(":checked"))
       {
           check_val = 1;
       }

       var id = $(this).val();

       $.ajax({
           type: "post",
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           url: "{{asset('change-user-status')}}",
           data:{
               user_id:id,
               status:check_val
           },
           dataType: "html",
           success: function(result)
           {   console.log(result);
               var allData = JSON.parse(result);

               if(allData.message=="success")
               {
                   $('.toast').removeClass('d-none');
                   $('.toast').toast('show');
               }
               else
               {
                   var div = `
                   <div class="toast-body bg-danger text-white">
                           <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed

                   </div>
               `;

               $('.toast').removeClass('d-none');
                   $('.toast').toast('show');
                   $('.toast').html(div);
               }
           },
           error:function(xhr,status,error)
           {
               console.log(error);
               var div = `
                   <div class="toast-body bg-danger text-white">
                           <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed

                   </div>
               `;

               $('.toast').removeClass('d-none');
                   $('.toast').toast('show');
                   $('.toast').html(div);

           }
       });

   });
   $(".main-section").hide();

   $(".ghm-hotel").click(function(){
  $(".main-section").show();
  $(".main-section1").hide();
});

</script>
@endpush