@extends('layouts.app')

@section('content')
<div class="nk-block-head nk-block-head-sm">
  <div class="nk-block-between">
    <div class="nk-block-head-content">
      <h3 class="nk-block-title page-title">
        <a href="javascript:history.back()" class="pt-3"><em class="icon ni ni-chevron-left back-icon"></em> </a>
        Create New Campaign
      </h3>
    </div><!-- .nk-block-head-content -->
  </div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->
<div class="form-steps">
  <ul>
    <li class="selected" id="step1_li">
      <span class="icon">1</span>
      <span class="text">Campaign Information</span>
    </li>
    <li id="step2_li">
      <span class="icon">2</span>
      <span class="text">Select Customers</span>
    </li>
  </ul>
</div>
<form action="{{ url('campaign/store') }}" method="POST" id="campaign_form">
  @csrf
  <div id="step1_section">
    <div class="nk-block">
      <div class="card card-bordered sp-plan">
        <div class="row no-gutters">
          <div class="col-md-3">
            <div class="sp-plan-action card-inner">
              <div class="icon">
                <em class="icon ni ni-list-check fs-36px o-5"></em>
                <h5 class="o-5">Campaign Information</h5>
              </div>
            </div>
          </div>
          <div class="col-md-9">
            <div class="sp-plan-info card-inner">
            <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="quarter">Quarter & Year<span
                        class="text-danger">*</span></label>
                    <span class="form-note">Select the quarter & year.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="row g-4">
                    <div class="col-lg-6">
                      <div class="form-group">
                        <div class="form-control-wrap form-control-required-wrap">
                          <select class="form-select form-control" id="quarter" name="quarter"
                            data-placeholder="Select Quarter" data-parsley-group="first" required>
                              <option value=""></option>
                              @foreach(\Config::get('constants.QUARTER') as $quarter)
                              <option value="{{$quarter}}">{{$quarter}}</option>
                              @endforeach
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="col-lg-6">
                      <div class="form-group">
                        <div class="form-control-wrap form-control-required-wrap">
                          @php
                              $currentYear = date('Y');
                              $startYear = $currentYear - 2;
                              $endYear = $currentYear + 2;
                          @endphp
                          <select class="form-select form-control" id="year" name="year"
                              data-placeholder="Select Year" data-parsley-group="first" required>
                              <option value=""></option>
                              @for ($year = $startYear; $year <= $endYear; $year++)
                                  @php $nxtYear = $year.'-'.substr($year + 1, -2); @endphp
                                  <option @if($year == $currentYear) selected @endif value="{{ $nxtYear }}">
                                      {{ $nxtYear }}
                                  </option>
                              @endfor
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="survey_template">Survey Template<span
                        class="text-danger">*</span></label>
                    <span class="form-note">Select the survey template.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="form-control-wrap form-control-required-wrap">
                      <select class="form-select form-control" id="survey_template" name="survey_template"
                        data-placeholder="Select Survey Template" data-search="on" data-parsley-group="first" required>
                        <option value=""></option>
                        @foreach($suveyTemplates as $survey => $surveyTemplate)
                        <option value="{{ $surveyTemplate->id }}">{{ $surveyTemplate->template_name }}</option>
                        @endforeach
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                    <div class="form-group">
                        <label class="form-label" for="campaign_name">Campaign Name<span
                                class="text-danger">*</span></label>
                        <span class="form-note">Enter the campaign name.</span>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="form-group">
                        <div class="form-control-wrap">
                            <input type="text" class="form-control" id="campaign_name"
                                name="campaign_name" placeholder="Enter Campaign Name"
                                autocomplete="off" data-parsley-group="first"/>
                        </div>
                    </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="date">Date<span class="text-danger">*</span></label>
                    <span class="form-note">Select the start and end date.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="row g-4">
                      <div class="col-lg-6">
                        <div class="form-control-wrap">
                          <div class="form-icon form-icon-right">
                            <em class="icon ni ni-calendar-alt"></em>
                          </div>
                          <input type="text" class="form-control date-picker" placeholder="Start Date" id="startDate"
                            name="start_date" data-date-start-date="+1d" data-date-format="dd/mm/yyyy"
                            autocomplete="off" data-parsley-group="first" required />
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="form-control-wrap">
                          <div class="form-icon form-icon-right">
                            <em class="icon ni ni-calendar-alt"></em>
                          </div>
                          <input type="text" name="end_date" id="endDate" class="form-control date-picker"
                            placeholder="End Date" data-date-format="dd/mm/yyyy" autocomplete="off"
                            data-parsley-group="first" required />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="targeted_response_rate">Targeted Response Rate<span
                        class="text-danger">*</span></label>
                    <span class="form-note">Select the targeted response rate.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="form-control-wrap">
                      <div class="form-icon form-icon-right">
                        <em class="icon ni ni-percent"></em>
                      </div>
                      <input type="number" maxLength="6" name="targeted_response_rate" id="targeted_response_rate"
                        class="form-control" placeholder="Enter Targeted Response Rate" data-parsley-group="first" step="any" data-parsley-type="number" onkeydown="return event.keyCode !== 69" required />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="first_sms_text">First SMS Text <span
                        class="text-danger">*</span></label>
                    <span class="form-note">Enter the first sms text.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="form-control-wrap">
                      <textarea class="form-control" name="first_sms_text" value="" id="first_sms_text"
                        placeholder="Enter First SMS Text" data-parsley-group="first" required></textarea>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="follow_up_sms_text">Follow-up SMS Text <span
                        class="text-danger">*</span></label>
                    <span class="form-note">Enter the follow-up sms text.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="form-control-wrap">
                      <textarea class="form-control" name="follow_up_sms_text" value="" id="follow_up_sms_text"
                        placeholder="Enter Follow-up SMS Text" data-parsley-group="first" required></textarea>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row g-4">
                <div class="col-lg-5">
                  <div class="form-group">
                    <label class="form-label" for="thankyou_sms_text">Thankyou SMS Text <span
                        class="text-danger">*</span></label>
                    <span class="form-note">Enter the thankyou sms text.</span>
                  </div>
                </div>
                <div class="col-lg-7">
                  <div class="form-group">
                    <div class="form-control-wrap">
                      <textarea class="form-control" name="thankyou_sms_text" value="" id="thankyou_sms_text"
                        placeholder="Enter ThankYou SMS Text" data-parsley-group="first" required></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nk-block mb-3">
      <div class="row">
        <div class="col-md-12 text-right">
          <a href="javascript:void(0)" class="btn btn-primary" id="handle_show_customers">Show Customers</a>
        </div><!-- .col -->
      </div><!-- .row -->
    </div>
  </div>

  <div id="step2_section" style="display: none;">
    <div class="nk-block">
      <div class="row">
        <div class="col-md-12">
          <div class="card card-full">
            <div class="card-inner">
              <div class="card-title-group">
                <div class="card-title">
                  <h6 class="title">Select Customers For Survey</h6>
                </div>
                <div class="card-tools">
                  <a href="#" class="btn btn-trigger btn-icon dropdown-toggle" data-toggle="modal" title="filter"
                    data-target="#modalFilterCampaignCustomers">
                    <div class="dot dot-primary"></div>
                    <em class="icon ni ni-filter-alt"></em>
                  </a>
                  <!-- <select class="form-select form-control" id="filter" name="filter" data-placeholder="Filter By">
										<option value=""></option>
										<option value="Region">Region</option>
										<option value="Area">Area</option>
										<option value="Dealer">Dealer</option>
										<option value="Product">Product</option>
										<option value="Segment">Segment</option>
									</select>
									<button type="button" class="btn btn-sm btn-primary ml-2"><span>Apply</span></button> -->
                  <a href="javascript:void(0)" class="btn btn-sm resetFilter"><span><em
                        class="icon ni ni-undo"></em></span></a>
                  <!-- <button type="button" class="btn btn-sm btn-primary" style="display:none;"><span>Change Status</span></button> -->
                </div>
              </div>
              <div class="mt-3">
                <div class="transfer-box">
                  <div class="transfer-box-left">
                    <div class="d-flex justify-content-between align-items-center">
                      <h6 class="title">Customer List</h6>
                      <div class="custom-control custom-control-sm custom-checkbox notext mb-1 mr-1">
                        <input type="checkbox" class="custom-control-input" id="check_all_source_list">
                        <label class="custom-control-label" for="check_all_source_list">Check All</label>
                      </div>
                    </div>
                    <input type="text" id="searchSource" placeholder="Search" class="form-control" autocomplete="off" />
                    <ul id="sourceList" class="sortable-list">
                      <!-- Source list items here -->
                    </ul>
                  </div>
                  <div class="transfer-buttons">
                    <button type="button" id="moveRight" class="btn btn-icon btn-primary"><em
                        class="icon ni ni-arrow-right"></em></button>
                    <button type="button" id="moveLeft" class="btn btn-icon btn-primary"><em
                        class="icon ni ni-arrow-left"></em></button>
                  </div>
                  <div class="transfer-box-right">
                    <div class="d-flex justify-content-between align-items-center">
                      <h6 class="title">Customer Selected</h6>
                      <div class="custom-control custom-control-sm custom-checkbox notext mb-1 mr-1">
                        <input type="checkbox" class="custom-control-input" id="check_all_target_list">
                        <label class="custom-control-label" for="check_all_target_list">Check All</label>
                      </div>
                    </div>
                    <input type="text" id="searchTarget" placeholder="Search" class="form-control" autocomplete="off" />
                    <ul id="targetList" class="sortable-list customer-sort-list">
                      <!-- Target list items here -->
                    </ul>
                  </div>
                </div>


                <!-- <table class="broadcast-init dataTable table table-bordered table-striped">
									<thead>
										<tr class="nk-tb-item nk-tb-head">
											<th class="nk-tb-col nk-tb-col-check" width="1%" nowrap="true">
												<div class="custom-control custom-control-sm custom-checkbox notext">
													<input type="checkbox" class="custom-control-input" id="qid">
													<label class="custom-control-label" for="qid"></label>
												</div>
											</th>
											<th class="nk-tb-col"><span class="sub-text">Customer</span></th>
											<th class="nk-tb-col"><span class="sub-text">Designation</span></th>
											<th class="nk-tb-col"><span class="sub-text">Contact Number</span></th>
											<th class="nk-tb-col"><span class="sub-text">Organization / Individual</span></th>
											<th class="nk-tb-col"><span class="sub-text">Product</span></th>
										</tr>
									</thead>
									<tbody>
										@foreach($customers as $customer)
										<tr class="nk-tb-item">
											<td class="nk-tb-col nk-tb-col-check">
												<div class="custom-control custom-control-sm custom-checkbox notext">
													<input type="checkbox" class="custom-control-input cb-check" name="customer[]" value="{{$customer->customer_id}}" id="qid{{$customer->customer_id}}">
													<label class="custom-control-label" for="qid{{$customer->customer_id}}"></label>
												</div>
											</td>
											<td class="nk-tb-col tb-col-md">
												<a href="#">{{$customer->customer_name}}</a>
											</td>
											<td class="nk-tb-col tb-col-md">
												<span>{{$customer->customer_type}}</span>
											</td>
											<td class="nk-tb-col tb-col-md">
												<span>{{$customer->contact_number}}</span>
											</td>
											<td class="nk-tb-col tb-col-md">
												<span>{{$customer->company_name}}</span>
											</td>
											<td class="nk-tb-col tb-col-md">
												<span>{{$customer->product_name}}</span>
											</td>
										</tr>
										@endforeach
									</tbody>
								</table> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nk-block mb-3 submit_div">
      <div class="row">
        <div class="col-md-12 text-right">
          <div class="form-group">
            <a href="javascript:void(0)" class="btn btn-outline-light btn-custom-icon-left" id="back_btn"><em
                class="icon ni ni-arrow-left"></em> <span>Back</span></a>
            <a href="javascript:history.back()" class="btn btn-outline-light">Cancel</a>
            <input type="submit" id="submit" name="submit" value="Create Campaign" class="btn btn-primary" />
          </div>
        </div><!-- .col -->
      </div><!-- .row -->
    </div>
  </div>
</form>
<div class="modal fade zoom" tabindex="-1" id="modalFilterCampaignCustomers">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Filter</h5>
        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
          <em class="icon ni ni-cross"></em>
        </a>
      </div>
      <div class="modal-body modal-body-lg">
        <div class="gy-3">
          <div class="row g-3 align-center">
            <div class="col-lg-5">
              <x-inputs.verticalFormLabel label="Region" for="region" suggestion="Specify the region" />
            </div>
            <div class="col-lg-7">
              <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Region" multiple
                name="region[]" id="region">
                <option disabled></option>
                @foreach($regions as $region)
                <option value="{{$region->name}}" @if(isset($filter['region']) && in_array($region->region_id,
                  $filter['region'])) selected @endif>{{$region->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="row g-3 align-center">
            <div class="col-lg-5">
              <x-inputs.verticalFormLabel label="Area" for="area" suggestion="Specify the area" />
            </div>
            <div class="col-lg-7">
              <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Area" multiple
                name="area[]" id="area">
                <option disabled></option>
                @foreach($areas as $area)
                <option value="{{$area->name}}" @if(isset($filter['area']) && in_array($area->name,
                  $filter['area'])) selected @endif>{{$area->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="row g-3 align-center">
            <div class="col-lg-5">
              <x-inputs.verticalFormLabel label="Dealer" for="dealer" suggestion="Specify the dealer." />
            </div>
            <div class="col-lg-7">
              <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Dealer" multiple
                name="dealer[]" id="campaignDealer">
                <option disabled></option>
                @foreach($dealers as $dealer)
                <option value="{{$dealer->service_center_name}}" @if(isset($filter['dealer']) && in_array($dealer->service_center_name,
                  $filter['dealer'])) selected @endif>{{$dealer->service_center_name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="row g-3 align-center">
            <div class="col-lg-5">
              <x-inputs.verticalFormLabel label="Language" for="language" suggestion="Specify the language." />
            </div>
            <div class="col-lg-7">
              <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Language" multiple
                name="language[]" id="language">
                <option disabled></option>
                @foreach($languages as $language)
                <option value="{{$language}}">{{$language}}</option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="row g-3 align-center">
            <div class="col-lg-5">
              <x-inputs.verticalFormLabel label="Segment" for="segment" suggestion="Specify the segment." />
            </div>
            <div class="col-lg-7">
              <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Segment" multiple
                name="segment[]" id="campaignSegment">
                <option disabled></option>
                @foreach($segments as $segment)
                <option value="{{$segment}}" @if(isset($filter['segment']) && in_array($segment,
                  $filter['segment'])) selected @endif>{{$segment}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-light">
        <div class="row">
          <div class="col-lg-12 p-0 text-right">
            <button type="button" class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Cancel</button>
            <button type="reset" class="btn btn-danger resetFilter" data-dismiss="modal" aria-label="Close">Clear
              Filter</button>
            <button type="submit" class="btn btn-primary submitFilter">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@push('footerScripts')
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" defer></script> -->
<script type="text/javascript">
jQuery(document).ready(function($) {
  var filterApplied = '{{$filterApplied}}';
  if (filterApplied == 1) {
    $('#step1_section').hide();
    $('#step2_section').show();
    $("#step1_li").addClass('completed');
    $("#step2_li").addClass('selected');
    $('.submit_div').show();
    $('html, body').animate({
      scrollTop: $(document).height()
    });
  }
  $('#handle_show_customers').on('click', function() {
    // $(this).text(function(i, text){
    // 	return text === "Show Customers" ? "Hide Customers" : "Show Customers";
    // })
    // $('.submit_div').toggle();
    $('#campaign_form').parsley().validate("first");
    if ($('#campaign_form').parsley().isValid("first")) {
      $("#step1_section").hide();
      $("#step2_section").show();
      $("#step1_li").addClass('completed');
      $("#step2_li").addClass('selected');
    } else {
      console.log('not valid');
    }
  });

  $('#startDate').datepicker().on('changeDate', function(e) {
    // Set the startDate of the end date picker to the selected start date
    $('#endDate').val('');
    $('#endDate').datepicker('setStartDate', e.date);
  });

  // Handle back button
  $("#back_btn").click(function() {
    $("#step1_section").show();
    $("#step2_section").hide();
    $("#step1_li").removeClass('completed');
    $("#step1_li").addClass('selected');
    $("#step2_li").removeClass('selected');
  })


  function assign_customer(id) {
    var arr = [];
    $('input.cb-check:checkbox:checked').each(function() {
      arr.push($(this).val());
    });
    // console.log(arr);
    if (arr.length == 0) {
      Swal.fire("Please select the customer first!");
    } else {
      $('#customer').val(arr);
      $('#campaign_id').val(id);
      $('#modalAssignCustomer').modal('show');
    }
  }


  var selectedCustomerIDs = [];

  var root_url = "