@extends('layouts.master')

@section('content')
<!-- Bootstrap Tokenfield CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="{{asset('assets/plugins/select2/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
<style>
  .mcat .select2-selection{
    height: 38px !important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff !important;
    border: 1px solid #006fe6 !important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, .7) !important;
  }
  #all_jobs_datatable{
    width: 100% !important;
  }
  #all_jobs_exclusion_datatable {
    width: 100% !important;
}
.tokenfield .token{
    background-color: #007bff !important;
    border: 1px solid #006fe6 !important;
    color: #fff;
    padding: 0px 0px 23px 0px;
  }
  .tokenfield .close{
    color: rgba(255, 255, 255, .7) !important;
  }
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Edit Filters</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">Edit Filters</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- jquery validation -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Filters <small>Form</small></h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form action="{{ route('filter.update', $data->id) }}" method="POST">
                @csrf
                <div class="card-body">
                <button type="button" id="btn-all-jobs" class="btn btn-primary mb-3">All Jobs Preview</button>
                <button type="button" id="btn-excluded-jobs" data-target="#jobs-preview-exc-modal" class="btn btn-primary mb-3">All Jobs Preview After Exclusion</button>
                <div class="row">

                <div class="col-md-6">
                    <div class="form-group">
                      <label for="filter_type">Filter Type</label>
                      <select name="filter_type" class="form-control filter_type" required>
                        <option value="">Select Filter Type</option>
                        <option value="1" @if($data->filter_type=="1") selected @endif>RSS</option>
                        <option value="2" @if($data->filter_type=="2") selected @endif>API</option>
                      </select>  
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="search">Filter Title</label>
                      <input type="text" value="{{ $data->search_name }}" name="search_name" class="form-control" placeholder="Search" required>
                    </div>
                  </div>
                  
                  <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search"  id="cs">Search Field</label>
                                  <input type="text" value="{{ $data->title_search }}" name="title_search" class="form-control">
                                  <a href="#" data-toggle="modal" data-target="#modal-advance-search" class="asl">Advanced Search</a>
                                </div>
                              </div>
                              <div class="col-md-6">
                    <div class="form-group">
                      <label for="job_type">Categories</label>
                      <select name="category[]" class="form-control select2 class-api" multiple="multiple" data-placeholder="Select a Categories">
                        <option value="">Select Categories</option>
                        @include('pages.filters.filter_data.categories')
                      </select>  
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group mcat">
                      <label for="job_type">Location</label>
                      <select name="location" class="form-control select2 class-api">
                        <option value="">Select Location</option>
                        @include('pages.filters.filter_data.countries')
                      </select>  
                    </div>
                  </div>
                 
                
                 
                <div class="col-md-6">
                    <div class="form-group">
                      <label for="job_type">Job Type</label>
                      <select name="job_type" class="form-control" required>
                        <option value="">Select Job Type</option>
                        <option value="HOURLY" @if($data->job_type=="HOURLY") selected @endif>HOURLY</option>
                        <option value="FIXED" @if($data->job_type=="FIXED") selected @endif>FIXED</option>
                      </select>  
                    </div>
                  </div>

                <div class="col-md-6">
                    <div class="form-group">
                      <label for="duration">Duration</label>
                      <select name="duration" class="form-control class-api">
                        <option value="">Select Duration</option>
                        <option value="WEEK" @if($data->duration=="WEEK") selected @endif>WEEK</option>
                        <option value="MONTH" @if($data->duration=="MONTH") selected @endif>MONTH</option>
                        <option value="QUARTER" @if($data->duration=="QUARTER") selected @endif>QUARTER</option>
                        <option value="SEMESTER" @if($data->duration=="SEMESTER") selected @endif>SEMESTER</option>
                        <option value="ONGOING" @if($data->duration=="ONGOING") selected @endif>ONGOING</option>
                      </select>  
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="workload">Workload</label>
                      <select name="workload" class="form-control class-api">
                        <option value="">Select Workload</option>
                        <option value="FULL_TIME" @if($data->workload=="FULL_TIME") selected @endif>FULL TIME</option>
                        <option value="PART_TIME" @if($data->workload=="PART_TIME") selected @endif>PART TIME</option>
                        <option value="AS_NEEDED" @if($data->workload=="AS_NEEDED") selected @endif>AS NEEDED</option>
                        <option value="NOT_SURE" @if($data->workload=="NOT_SURE") selected @endif>NOT SURE</option>
                      </select>  
                    </div>
                  </div>
                  
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="workload">Experience Level</label>
                      <select name="experience_level" class="form-control class-api">
                        <option value="">Select Experience Level</option>
                        <option value="ENTRY_LEVEL" @if($data->experience_level=="ENTRY_LEVEL") selected @endif>FULL TIME</option>
                        <option value="INTERMEDIATE" @if($data->experience_level=="INTERMEDIATE") selected @endif>PART TIME</option>
                        <option value="EXPERT" @if($data->experience_level=="EXPERT") selected @endif>AS NEEDED</option>
                      </select>  
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="Client Hires">Budget Start Range</label>
                      <input type="number" value="{{ $data->budget_start_range }}" name="budget_start_range" class="form-control class-api" placeholder="Start Range">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="Client Hires">Budget End Range</label>
                      <input type="number" value="{{ $data->budget_end_range }}" name="budget_end_range" class="form-control class-api" placeholder="End Range">
                    </div>
                  </div>

               
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="Budget">Proposal Start Range</label>
                      <input type="number" value="{{ $data->proposal_start_range }}" name="proposal_start_range" class="form-control class-api" placeholder="Start Range">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="Days Posted">Proposal Start Range</label>
                      <input type="number" value="{{ $data->proposal_end_range }}" name="proposal_end_range" class="form-control class-api" placeholder="End Range">
                    </div>
                  </div>
         
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="Paging">Paging</label>
                      <input type="number" value="{{ $data->paging }}" name="paging" class="form-control class-api" placeholder="Paging">
                    </div>
                  </div>
                  
                  <div class="col-md-12 mt-5 mb-5">
                  
                     <h3>Exclusion Fields</h3>
                    
                  </div>

                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="search">By Job Title </label> [eg. Youtube OR Shopify]
                      <textarea name="by_job_title" class="form-control" placeholder="Title1, Title2">{{ $data->exclude_title }}</textarea>
                    </div>
                  </div>

                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="search">By Job Description </label> [eg. Adobe OR Linkedin]
                      <textarea name="by_job_desc" class="form-control" placeholder="Description1, Description2">{{ $data->exclude_desc }}</textarea>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="by_job_type">By Hourly/Fixed</label>
                      <select name="by_job_type" class="form-control">
                        <option value="">Select Job Type</option>
                        <option value="1" @if($data->exclude_hourly_fix==1) selected @endif>HOURLY</option>
                        <option value="2" @if($data->exclude_hourly_fix==2) selected @endif>FIXED</option>
                      </select>  
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="search">By Budget Start Range </label> [eg. 30]
                      <input type="number" name="by_job_bsr" class="form-control" value="{{ $data->exclude_budget_sr }}">
                    </div>
                  </div>

                  <div class="col-md-4">
                    <div class="form-group">
                      <label for="search">By Budget End Range </label> [eg. 40]
                      <input type="number" name="by_job_ber" class="form-control" value="{{ $data->exclude_budget_er }}">
                    </div>
                  </div>

                  <div class="col-md-4">
                    <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="exclude_zero_price" value="1" @if($data->exclude_zero_price) checked @endif id="exampleCheck2">
                        <input type="hidden" name="exclude_zero_price_hid" value="0">
                        <label class="form-check-label" for="exampleCheck2">Exclude jobs that do not have a budget mentioned.</label>
                      </div>
                    </div>
                  </div>

                </div>
                
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">Update</button>
                </div>
                 <!-- modal -->
                 <div class="modal fade" id="modal-advance-search">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">Advanced Search</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" style="height: 400px;overflow-y: scroll;">
                            <!--  -->
                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">All of these words</label>
                                  <input type="text" value="{{ $data->all_words }}" name="all_words" class="form-control">
                                </div>
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">Any of these words</label>
                                  <input type="text" value="{{ $data->any_words }}" name="any_words" class="form-control">
                                </div>
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">None of these words</label>
                                  <input type="text" value="{{ $data->none_words }}" name="none_words" class="form-control">
                                </div>
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">The exact phrase</label>
                                  <input type="text" value="{{ $data->exact_phrase }}" name="exact_phrase" class="form-control">
                                </div>
                              </div>
                            </div>
                             
                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">Title Search</label>
                                  <input type="text" value="{{ $data->title_phrase }}" name="title_phrase" class="form-control">
                                </div>
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label for="search">Skills Search</label>
                                  <input type="text" value="{{ $data->skill_search }}" id="tokenInput" name="skill_search" class="form-control">
                                </div>
                              </div>
                            </div>
                            <!--  -->
                        </div>
                        <div class="modal-footer">
                          <button type="button" id="advance_save" class="btn btn-success" data-dismiss="modal" aria-label="Close">Save</button>
                        </div>
                      </div>
                      <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                  </div>
                <!-- modal -->
              </form>
            </div>
            <!-- /.card -->
            </div>
          <!--/.col (left) -->
          <!-- right column -->
          <div class="col-md-6">

          </div>
          <!--/.col (right) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
<!-- modal -->
<div class="modal fade" id="jobs-preview-modal">
                    <div class="modal-dialog modal-xl">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">All Jobs Before Exclusion</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" style="height: 400px;overflow-y: scroll;">
           
         <!-- before exclusion -->
         <table class="table table-bordered table-striped" id="all_jobs_datatable">
                  <thead>
                    <tr>
                        <th width="5%">Sno</th>
                        <th width="40%">Title</th>
                        <th>Budget/Hourly</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">Time Stamp</th>
                        <th width="5%">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                  <tfoot>
                    <tr>
                        <th width="5%">Sno</th>
                        <th width="40%">Title</th>
                        <th>Budget/Hourly</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">Time Stamp</th>
                        <th width="5%">Actions</th>
                    </tr>
                  </tfoot>
                </table>
                <!-- before exclusion -->
                
              
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">Close</button>
                        </div>
                      </div>
                      <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                  </div>
                <!-- modal -->
 <!-- modal -->
<div class="modal fade" id="jobs-preview-exc-modal">
                    <div class="modal-dialog modal-xl">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">All Jobs After Exclusion</h4>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" style="height: 400px;overflow-y: scroll;">
         
                <!-- after exclusion -->
                <table class="table table-bordered table-striped" id="all_jobs_exclusion_datatable">
                  <thead>
                    <tr>
                        <th width="5%">Sno</th>
                        <th width="40%">Title</th>
                        <th>Budget/Hourly</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">Time Stamp</th>
                        <th width="5%">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                  <tfoot>
                    <tr>
                        <th width="5%">Sno</th>
                        <th width="40%">Title</th>
                        <th>Budget/Hourly</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">Time Stamp</th>
                        <th width="5%">Actions</th>
                    </tr>
                  </tfoot>
                </table>
                <!-- after exclusion -->
              
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">Close</button>
                        </div>
                      </div>
                      <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                  </div>
                <!-- modal -->               
<!-- modal -->
<div class="modal fade" id="modal-default">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Job Description</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body mbody" style="height: 400px;overflow-y: scroll;">

            </div>
            <div class="modal-footer">
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<!-- Select2 -->
<script src="{{asset('assets/plugins/select2/js/select2.full.min.js')}}"></script>
<script>
  $('.select2').select2()
chge("{{ $data->filter_type }}");
$(".filter_type").change(function(){
  var filter_type = $(this).val();
  chge(filter_type);
});
function chge(filter_type){
  if(filter_type==1){
    $('#cs').text('RSS Link');
    $('.asl').hide();
    $('.class-api').attr('disabled', true);
  }else{
    $('#cs').text('Search Field');
    $('.asl').show();
    $('.class-api').attr('disabled', false);
  }
}
$(document).ready(function(){
  //
  var table = $('#all_jobs_datatable').DataTable({
    processing: true,
    serverSide: false,
    ajax: {
        url: "{!! route('api.getJobsWithoutExc', ['filter_id' => $data->id, 'exclusion' => 0]) !!}",
        dataSrc: function (json) {
            if (!json.data || json.data.length === 0) {
                return []; // Ensures the table displays "No data available"
            }
            return json.data;
        },
        error: function () {
            $('#all_jobs_datatable tbody').html('<tr><td colspan="7" class="text-center">Failed to load data</td></tr>');
        }
    },
    columns: [
        { data: 'sno' },
        { data: 'title' },
        { data: 'budget' },
        { data: 'publish' },
        { data: 'created_at' },
        { data: 'timestamp' },
        { data: 'sno' }
    ],
    "bLengthChange": true,
    "pageLength": 30,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    columnDefs: [
        {
            // Actions column
            targets: -1,
            searchable: false,
            title: 'Actions',
            orderable: false,
            render: function (data, type, full, meta) {
                return `
                    <div id="feedid${full['iteration']}" style="display:none;">${full['description']}</div>
                    <a href="#" data-pid="${full['id']}" data-date="${full['pubdate']}" data-title="${full['title']}" data-url="${full['link']}" data-view="feedid${full['iteration']}" data-toggle="modal" data-target="#modal-default" class="btn btn-default view-job">View</a>
                `;
            }
        },
        {
            width: '50px',
            targets: 2
        }
    ],
    order: [[0, 'asc']],
    language: {
        emptyTable: "No data found"
    }
});

  
  var table = $('#all_jobs_exclusion_datatable').DataTable({
    processing: true,
    serverSide: false,
    ajax: {
        url: "{!! route('api.getJobsWithoutExc', ['filter_id' => $data->id, 'exclusion' => 1]) !!}",
        dataSrc: function (json) {
            if (!json.data || json.data.length === 0) {
                return []; // Ensures the table displays "No data available"
            }
            return json.data;
        },
        error: function () {
            $('#all_jobs_exclusion_datatable tbody').html('<tr><td colspan="7" class="text-center">Failed to load data</td></tr>');
        }
    },
    columns: [
        { data: 'sno' },
        { data: 'title' },
        { data: 'budget' },
        { data: 'publish' },
        { data: 'created_at' },
        { data: 'timestamp' },
        { data: 'sno' }
    ],
    "bLengthChange": true,
    "pageLength": 30,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    columnDefs: [
        {
            // Actions column
            targets: -1,
            searchable: false,
            title: 'Actions',
            orderable: false,
            render: function (data, type, full, meta) {
                return `
                    <div id="feedid${full['iteration']}" style="display:none;">${full['description']}</div>
                    <a href="#" data-pid="${full['id']}" data-date="${full['pubdate']}" data-title="${full['title']}" data-url="${full['link']}" data-view="feedid${full['iteration']}" data-toggle="modal" data-target="#modal-default" class="btn btn-default view-job">View</a>
                `;
            }
        },
        {
            width: '50px',
            targets: 2
        }
    ],
    order: [[0, 'asc']],
    language: {
        emptyTable: "No data found"
    }
});

  $('#btn-all-jobs').on('click', function () {
    $('#jobs-preview-modal').modal('show');
    $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
  });
  $('#btn-excluded-jobs').on('click', function () {
    $('#jobs-preview-exc-modal').modal('show');
    $('#all_jobs_exclusion_datatable').DataTable().ajax.reload(null, false);
  });
  $(document).on("click", ".view-job",function(){
    var job_desc = $(this).data('view');
    var data = $('#'+job_desc).html();
    $('.mbody').html(data);
  });
});

$('#tokenInput').tokenfield({
  delimiter: ",",  // Use a comma as a separator
  beautify: false  // Prevents unnecessary styling
});  
$(document).ready(function() {
    $('#advance_save').click(function() {
        let allWords = $('input[name="all_words"]').val().trim();
        let anyWords = $('input[name="any_words"]').val().trim();
        let noneWords = $('input[name="none_words"]').val().trim();
        let exactPhrase = $('input[name="exact_phrase"]').val().trim();
        let titlePhrase = $('input[name="title_phrase"]').val().trim();
        
        let titleSearch = "";
        
        if (titlePhrase) {
            titleSearch = titlePhrase.includes(' ') ? `title:(${titlePhrase})` : `title:${titlePhrase}`;
        }
        
        let searchQuery = "";
        
        if (allWords) {
            let words = allWords.split(' ');
            searchQuery += words.length > 1 ? `(${words.join(' AND ')})` : words[0];
        }
        
        if (anyWords) {
            let words = anyWords.split(' ');
            searchQuery += searchQuery ? ' AND ' : '';
            searchQuery += words.length > 1 ? `(${words.join(' OR ')})` : words[0];
        }
        
        if (noneWords) {
            let words = noneWords.split(' ');
            searchQuery += searchQuery ? ' AND ' : '';
            searchQuery += words.length > 1 ? `NOT (${words.join(' OR ')})` : `NOT ${words[0]}`;
        }
        
        if (exactPhrase) {
            searchQuery += searchQuery ? ' AND ' : '';
            searchQuery += `"${exactPhrase}"`;
        }
        
        if (titleSearch) {
            searchQuery += searchQuery ? ` AND ${titleSearch}` : titleSearch;
        }
        $('input[name="title_search"]').val(searchQuery);
        //console.log("Final Search Query:", searchQuery);
    });
});
</script>
@endsection