@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.opportunities")}}</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.opportunities")}}</li>
				</ol>
			</div>
        </div>
      {{-- </div> --}}
      <!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
		<div class="row">
			<div class="col-12">
				<div class="card" style="height: 100%;">
					<div class="card-header">
						<div class="pull-left" style="float: left;">
							@if(permission_check(387,3))
								<a class="btn btn-sm btn-success" href="{{ route('opportunities.create') }}">{{__("application.Create New")}}</a>
								<a class="btn btn-sm btn-default" href="{{ route('opportunities.create_new_for_exsting_customer') }}">{{__("application.create_new_for_exsting_customer")}}</a>
							@endif
						</div>
						<div class="pull-right" style="float: right;">
							<a class="btn btn-sm btn-default" href="{{ route('opportunities.index') }}" title = "view as list"><i class="fas fa-list-ul"></i></a>
							<a class="btn btn-sm btn-default" href="{{ route('opportunities.kanban_view') }}" title="view as kanban"><i class="fab fa-windows"></i></a>
						</div>
					</div>
					<!-- /.card-header -->
					<div class="card-body table-responsive">
						<table id="datatable" class="table table-bordered table-hover nowrap"
							ajax="{{ route('opportunities.index') }}">
							<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="expected_revenue" name="crm_pipeline.expected_revenue">{{ __('application.expected_revenue') }}</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="stage_name" name="crm_stages.name" global-filter = "true" global-filter-type = "select" global-filter-value = '{{ json_encode($stages) }}'>{{ __('application.stage') }}</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')
@include('crm.opportunities.schedule-activity-js')
<script>
	function make_opportunities_to_won(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-success',
                    text: "OK",
                    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 make_opportunities_to_lost(obj){
		let url = $(obj).data("href");
		
		$.confirm({
			title: '{{ __("application.lost_reason") }} !',
			content:`
				<form action="" class="formName">
					<div class="form-group">
						<label>{{ __("application.Enter Reason for reject") }} : </label>
						{!! Form::textarea('lost_reason', null, ['placeholder' => __('application.Remark'), 'class' => 'form-control lost_reason','required','rows'=>'3']) !!}
					</div>
				</form>
			`,
			buttons: {
				formSubmit: {
					text: 'Submit',
					btnClass: 'btn-blue',
					action: function () {
						var lost_reason = this.$content.find('.lost_reason').val();
						$(".main-spinner").show();
						let url = $(obj).data("href")+"?lost_reason="+lost_reason;
						$.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 delete_row(id){
		let url = '{{ route( "opportunities.destroy",":id") }}';
		url = url.replace(":id",id);
		destroy_row_datatable(url);
  }
</script>
@endsection