@extends('layouts.master')

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>{{ ucwords($filter_name->search_name) }}</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">All Jobs</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">All Jobs</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
              <button data-toggle="modal" data-target="#savejob-modal" class="btn btn-primary mb-3">Create New Job</button>
                <!--  -->
                <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>Our Budget</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">View DateTime</th>
                        <th width="10%">Applied DateTime</th>
                        
                        <th width="10%">Time Stamp</th>
                        <th width="10%">Status</th>
                        <th width="10%">Username</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>Our Budget</th>
                        <th width="10%">Publish DateTime</th>
                        <th width="10%">DB DateTime</th>
                        <th width="10%">View DateTime</th>
                        <th width="10%">Applied DateTime</th>
                        
                        <th width="10%">Time Stamp</th>
                        <th width="10%">Status</th>
                        <th width="10%">Username</th>
                        <th width="5%">Actions</th>
                    </tr>
                  </tfoot>
                </table>
                <!--  -->

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
     <!-- modal -->
    <div class="modal fade" id="savejob-modal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Save Jobs</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="save_job">
              <div class="row"> 

                <div class="col-md-12">
                  <div class="form-group">
                      <label>Job Title</label>
                      <input type="text" name="m_job_title" class="form-control" required/>
                  </div>
                </div>
                <div class="col-md-6">
                <div class="form-group">
                    <label>Job Url</label>
                    <input type="text" name="m_job_url" class="form-control" required/>
                </div>
</div>
<div class="col-md-6">
                <div class="form-group">
                <label>Filter Type</label>
                    <select class="form-control" name="m_filter" required>
                      <option value="">Select Filter</option>
                      @foreach($filter_data as $value)
                      <option value="{{ $value->id }}">{{ $value->search_name }}</option>
                      @endforeach
                    </select>
                </div>
</div>
<div class="col-md-6">
                <div class="form-group">
                <label>Budget Type</label>
                    <select class="form-control" name="m_budget_type" required>
                      <option value="">Select Budget Type</option>
                      <option value="Houlry">Hourly</option>
                      <option value="Fixed">Fixed</option>
                    </select>
                </div>
</div>
<div class="col-md-6">
                <div class="form-group">
                <label>Budget Price</label>
                    <input type="text" name="m_budget_price" class="form-control" placeholder="$50 - $75" required/>
                </div>
</div>
<!-- <div class="col-md-6">
                <div class="form-group">
                <label>Our Bid Price</label>
                    <input type="text" name="our_budget_price" class="form-control" placeholder="$50 - $75" required/>
                </div>
</div> -->
<div class="col-md-6">
                <div class="form-group">
                <label>Job Publish Date</label>
                    <input type="datetime-local" name="m_date" class="form-control" required/>
                </div>
</div>
<div class="col-md-6">
                <div class="form-group">
                <label>Our Budget</label>
                    <input type="text" name="m_our_budget" class="form-control" placeholder="$50 - $75" required/>
                </div>
</div>
<div class="col-md-12">
                <div class="form-group">
                <label>Job Description</label>
                    <textarea name="m_job_desc" class="form-control" rows="5" required></textarea>
                </div>
</div>
<div class="col-md-12">
                <div class="form-group">
                <label>Job Proposal</label>
                    <textarea name="m_job_proposal" class="form-control" rows="5" required></textarea>
                </div>
</div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-success save-job-btn"><i class="fa fa-spinner fa-spin" style="display:none"></i> Save Job</button>
              </div>
            </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->
    <!-- modal -->
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog modal-lg">
          <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">

            </div>
            <div class="modal-footer">
              <button type="button" id="do-comment" data-vdate="" data-vurl="" data-vtitle="" class="btn btn-default mr-auto" data-toggle="modal" data-target="#comment-modal" hidden>Comment</button>
              <button type="button" id="reject" data-rdate="" data-rurl="" data-vtitle="" class="btn btn-danger" data-toggle="modal" data-target="#field-modal">Reject</button>
              <button type="button" id="view" data-vdate="" data-vurl="" data-vtitle="" class="btn btn-default">View</button>
              <button type="button" id="apply" data-adate="" data-aurl="" data-vtitle="" class="btn btn-success" data-toggle="modal" data-target="#apply-modal">Apply</button>
              <input type="hidden" id="hid_title" value=""/>
              <input type="hidden" id="hid_url" value=""/>
              <input type="hidden" id="hid_date" value=""/>
              <input type="hidden" id="hid_pid" value=""/>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->

    <!-- modal -->
    <div class="modal fade" id="field-modal">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Submit Your Reason</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
            <div class="form-group">
                <select class="form-control" id="reasons">
                  <option value="">Select Quick Reason</option>
                  <option value="Not Relevant">Not Relevant</option>
                  <option value="Different Timezone">Different Timezone</option>
                  <option value="Low Budget">Low Budget</option>
                  <option value="Local Client">Local Client</option>
                  <option value="Other">Other</option>
                <select>
                </div>
                <div class="form-group">
                <textarea class="form-control" id="other-field"></textarea>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" id="submit-reason" data-adate="" data-aurl="" class="btn btn-success submit-reason">Submit</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->

    <!-- modal -->
    <div class="modal fade" id="apply-modal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Submit Job Proposal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                <textarea class="form-control" id="proposal" rows="6" placeholder="Job Proposal"></textarea>
                <input type="text" class="form-control mt-2" id="our_bid" placeholder="Our Bid $50 or $50 - $70">
                <textarea class="form-control mt-2" id="comment_txt" rows="2" placeholder="Comment"></textarea>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" id="submit-proposal" data-adate="" data-aurl="" class="btn btn-success submit-proposal">Submit</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->


    <!-- modal -->
    <div class="modal fade" id="comment-modal">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Add Your Comment</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                <textarea class="form-control" id="comment_txts" rows="6"></textarea>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" id="comment-btn" data-adate="" data-aurl="" class="btn btn-success comment-proposal">Submit</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->

    <!-- modal -->
    <div class="modal fade" id="modal-view-comment">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Comment</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body show-comment">

            </div>
            <div class="modal-footer">

            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
    <!-- modal -->
<input type="hidden" name="csrf-token" value="{{ csrf_token() }}" />
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  //
  var table = $('#all_jobs_datatable').DataTable({
    processing: true,
    serverSide: false,
    ajax: {
        url: "{{ route('api.getJobs', ['filter_id' => $filter_id]) }}",
        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="12" class="text-center">Failed to load data</td></tr>');
        }
    },
    columns: [
        { data: 'sno' },
        { data: 'title' },
        { data: 'budget' },
        { data: 'our_budget' },
        { data: 'publish' },
        { data: 'created_at' },
        { data: 'view' },
        { data: 'applied' },
        { data: 'timestamp' },
        { data: 'status' },
        { data: 'username' },
        { 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']],
    scrollX: true,
    scrollCollapse: true,
    fixedColumns: {
        leftColumns: 2,
    },
    fixedHeader: true,
    language: {
        emptyTable: "No data found"
    }
});

  //save job
	$("#save_job").on('submit', function(event) {
		event.preventDefault();
		var formData = new FormData($("#save_job")[0]);
    var csrf_token = $("input[name='csrf-token']").val();
    $('.fa-spin').show();
    $('.save-job-btn').attr('disabled', true);
		$.ajax({
			url: "{{ route('job.savejobajax') }}",
			type: "POST",
			data: formData,
			contentType: false,
			cache: false,
			processData: false,
      headers: {'X-CSRF-TOKEN': csrf_token},
			success: function(data) {
        var Toast = Swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 8000
        });
        Toast.fire({
          icon: 'success',
          title: 'Your job saved successfully.'
        })
        $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
        $('#savejob-modal').modal('hide');
        $('#save_job')[0].reset();
        $('.fa-spin').hide();
        $('.save-job-btn').attr('disabled', false);
			}
		});
	});
  //save job
  //
  setInterval(function() {
    $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
    curr_pos = {
            'top': $(table.settings()[0].nScrollBody).scrollTop(),
            'left': $(table.settings()[0].nScrollBody).scrollLeft()
        };
        $(table.settings()[0].nScrollBody).scrollTop( curr_pos.top );
        $(table.settings()[0].nScrollBody).scrollLeft( curr_pos.left );
  }, 30000);

  
  $(document).on("click", ".view-job",function(){
    var job_desc = $(this).data('view');
    var data = $('#'+job_desc).html();
    var title = $(this).data('title');
    var url = $(this).data('url');
    var date = $(this).data('date');
    var pid = $(this).data('pid');
    $('#hid_pid').val(pid);
    $('#hid_title').val(title);
    $('#hid_url').val(url);
    $('#hid_date').val(date);
    $('.mbody').html(data);
  });
  $(document).on("click", "#submit-proposal",function(){
      var pid = $('#hid_pid').val();
      var apply_url = $('#hid_title').val();
      var apply_date = $('#hid_date').val();
      var proposal = $('#proposal').val();
      var comment = $('#comment_txt').val();
      var our_bid = $('#our_bid').val();
          //
          var request = $.ajax({
            url: "{{ route('job.applyajax') }}",
            type: "GET",
            data: {
              pid : pid,
              url : apply_url, 
              date : apply_date, 
              type: 1, 
              description: proposal,
              comment: comment,
              our_bid: our_bid
            },
          });
          request.done(function(msg) {
            var Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 8000
            });
            Toast.fire({
              icon: 'success',
              title: 'This job has been marked as applied.'
            })
            $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
            $('#modal-default').modal('hide');
            $('#apply-modal').modal('hide');
          });
          request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
          });
          //

    });

    //reason
    $('#other-field').hide();
    $("#reasons").change(function(){
      var val = $(this).val();
      if(val=="Other"){
        $('#other-field').show();
      }else{
        $('#other-field').hide();
      }
    });
    $("#submit-reason").click(function(){
      var pid = $('#hid_pid').val();
      var reject_url = $('#hid_title').val();
      var reject_date = $('#hid_date').val();
      var reason = $('#reasons').val();
      if(reason=="Other"){
        reason =  $('#other-field').val();
      }
          //
          var request = $.ajax({
            url: "{{ route('job.applyajax') }}",
            type: "GET",
            data: {
              pid:pid,
              url : reject_url,
              date : reject_date,
              type: 0,
              reason: reason,
            },
          });

          request.done(function(msg) {
            var Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 8000
            });
            Toast.fire({
              icon: 'success',
              title: 'Job rejected successfully'
            })
            $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
            $('#modal-default').modal('hide');
            $('#field-modal').modal('hide');
          });
          request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
          });
          //
      });
      //reason

    $("#view").click(function(){
      var pid = $('#hid_pid').val();
      var view_title = $('#hid_title').val();
      var view_url = $('#hid_url').val();
      var view_date = $('#hid_date').val();
          //
          var request = $.ajax({
            url: "{{ route('job.applyajax') }}",
            type: "GET",
            data: {pid : pid, url : view_title, date : view_date, type: 2},
          });
          request.done(function(msg) {
            $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
            window.open(view_url,'_blank');
          });
          request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
          });
          //
      });

    $(document).on("change", "#reason",function(){
     var value = $(this).val();
     if(value=="Other"){
      $("#other").show();
     }else{
      $("#other").hide();
     }
    });

    //comment
    $("#comment-btn").click(function(){
      var comment_url = $('#hid_title').val();
      var comment_date = $('#hid_date').val();
      var comment = $('#comment_txt').val();
          //
          var request = $.ajax({
            url: "{{ route('job.applyajax') }}",
            type: "GET",
            data: {
              url : comment_url,
              date : comment_date,
              type: 3,//comment
              comment: comment,
            },
          });

          request.done(function(msg) {
            var Toast = Swal.mixin({
              toast: true,
              position: 'top-end',
              showConfirmButton: false,
              timer: 8000
            });
            Toast.fire({
              icon: 'success',
              title: 'Your Comment added successfully'
            })
            $('#all_jobs_datatable').DataTable().ajax.reload(null, false);
            $('#modal-default').modal('hide');
            $('#comment-modal').modal('hide');
          });
          request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
          });
          //
      });
    //comment
    //view comment
    $(document).on("click", ".viewcomment",function(){
      var job_comment = $(this).data('comment');
      $('.show-comment').html(job_comment);
    });
    $(document).on("click", "#reject",function(){
      $("#reasons").val('');
      $("#other-field").hide();
      $("#other-field").val('');
    });
    $(document).on("click", "#apply",function(){
      $("#proposal").val('');
    });
    //view comment
});
</script>