@extends('layouts.master')
<!-- Theme style -->
@section('superadmin')
<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">
          <h1>Sales Tracker</h1>
        </div>
        <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 Tracker</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    @if (Session::has('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ Session::get('success') }}
        @php
            Session::forget('success');
        @endphp
        <button type="button" class="close" data-dismiss="alert"
            aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <!-- /.card -->
          <div class="card">
            <div class="card-header">
              <div class="accordion" id="accordionExample">
                <div class="row">
                    <div class="col-lg-10">
                        <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fas fa-filter"></i>Filter</button>
                        <button type="button" name="reset" class="btn btn-default" onclick="reset()"><i class="fas fa-sync"></i> Reset</button>
                        {{-- <a class="btn btn-info" class="btn btn-info" id="select-all-table" data-toggle="modal" data-target="#twoModal"><i class="fa fa-paper-plane" aria-hidden="true"></i> Assign to Admin</a> --}}
                        {{-- <a href="{{ route('super/admin/najma/directory/excel/export') }}" class="btn btn-secondary">Export All Excel</a> --}}
                        {{-- <a class="btn btn-info" id="select-all-export"><i class="fa fa-paper-plane" aria-hidden="true"></i> Select to Excel</a> --}}
                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-3">
                                    Contracted Date From <input type="date" class="form-control" id="from">
                                </div>
                                <div class="col-lg-3">
                                    Contracted Date To <input type="date" class="form-control" id="to">
                                </div>
                                <div class="col-lg-6">
                                    Coordinator
                                    <select name="marketing" class="select2 color:dark" id="marketing" style="width: 100%;">
                                        <option value="" selected>Select a Coordinator</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    Scope Of Business
                                    <select name="sob" class="select2 color:dark" id="sob" style="width: 100%;">
                                        <option value="" selected>Select a Scope of business</option>
                                        @foreach ($sobs as $sob)
                                            <option value="{{ $sob->id }}">{{ $sob->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    Company Name
                                    <input type="text" name="company_name" id="company" class="form-control">
                                </div>
                                <div class="col-lg-6">
                                    Area
                                    <input type="text" name="area" id="area" class="form-control">
                                </div>
                                <div class="col-lg-3">
                                    Emirates
                                    <select name="emirate" class="select2 color:dark" id="emirate" style="width: 100%;">
                                        <option value="" selected>Select a Emirates</option>
                                        @foreach ($emirates as $emirate)
                                            <option value="{{ $emirate->id }}">{{ $emirate->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    Country
                                    <select name="country" class="select2 color:dark" id="country" style="width: 100%;">
                                        <option value="" selected>Select a country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    Contact Person Name
                                    <input type="text" name="contactperson_name" id="personname" class="form-control">
                                </div>
                                <div class="col-lg-6">
                                    Contact Number
                                    <input type="text" name="contactno" id="contactno" class="form-control">
                                </div>
                                <div class="col-lg-6">
                                    Select Marketing Action
                                    <select name="marketing_action" class="select2 color:dark" id="marketing_action" style="width: 100%;">
                                        <option value="" selected>Select a country</option>
                                        @foreach ($marketingactions as $marketingaction)
                                            <option value="{{ $marketingaction->id }}">{{ $marketingaction->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    Category
                                    <select name="category" class="select2 color:dark" id="category" style="width: 100%;">
                                        <option value="" selected>Select a Category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-12">
                                    Remark
                                    <input type="text" name="remark" id="remark" class="form-control">
                                </div>
                            </div>
                            <div class="col">
                                <button class="btn btn-secondary mt-4" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="advancefilter()"><i class="fas fa-search"></i> Search</button>
                                <button type="button" name="reset" class="btn btn-default mt-4 ml-2" onclick="reset()"><i class="fas fa-sync"></i> Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="col-lg-2 text-right"><a href="{{ route('super/admin/najma/directory/create') }}" class="btn bg-gradient-primary"><i class="fas fa-plus"></i> Add</a></div> --}}
                </div>
            </div>
                {{-- <div class="row">
                    <div class="col-lg-10 col-sm-10 col">

                    </div>

                    <div class="col">

                    </div>
                </div> --}}
            </div>

            <!-- /.card-header -->
            <div class="card-body">
                {{ $dataTable->table(['class' => 'table table-bordered table-hover table-striped w-100']) }}
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
  <!-- /.content -->
</div>
<script>
  const table = $('#salestracker-table');
  table.on('preXhr.dt', function (e,seeting,data){
      data.from = $('#from').val();
      data.to = $('#to').val();
      data.marketing = $('#marketing').val();
      data.sob = $('#sob').val();
      data.company = $('#company').val();
      data.area = $('#area').val();
      data.emirate = $('#emirate').val();
      data.country = $('#country').val();
      data.personname = $('#personname').val();
      data.contactno = $('#contactno').val();
      data.marketing_action = $('#marketing_action').val();
      data.category = $('#category').val();
      data.remark = $('#remark').val();
      // console.log(data.from, data.to);
  });

  function advancefilter() {
      table.DataTable().ajax.reload();
      return false;
  }

  function reset() {
      table.on('preXhr.dt', function (e,seeting,data){
          data.from = '';
          data.to = '';
          data.marketing = '';
          data.sob = '';
          data.company = '';
          data.area = '';
          data.emirate = '';
          data.country = '';
          data.personname = '';
          data.contactno = '';
          data.marketing_action = '';
          data.category = '';
          data.remark = '';
      });

      table.DataTable().ajax.reload();
      return false;
  }


  // $('#select-all-table').click(function(){
  //     var rowdIds = $("#najmadirectory-table input:checkbox:checked").map(function() {
  //             return $(this).val();
  //         }).get();
  //     console.log('hii', );
  //     $("#selecteditems").val(rowdIds.length);
  //     $("#selected_ids").val(rowdIds);
  // });
</script>
<script>
    $(document).on("click", ".delete", function(){
       var id = $(this).data('id');
       swal({
           title: "Are you sure?",
           text: "Once deleted, you will not be able to recover this imaginary file!",
           icon: "warning",
           buttons: true,
           dangerMode: true,
       })
       .then((willDelete) => {
           if (willDelete) {
               $.ajax({
                   url:'{{ route("super/admin/sales/tracker/delete") }}',
                   method:'POST',
                   dataType:"json",
                   data: {
                       "_token": "{{ csrf_token() }}",
                       id:id
                   },
                   success:function(response){
                    // console.log(response, 'dd');
                        window.location.reload();
                   }
               })
           } else {
               swal("Your imaginary file is safe!");
           }
       });
   });
</script>
@endsection
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}