@extends("layouts.master")
@section("content")
<style>
  .min-with-150{
    min-width: 150px !important;
  }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      {{-- <div class="container-fluid"> --}}
        <div class="row mb-2">
			<div class="col-sm-6">
				<h4>{{__("application.lost")}} {{__("application.leads")}}</h4>
			</div>
			<div class="col-sm-6">
				<ol class="breadcrumb float-sm-right">
					<li class="breadcrumb-item"><a href="{{route('home')}}">{{__("application.Dashboard")}}</a></li>
					<li class="breadcrumb-item">{{__("application.crm")}}</li>
					<li class="breadcrumb-item active">{{__("application.lost")}} {{__("application.leads")}}</li>
				</ol>
			</div>
        </div>
      {{-- </div> --}}
      <!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<div class="pull-left">
						</div>
					</div>
					<!-- /.card-header -->
					<div class="card-body table-responsive">
						<table id="datatable" class="table table-bordered table-hover nowrap"
							ajax="{{ route('leads.lost_of_leads') }}">
							<thead>
								<tr>
									<th data="DT_RowIndex" orderable="false" searchable="false">
										{{ __('application.No') }}</th>
									<th data="lead_name" name="crm_pipeline.name" global-filter = "true" global-filter-type = "input">{{ __('application.Name') }}</th>
									<th data="saleperson_name" name="users.name_kh" global-filter = "true" global-filter-type = "input">{{ __('application.sale_person') }}</th>
									<th data="customer_name_kh" name="crm_customer.name_kh" global-filter = "true" global-filter-type = "input">{{ __('application.Customer') }}</th>
									<th data="customer_type" name="crm_customer.type" global-filter = "true" global-filter-type = "select" global-filter-value = '[{"id":"1","name":"Company"},{"id":"2","name":"Individual"}]'>{{ __('application.customer_type') }}</th>
									<th data="customer_phone" name="crm_customer.phone_number" global-filter = "true" global-filter-type = "input">{{ __('application.Phone') }}</th>
									<th data="source_name" name="crm_marketing.name" global-filter = "true" global-filter-type = "select" global-filter-value = '{{ json_encode($source) }}'>{{ __('application.source') }}</th>
									<th data="priority" global-filter = "true" global-filter-type = "select" global-filter-value = '[{"id":"0","name":"Very Low"},{"id":"1","name":"Low"},{"id":"2","name":"Meduim"},{"id":"3","name":"Hight"},{"id":"4","name":"Very Hight"}]'>{{ __('application.priority') }}</th>
									<th data="tag_name" searchable="false" orderable = "false" global-filter = "true" global-filter-type = "select" global-filter-value = '{{ json_encode($tags) }}'>{{ __('application.tags') }}</th>
									<th data = "action" searchable="false" orderable = "false">{{__("application.Action")}}</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
					<!-- /.card-body -->
				</div>
				<!-- /.card -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</section>
    <!-- /.content -->
</div>
  <!-- /.content-wrapper -->
@endsection
@section('js')
<script>
	function leads_to_opportunity(obj){
		let url = $(obj).data("href");
		
		$.confirm({
			title: '{{ __("application.convert_to_opportunity") }} !',
			content:`
				<form action="" class="formName">
					<div class="form-group">
						<label>{{ __("application.sale_person") }} : </label>
						{!! Form::select('saleperson_id', getSalemember(),!empty($data->saleperson_id)?@$data->saleperson_id:auth()->user()->id, ['placeholder' => __('application.Please Select'), 'class' => 'form-control select2 saleperson_id','required']) !!}
					</div>
				</form>
			`,
			buttons: {
				formSubmit: {
				text: 'Submit',
				btnClass: 'btn-blue',
				action: function () {
					var saleperson_id = this.$content.find('.saleperson_id').val();
					var date = this.$content.find('.date').val();
					if(saleperson_id=="") {
						toastr.error("Please Choose Customer");
						return false;
					}
					$(".main-spinner").show();
					let url = $(obj).data("href")+"?saleperson_id="+saleperson_id;
					$.ajax({
					type: 'GET',
					url: url,
					async: false,
					dataType: "JSON",
					success: function(data) {
						if (data.status == true) {
							toastr.success(data.message);
							$("#datatable").DataTable().ajax.reload(null, false);
						}
						else toastr.error(data.message);
					},
					error: function() {
						toastr.error("Unsuccessfully");
					},
					complete: function(data) {
						$(".main-spinner").hide();
					}
					});

				}
				},
				cancel: function () {
				//close
				},
			},
			onContentReady: function () {
				var jc = this;
				this.$content.find('form').on('submit', function (e) {
				e.preventDefault();
					jc.$$formSubmit.trigger('click');
				});

				var self = this;
				self.$content.find('.select2').select2({
					dropdownParent: $('.jconfirm'),
					theme: 'bootstrap-5'
				});
				$('.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content').css('overflow',
				'hidden');
				$(".date_picker").datepicker({
					dateFormat: "dd-mm-yy",
					changeMonth: true,
					changeYear: true
				});
			}
		});
	}
	function make_lead_to_lost(obj){
		let url = $(obj).data("href");
		$.confirm({
            title: 'Are you sure ?',
            content: '',
            theme: 'modern',
            buttons: {
                cancel: {
                    btnClass: 'btn btn-primary',
                    text: 'Cancel',
                    action: function() {

                    }
                },
                submit: {
                    btnClass: 'btn btn-danger',
                    text: "YES",
                    action: function() {
                        $(".main-spinner").show();
                        $.ajax({
                            type: 'GET',
                            url: url,
                            async: false,
                            dataType: "JSON",
                            success: function(data) {
                                if (data.status == true) toastr.success(data.message);
                                else toastr.error(data.message);
                                $("#datatable").DataTable().ajax.reload(null, false);
                            },
                            error: function() {
                                toastr.error("Unsuccessfully");
                            },
                            complete: function(data) {
                                $(".main-spinner").hide();
                            }
                        });
                    }
                },
            },
        });
	}
  	function delete_row(id){
		let url = '{{ route( "leads.destroy",":id") }}';
		url = url.replace(":id",id);
		destroy_row_datatable(url);
  }
</script>
@endsection