@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;
  }
  .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>Create Filter</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">Create Filter</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.store') }}" method="POST">
                @csrf
                
                <div class="card-body">
                

                <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">RSS</option>
                        <option value="2">API</option>
                      </select>  
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="search">Filter Title</label>
                      <input type="text" name="search_name" class="form-control" required>
                    </div>
                  </div>
                  
                
                  <div class="col-md-12">
                      <div class="form-group">
                          <label for="search" id="cs">Search Field</label>
                          <input type="text" 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">
                        <option value="">Select Job Type</option>
                        <option value="HOURLY">HOURLY</option>
                        <option value="FIXED">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">WEEK</option>
                        <option value="MONTH">MONTH</option>
                        <option value="QUARTER">QUARTER</option>
                        <option value="SEMESTER">SEMESTER</option>
                        <option value="ONGOING">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">FULL TIME</option>
                        <option value="PART_TIME">PART TIME</option>
                        <option value="AS_NEEDED">AS NEEDED</option>
                        <option value="NOT_SURE">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">FULL TIME</option>
                        <option value="INTERMEDIATE">PART TIME</option>
                        <option value="EXPERT">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" 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" 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" 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" 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="50" 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"></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"></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">HOURLY</option>
                        <option value="2">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">
                    </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">
                    </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" 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">Submit</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" 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" 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" 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" 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" 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" name="skill_search" id="tokenInput" 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 -->
<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>
 $('#tokenInput').tokenfield({
                delimiter: ",",  // Use a comma as a separator
                beautify: false  // Prevents unnecessary styling
            });  
$('.select2').select2()
$(".filter_type").change(function(){
  var filter_type = $(this).val();
  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() {
    $('#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