{{-- <x-app-layout> --}}
@extends('layouts.master')
<style>
    #expandBtn {
      font-size: 24px;
      padding: 10px 20px;
      cursor: pointer;
      border: 1px solid #ccc;
      background-color: #f0f0f0;
      border-radius: 5px;
    }

    #expandBtn:hover {
      background-color: #ddd;
    }

    .expanded-row td {
    padding: 10px;
    background-color: #3cfcec;
}
  </style>

<!-- 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>Najma Directory</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">Najma Directory</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>
  {{-- assign admin tracker  --}}
  @include('super-admin.najma-directory.assign-admin-tracker')
  {{-- employee assign tracker removed  --}}
  @include('super-admin.najma-directory.employee-remove-modal')
  <!-- 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
    <!-- Modal End -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- /.card -->
                <div class="card">
                    <div class="card-header">
                        {{-- <div class="col-lg-10 col-sm-10 col"> --}}
                            <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" id="select-all-table-assign" data-toggle="modal" data-target="#twoModal"><i class="fa fa-paper-plane" aria-hidden="true"></i> Assign to Admin</a>
                                        <a class="btn btn-danger" id="select-all-removed" data-toggle="modal" data-target="#threeModal"><i class="fa fa-paper-plane" aria-hidden="true"></i> Remove to Employee</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 ($sales_employees as $sales_employee)
                                                            <option value="{{ $sales_employee->id }}">{{ $sales_employee->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 ($scopeofbusiness 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> --}}
                    </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>
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
<script>
    // JavaScript function to toggle the button text
    function toggleIcon() {
      const button = document.getElementById('expandBtn');

      // Check the current content of the button and toggle it
      if (button.innerHTML === '+') {
        button.innerHTML = '-';
      } else {
        button.innerHTML = '+';
      }
    }
</script>
<script>
// model function start
$(".show-modal").click(function(){
  $("#myModal").modal({
    backdrop: 'static',
    keyboard: false
  });
});
// model function end
</script>
<script>
  const table = $('#najmadirectory-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);
  });

    // Row expansion functionality
    table.on('click', 'button.expand-row', function() {
        var id = $(this).data('id');
        // var tr = $(this).closest('tr');
        var row = $(this).closest('tr');
        var rowDetail = row.next('.expanded-row');

        if (rowDetail.length) {
            // Toggle the expanded row visibility
            rowDetail.each(function(){
                $(this).toggle();
            });
        } else {
            // Add the expanded row below the clicked row
            var rowData = rowDetail.data(); // Get row data
            $.ajax({
                url:'{{ route("extra-data") }}',
                method:'POST',
                dataType:"json",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "id":id,
                },
                success: function(response) {
                    $.each(response,function(index,data){
                        $.each(data.coordinators, function(index, coor) {
                            $.each(data.emiratess, function(index, emirate) {
                                var expandedRowHtml = `
                                    <tr class="expanded-row" style="background-color: #f9f9f9;">
                                        <td>
                                            ${data.inquiryid}<input type="checkbox" class="select-table-row" id="datatable-row-${data.id}" name="datatable_ids[]" value="${data.id}" onclick="dataTableRowCheck(${data.id})">
                                        </td>
                                        <td></td>
                                        <td>${data.datecontracted}</td>
                                        <td>${data.companyname}</td>
                                        <td>${coor.username}</td>
                                        <td>${emirate.name}</td>`;

                                        // first all data get super admin assign admin leads
                                        var NAdata = []; // Declare NAdata as an array
                                        var admintracker = [];
                                        $.each(data.ndadminassign, function(index, row) {
                                            admintracker.push(row.trackers);
                                            $.each(row.adminusers, function(index, uname) {
                                                NAdata.push(uname.username); // Push row.id into the array
                                            });
                                        });

                                        // second all data get admin assiged employee leads
                                        var NAempdata = []; // Declare NAempdata as an array
                                        var emptracker = [];
                                        $.each(data.ndemployeeassign, function(index, emprow) {
                                            emptracker.push(emprow.trackers);
                                            $.each(emprow.empsassign, function(index, empuname) {
                                                NAempdata.push(empuname.username); // Push row.id into the array
                                            });
                                        });

                                        var admintrackers = admintracker.filter(item => !emptracker.includes(item));
                                        // Elements in NAdata but not in NAempdata
                                        const adminsname = NAdata.filter(item => !NAempdata.includes(item));
                                        // Now you can add the 'admin assign majna directory' content into your expandedRowHtml
                                        expandedRowHtml += `<td><span class="badge badge-success">${adminsname}</span></td>`;

                                        // super admin assign tracker show
                                        var tracker = '';
                                        $.each(admintrackers, function(index, adtrackers) {
                                            if (tracker !== '') {
                                                tracker += ',  '; // Add a comma if it's not the first username
                                            }

                                            if(adtrackers == ""){
                                                expandedRowHtml += `<td><span class="badge badge-danger">Pending</span></td>`;
                                            }else{
                                                if(adtrackers == 1){
                                                    tracker += 'Sales Tracker';
                                                }

                                                if(adtrackers == 2){
                                                    tracker += 'Marketing Tracker';
                                                }

                                                if(adtrackers == 3){
                                                    tracker += 'Customer Care Tracker';
                                                }
                                            }
                                        });
                                        expandedRowHtml += `<td><span class="badge badge-success">${tracker}</span></td>`;
                                        // admin assigen lead to employees
                                        expandedRowHtml += `<td><span class="badge badge-success">${NAempdata}</span></td>`;
                                        // admin assigned employee trackers show
                                        var emptrackers = '';
                                        $.each(emptracker, function(index, employeetrackers) {
                                            if (emptrackers !== '') {
                                                emptrackers += ',  '; // Add a comma if it's not the first username
                                            }

                                            if(employeetrackers == ""){
                                                expandedRowHtml += `<td><span class="badge badge-danger">Pending</span></td>`;
                                            }else{
                                                if(employeetrackers == 1){
                                                    emptrackers += 'Sales Tracker';
                                                }

                                                if(employeetrackers == 2){
                                                    emptrackers += 'Marketing Tracker';
                                                }

                                                if(employeetrackers == 3){
                                                    emptrackers += 'Customer Care Tracker';
                                                }
                                            }
                                        });
                                        expandedRowHtml += `<td><span class="badge badge-success">${emptrackers}</span></td>`;
                                        expandedRowHtml += `<td><a class="btn btn-secondary btn-sm" href="{{ route('super/admin/najma/directory/show', '') }}/${data.id}" target="_blank"><i class="fas fa-eye"></i></a><a href="{{ route('super/admin/najma/directory/edit', '') }}/${data.id}" target="_blank" class="btn btn-info btn-sm"><i class="fas fa-edit"></i></a><a class="delete btn btn-danger btn-sm" title="Delete" data-toggle="tooltip" data-id="${data.id}"><i class="fas fa-trash"></i></a></td>`;
                                        expandedRowHtml += `</tr>`;
                                // Insert the expanded row below the clicked row
                                row.after(expandedRowHtml);
                            });
                        });
                    });
                }
            });
        }
    });

    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-assign').click(function(){
    var rowdIds = $("#najmadirectory-table input:checkbox:checked").map(function() {
            return $(this).val();
        }).get();
    $("#selecteditems").val(rowdIds.length);
    $("#selected_ids").val(rowdIds);
  });

  $('#select-all-removed').click(function(){
      var rowdIds = $("#najmadirectory-table input:checkbox:checked").map(function() {
              return $(this).val();
          }).get();
    //   console.log('hii', );
      $("#selected-emp-items").val(rowdIds.length);
      $("#selected-ids").val(rowdIds);
  });
</script>
<script>
    $('#select-all-export').click(function(){
        var rowdIds = $("#najmadirectory-table input:checkbox:checked").map(function() {
            return $(this).val();
        }).get();
        // console.log('select export', rowdIds);
        if(rowdIds == ""){
            alert('Please Select a checkbox');
        }else{
            // console.log('n');
            window.location.href = `najmadirectory/selectexport/${rowdIds}`;
        }
    });
</script>
<script>
    $(document).on("click", ".view", function(){
        var uid = $(this).data('id');
        $.ajax({
            url:'{{ route("super/admin/najma/directory/show") }}',
            method:'POST',
            dataType:"json",
            data: {
                "_token": "{{ csrf_token() }}",
                "id":uid,
            },
            success:function(data){
                console.log(data, 'data all');
            var i = 1;
            ++i;
                $.each(data,function(index,row){
                    //date format
                    const today = new Date(row.date_contracted);
                    const yyyy = today.getFullYear();
                    let mm = today.getMonth() + 1; // Months start at 0!
                    let dd = today.getDate();

                    if (dd < 10) dd = '0' + dd;
                    if (mm < 10) mm = '0' + mm;

                    const formattedToday = dd + '-' + mm + '-' + yyyy;
                    document.getElementById("contractdate").innerHTML = formattedToday;
                    document.getElementById("cname").innerHTML = row.company_name;
                    document.getElementById("website").innerHTML = row.website;
                    // document.getElementById("scopeofb").innerHTML = row.scopeof_business;
                    document.getElementById("areas").innerHTML = row.area;
                    // document.getElementById("emi").innerHTML = row.emirates;
                    // document.getElementById("coun_try").innerHTML = row.country;
                    document.getElementById("contactpn").innerHTML = row.contactperson_name;
                    document.getElementById("contact_number").innerHTML = row.contactno;
                    document.getElementById("email").innerHTML = row.contact_email;
                    document.getElementById("posistion").innerHTML = row.contact_person_position;
                    document.getElementById("categories").innerHTML = row.category;
                    // document.getElementById("marketaction").innerHTML = row.marketing_action;
                    // document.getElementById("vendor").innerHTML = row.vendor_registration;
                    // document.getElementById("status").innerHTML = row.marketing_status;
                    document.getElementById("followup").innerHTML = row.date_followup_action;
                    document.getElementById("remarks").innerHTML = row.remarks;

                    if(row.gender == 1){
                        document.getElementById("gen").innerHTML = 'Male';
                    }else if(row.gender == 2){
                        document.getElementById("gen").innerHTML = 'FeMale';
                    }

                    // coordinator data
                    $.each(row.coordinator,function(index,coord){
                        document.getElementById("marketcoorinator").innerHTML = coord.name;
                    })
                    // country data
                    $.each(row.countries,function(index,count){
                        document.getElementById("coun_try").innerHTML = count.name;
                    })
                    // emirates data
                    $.each(row.emirates,function(index,emir){
                        document.getElementById("emi").innerHTML = emir.name;
                    })
                    // marketing action data
                    $.each(row.marketingactions,function(index,maction){
                        document.getElementById("marketaction").innerHTML = maction.name;
                    })
                    // marketing status data
                    $.each(row.marketingstatus,function(index,mstatus){
                        document.getElementById("status").innerHTML = mstatus.name;
                    })
                    // scope of business data
                    $.each(row.sob,function(index,sobs){
                        document.getElementById("scopeofb").innerHTML = sobs.name;
                    })
                    // vendor registration data
                    $.each(row.vendorregistrationa,function(index,vregister){
                        document.getElementById("vendor").innerHTML = vregister.name;
                    })
                });
            }
        })
    });
  </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/najma/directory/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>
<script>
  $("#admin_assign").on('submit', function(e){
      e.preventDefault();

      $.ajax({
          url:$(this).attr('action'),
          method:$(this).attr('method'),
          data:new FormData(this),
          processData:false,
          dataType:'json',
          contentType:false,
          beforeSend:function(){
              $(document).find('span.error-text').text('');
          },
          success:function(data){
              if (data.errormsg != ""){
                    $("#errormsg").html(data.errormsg);
              }

              if(data.error){
                //   console.log(data, '1');
                  $(".selectuser").html(data.error);
                  // input fieals error show
                  $.each(data.error, function(prefix, val){
                      $('span.'+prefix+'_error').text(val[0]);
                  });
              }else{
                //   console.log(data, '0');
                  if (data.status == 0) {
                      $("#tableerror").html(data.table_status);
                      $("#tableerrors").html(data.table_status);
                      $.each(data.error, function(prefix, val){
                          $('span.'+prefix+'_error').text(val[0]);
                      });
                  }else{
                      $('#admin_assign')[0].reset();
                      // alert(data.msg);
                      // location.reload();
                    window.location.href = '{{route("super/admin/najma/directory")}}';
                  }
              }
          }
      })
  })

//   employee assign tracker remove
$("#employee-remove").on('submit', function(e){
      e.preventDefault();

      $.ajax({
          url:$(this).attr('action'),
          method:$(this).attr('method'),
          data:new FormData(this),
          processData:false,
          dataType:'json',
          contentType:false,
          beforeSend:function(){
              $(document).find('span.error-text').text('');
          },
          success:function(data){
              if (data.errormsg != ""){
                    $("#errormsg").html(data.errormsg);
              }

              if(data.error){
                //   console.log(data, '1');
                  $(".selectemp").html(data.error);
                  // input fieals error show
                  $.each(data.error, function(prefix, val){
                      $('span.'+prefix+'_error').text(val[0]);
                  });
              }else{
                //   console.log(data, '0');
                  if (data.status == 0) {
                      $("#tableerror").html(data.table_status);
                      $("#tableerrors").html(data.table_status);
                      $.each(data.error, function(prefix, val){
                          $('span.'+prefix+'_error').text(val[0]);
                      });
                  }else{
                      $('#admin_assign')[0].reset();
                      // alert(data.msg);
                      // location.reload();
                    window.location.href = '{{route("super/admin/najma/directory")}}';
                  }
              }
          }
      })
  })
</script>
@endsection
{{-- {{ $dataTable->scripts(attributes: ['type' => 'module']) }} --}}
{{-- </x-app-layout> --}}