@extends('layouts.app')

@section('form-title') {{ __('Projects') }} @endsection
@section('form-sub-title') {{ __('Click a project to view more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item"><a href="{{ route('projects.index') }}">{{ __('Projects') }}</a> </li> 
@endsection
    
@section('content')
<style>
  /* Default sorting indicator */
  table.dataTable thead .sorting:before {
      content: ' ⇅'; /* Default icon to indicate sortable */
      margin-right: 5px; /* Spacing between icon and header text */
      opacity: 0.5; /* Slightly transparent to indicate default state */
  }

  /* Sorting ascending */
  table.dataTable thead .sorting_asc:after {
      content: ' ▲'; /* Ascending icon */
  }

  /* Sorting descending */
  table.dataTable thead .sorting_desc:after {
      content: ' ▼'; /* Descending icon */
  }

  /* Remove default background image if you had one */
  table.dataTable thead .sorting {
      background-image: none;
  }
</style>
<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        <div class="row">
          <div class="col-sm-6">
            <div class="card">
              {{-- <div class="card-header">
                <h5>{{ __('New project') }}</h5>
              </div> --}}
              <div class="card-block">
                <div class="input-group">
                  @if(canViewUpdate('add projects of own organization'))
                  <a class="btn btn-primary ms-2 mt-2" href="{{ route('projects.create') }}"> 
                    {{ __('Add new project') }} 
                  </a>
                  @endif
                  @if(canViewUpdate('create project, task and end user'))
                  <a class="btn btn-primary ms-2 mt-2" href="{{ route('wizard.index') }}"> 
                    {{ __('Add enduser + Project + Task') }} 
                  </a>
                  @endif
                  @if(canViewUpdate('create project and task'))
                  <a class="btn btn-primary ms-2 mt-2" href="{{ route('wizard.project.task.index') }}"> 
                    {{ __('Add new project + task') }} 
                  </a>
                  @endif
                  @if(canViewUpdate('report check'))
                  <a class="btn btn-primary ms-2 mt-2" href="{{ route('report.check') }}"> 
                    {{ __('Report check') }} 
                  </a>
                  @endif
                  @if(canViewUpdate('view invoice to'))
                  <a class="btn btn-primary ms-2 mt-2" href="{{ route('to-invoice.index') }}"> 
                    {{ __('To invoice') }} 
                  </a>
                  @endif
                </div>
              </div>
            </div>
          </div>
          {{-- Add new organisation end --}}
          <div class="col-sm-6">
            <div class="card">
              {{-- <div class="card-header">
                <h5>{{ __('Search organisation') }}</h5>
              </div> --}}
              <div class="card-block">
                  <div class="row mb-3">
                    <div class="col-sm-12">
                        <div class="checkbox-zoom zoom-primary">
                            @php
                              $s_projects_checked = 'checked';
                              $s_clients_checked = 'checked';
                              $s_endusers_checked = 'checked';
                              $s_city_endusers_checked = 'checked';

                              if(!empty($s_projects) && $s_projects === 'no'){
                                $s_projects_checked = '';
                              }

                              if(!empty($s_clients) && $s_clients === 'no'){
                                $s_clients_checked = '';
                              }

                              if(!empty($s_endusers) && $s_endusers === 'no'){
                                $s_endusers_checked = '';
                              }

                              if(!empty($s_city_endusers) && $s_city_endusers === 'no'){
                                $s_city_endusers_checked = '';
                              }
                            @endphp
                            <label class="form-label">
                                <input type="checkbox" class="single-selection" name="s_projects" id="s_projects" value="yes" {{ $s_projects_checked }}>
                                <span class="cr">
                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                </span>
                                <span>{{ __('Projects') }}</span>
                            </label>
                        </div>
                        @if(getAuthUser()->can('view other organizations'))
                        <div class="checkbox-zoom zoom-primary">
                            <label class="form-label">
                                <input type="checkbox" class="single-selection" name="s_clients" id="s_clients" value="yes" {{ $s_clients_checked }}>
                                <span class="cr">
                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                </span>
                                <span>{{ __('Clients') }}</span>
                            </label>
                        </div>
                        @endif
                        <div class="checkbox-zoom zoom-primary">
                            <label class="form-label">
                                <input type="checkbox" class="single-selection" name="s_endusers" id="s_endusers" value="yes" {{ $s_endusers_checked }}>
                                <span class="cr">
                                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                                </span>
                                <span>{{ __('EndUsers') }}</span>
                            </label>
                        </div>
                        <div class="checkbox-zoom zoom-primary">
                          <label class="form-label">
                              <input type="checkbox" class="single-selection" name="s_city_endusers" id="s_city_endusers" value="yes" {{ $s_city_endusers_checked }}>
                              <span class="cr">
                                  <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
                              </span>
                              <span>{{ __('City EndUser') }}</span>
                          </label>
                        </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="input-group">
                        <input type="text" name="search" id="search_project" class="form-control" placeholder="{{ __('Search for') }}" value="@if(!empty($search)) {{ $search }} @endif" autocomplete="off">
                        <button class="btn btn-primary" type="button" id="btn_search_project">
                          <span id="search_spinner" class="spinner-border spinner-border-sm" style="display: none;"></span>
                          {{ __('Search') }}
                        </button>
                      </div>
                    </div>
                  </div>
                  <div id="search-box"></div>
              </div>
            </div>
          </div>
          {{-- Search end --}}
        </div>
        <div class="row">
          <div class="card">
            <div class="card-header">
              <div class="row">
                <div class="col-sm-9">
                  <h5>{{ __('Projects') }}</h5>
                </div>
                <div class="col-sm-3">
                  {!! projectStatus('status') !!}
                </div>
              </div>
            </div>
            <div class="card-block">
              <div class="row mb-3">
                <div class="table-responsive">
                  <table class="table table-striped data-table">
                    <thead>
                      <tr>
                        <th data-orderable="true">{{ __('Project') }}</th>
                        <th data-orderable="true">{{ __('Client') }}</th>
                        <th data-orderable="true">{{ __('Deadline') }}</th>
                        <th data-orderable="true">{{ __('City') }}</th>
                        <th data-orderable="true">{{ __('End User') }}</th>
                        <th data-orderable="true">{{ __('Status') }}</th>
                        <th data-orderable="true">{{ __('Created') }}</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
              </div>
              <div class="row text-center dtpagination"></div>
            </div>
          </div>
        </div>
        {{-- Organisation listing end --}}
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
$(document).ready(function(){
  //fetch_projects();
  var table = $('.data-table').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
          url: "{{ route('projects.index') }}",
          type: "GET",
          data: function(d) {
              d.search_text = $('#search_project').val();
              d.s_projects = $('#s_projects').prop("checked") ? 'yes' : 'no';
              d.s_clients = $('#s_clients').prop("checked") ? 'yes' : 'no';
              d.s_endusers = $('#s_endusers').prop("checked") ? 'yes' : 'no';
              d.s_city_endusers = $('#s_city_endusers').prop("checked") ? 'yes' : 'no';
              d.status = $('#status').val();
          }
      },
      columns: [
          { "data": "title", "orderable": true },  // Ensure sorting is enabled
          { "data": "client", "orderable": true }, 
          { "data": "deadline", "orderable": true },
          { "data": "city", "orderable": true },
          { "data": "enduser", "orderable": true },
          { "data": "status", "orderable": true },
          { "data": "created_at", "orderable": true }
      ],
      order: [[6, 'desc']], // Ensure sorting is always enabled
      pageLength: {!! config('furnit.number_of_table_lines') !!},
      lengthChange: false,
      searching: false,
      info: false,
      paging: true,
      pagingType: "simple_numbers",
      dom: 't<"custom-pagination">',
      drawCallback: function(settings) {
        // Custom pagination rendering
        var pageInfo = table.page.info();
        var currentPage = pageInfo.page;
        var totalPages = pageInfo.pages;
        var pageRange = 5;

        var paginationHtml = '<nav aria-label="..."><ul class="pagination">';
        
        // "Previous" button
        if (currentPage > 0) {
            paginationHtml += '<li class="page-item"><a href="#" data-page="' + (currentPage - 1) + '" class="page-link">« Previous</a></li>';
        } else {
            paginationHtml += '<li class="page-item disabled"><a class="page-link">« Previous</a></li>';
        }

        // Show first page link and dots if necessary
        if (currentPage > pageRange) {
            paginationHtml += '<li class="page-item"><a href="#" data-page="0" class="page-link">1</a></li>';
            if (currentPage > pageRange + 1) {
                paginationHtml += '<li class="page-item disabled"><a class="page-link">...</a></li>';
            }
        }

        // Page links within the range
        var startPage = Math.max(0, currentPage - pageRange);
        var endPage = Math.min(totalPages - 1, currentPage + pageRange);

        for (var i = startPage; i <= endPage; i++) {
            paginationHtml += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '"><a href="#" data-page="' + i + '" class="page-link">' + (i + 1) + '</a></li>';
        }

        // Show last page link and dots if necessary
        if (currentPage < totalPages - pageRange - 1) {
            if (currentPage < totalPages - pageRange - 2) {
                paginationHtml += '<li class="page-item disabled"><a class="page-link">...</a></li>';
            }
            paginationHtml += '<li class="page-item"><a href="#" data-page="' + (totalPages - 1) + '" class="page-link">' + totalPages + '</a></li>';
        }

        // "Next" button
        if (currentPage < totalPages - 1) {
            paginationHtml += '<li class="page-item"><a href="#" data-page="' + (currentPage + 1) + '" class="page-link">Next »</a></li>';
        } else {
            paginationHtml += '<li class="page-item disabled"><a class="page-link">Next »</a></li>';
        }

        paginationHtml += '</ul></nav>';

        // Inject custom pagination into the desired div
        $('.dtpagination').html(paginationHtml);
      }
  });

  // Handle click event for custom pagination
  $('.dtpagination').on('click', 'a', function(e) {
    e.preventDefault();
    var page = $(this).data('page');
    if (page !== undefined) {
        table.page(page).draw('page'); // Move to the selected page
    }
  });

  $(document).on('change', '#status', function(){
    table.ajax.reload();
  });

  $(document).on('click', '#btn_search_project', function(){
    $("#status").val('');
    table.ajax.reload();
    $('#search-box').html('');
  });

  $("#search_project").keyup(function(){
    let search_text      = $(this).val();
    let s_projects       = $('#s_projects').length > 0 ? ($('#s_projects').prop("checked") ? 'yes' : 'no') : 'yes';
    let s_clients        = $('#s_clients').prop("checked") ? 'yes' : 'no';
    let s_endusers       = $('#s_endusers').prop("checked") ? 'yes' : 'no';
    let s_city_endusers  = $('#s_city_endusers').prop("checked") ? 'yes' : 'no';
    
    if(search_text.length >= 3){
      $.ajax({
          url: "{{ route('projects.search') }}",
          method: 'post',
          data: {
            search: search_text, 
            s_projects: s_projects, 
            s_clients: s_clients, 
            s_endusers: s_endusers, 
            s_city_endusers: s_city_endusers
          },
          beforeSend: function(){
            $('#search_spinner').show();
          },
          headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
          success: function(data){
            $('#search-box').html(data);
            $('#search_spinner').hide();
          }
      });
    }else if(search_text.length == 0){
      $('#search-box').html('');
    }
  });
});

</script>
@endpush