@extends('adminlte::page')

@section('title', 'SEO Task Manager')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">SEO Task Reports</h1>
@stop
<style>
            .stat-card {
              border-radius: 16px;
              padding: 20px;
              color: #fff;
              transition: all 0.3s ease-in-out;
              position: relative;
              overflow: hidden;
            }

            .stat-card:hover {
              transform: translateY(-5px);
              box-shadow: 0 8px 20px rgba(0,0,0,0.25);
            }

            .stat-icon {
              font-size: 40px;
              opacity: 0.2;
              position: absolute;
              top: 15px;
              right: 20px;
            }

            .stat-value {
              font-size: 28px;
              font-weight: 700;
              margin: 0;
            }

            .stat-label {
              font-size: 18px;
              font-weight: 500;
              opacity: 0.9;
            }
          </style>
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<input type="hidden" value="{{ URL::to('/') }}" id="urlBase" />
    <div class="card shadow rounded-lg  mb-3 p-2">
        <div class="card-header">
            <div class="row mt-3">
                <div class="col-md-10"> 
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white">
                            <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page"><a href="{{ route('seo.manage.task') }}">SEO Dashboard</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page">Report</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <input type="hidden" value="0" id="for_showreport" />
        <div class="card-body">
            <div class="table-responsive">
              <div class="col-md-2 float-left">
                <select name="proNm" id="proNm" onchange="pro_name(this.id);" class="form-control col-md-12 mb-12">
                    <option value="">All Projects</option>
                    <option value="Visament">Visament</option>
                    <option value="Savetaxs">Savetaxs</option>
                    <option value="Armonia Gems">Armonia Gems</option>
                </select>
              </div>

              <div class="col-md-2 float-left">
                <select name="uType" id="uType" onchange="updt_user(this.id);" class="form-control col-md-12 mb-12">
                    <option value=""> - select usertype -</option>
                    <option value="1">SEO</option>
                    <option value="2">Social Media</option>
                    <option value="3">Graphic Designer</option>
                    <option value="4">Designer</option>
                    <option value="5">Developer</option>
                </select>
              </div>

              <div class="col-md-2 float-left ">
                <select name="cnt_nm" id="cnt_nm" onchange="wtr_name(this.id);" class="form-control col-md-12 mb-12">
                    <option value="">- select user -</option>
                    
                </select>
              </div>
                            
              <div class="col-md-2 float-left"> 
                <input type="month" id="report_month" value="{{date('Y-m')}}" class="form-control" name="report_month" placeholder="select month">
              </div>

              <div class="col-md-2 float-left">
                <a href="javascript:;" class="btn btn-primary me-4" id="dayW" onclick="day_wise();">Day Wise Report</a>
              </div>
              
            </div>
            
        </div>
        
        <div id="hv_report" class="card-body" style="display:none;">

          <div id="wrtNm" style="margin: 10px 0;">
            <span style="font-size: 22px; font-weight: 600; color: #333;">
              Name :
            </span>
            <span style="font-size: 24px; font-weight: 700; color:#0070ff;" id="wNm">
              Anushka
            </span>
            <span style="font-size: 18px; color: #666; margin-left: 5px;" id="pjNm">
              (All Projects)
            </span>
          </div>

          <div class="row"> 
            
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #007bff, #0056b3);">
                <i class="fas fa-list-alt stat-icon"></i>
                <p class="stat-value" id="tot_task">0</p>
                <p class="stat-label">Total Tasks</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #f6d365, #fda085);">
                <i class="fas fa-user-plus stat-icon"></i>
                <p class="stat-value" id="pending_task">0</p>
                <p class="stat-label">Assign Tasks</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #56ab2f, #a8e063);">
                <i class="fas fa-check-circle stat-icon"></i>
                <p class="stat-value" id="done_task">0</p>
                <p class="stat-label">Completed Tasks</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #7b4397, #dc2430);">
                <i class="fas fa-thumbs-up stat-icon"></i>
                <p class="stat-value" id="appv_task">0</p>
                <p class="stat-label">Approved Tasks</p>
              </div>
            </div>

            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #36d1dc, #5b86e5);">
                <i class="fas fa-spinner stat-icon"></i>
                <p class="stat-value" id="tot_inprogress">0</p>
                <p class="stat-label">In-Progress Task</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #ff9a9e, #fecfef);">
                <i class="fas fa-search stat-icon"></i>
                <p class="stat-value" id="tot_review">0</p>
                <p class="stat-label">Review Task</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #bdc3c7, #2c3e50);">
                <i class="fas fa-pause-circle stat-icon"></i>
                <p class="stat-value" id="tot_holded">0</p>
                <p class="stat-label">On-Hold Task</p>
              </div>
            </div>
            
            <div class="col-md-3 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #ff6a00, #ee0979);">
                <i class="fas fa-exclamation-triangle stat-icon"></i>
                <p class="stat-value" id="tot_revision">0</p>
                <p class="stat-label">Revision Needed Task</p>
              </div>
            </div>

          </div>

          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered" style="font-size:16px; font-weight:500;">
                <tbody id="dt_report" style="display:none;">
                  <tr>
                    <td class="fw-bold bg-light" style="width:30%;">Project</td>
                    <td class="fw-bold" style="background:#fff;">All Projects</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

    </div>
  
@stop

@section('css')

@stop

@section('js')

<script>

  document.getElementById('cnt_nm').addEventListener('change', function() {
    $(".fill_err").remove(); 
  });

  document.getElementById('report_month').addEventListener('change', function () {
    $(".fill_err").remove(); 
  });

  const monthInput = document.getElementById('report_month');
  
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  monthInput.max = `${year}-${month}`;
  monthInput.min = `2025-08`;


function show_report(){
  var r_for = $("#for_showreport").val(); 
  var cnt_nm = $('#cnt_nm').val();
  var cnt_txt = $('#cnt_nm option:selected').text();
  var report_month =$('#report_month').val(); 
  var proNm =$('#proNm').val(); 
  var proNm_text =$('#proNm option:selected').text();  
  var BASE_URL = $("#urlBase").val(); 
  
  $(".fill_err").remove(); 
  var is_err = 0;
   
  if(report_month == ""){ 
      $("#report_month").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>select month</span>").focus(); is_err = 1;
      $(".fill_err").fadeOut(2000);
  }

  if(cnt_nm == ""){ 
      $("#cnt_nm").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>select content writer</span>").focus(); is_err = 1;
      $(".fill_err").fadeOut(2000);
  }
 
  if(is_err == 0){  //$("#dt_report").html("");
    var form_data = new FormData();                   
    form_data.append('cnt_nm', cnt_nm);
    form_data.append('cnt_txt', cnt_txt);
    form_data.append('report_month', report_month);   
    form_data.append('report_for', r_for);   
    form_data.append('proNm', proNm);   
    $.ajax({
      url: BASE_URL+'/admin/task-report/seo',  
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      dataType: 'json',  
      processData: false,
      cache:false,
      data: form_data,
      contentType:false,                         
      type: 'post',
      success: function(obj_res){ 
          if(obj_res.status == "success") { 
            $("#hv_report").show();
            $("#tot_task").text(obj_res.totTasks);
            $("#pending_task").text(obj_res.totPen);
            $("#done_task").text(obj_res.totDone);
            $("#appv_task").text(obj_res.totappv);
            $("#tot_inprogress").text(obj_res.progess_task);
            $("#tot_review").text(obj_res.review_task);
            $("#tot_holded").text(obj_res.onhold_task);
            $("#tot_revision").text(obj_res.revision_task);
          }
      },
      error: function (response) {
        console.log(response);
      }
    });
  }
}


function pro_name(tagid){
  var pronm = $("#"+tagid+" option:selected").text();
  $("#pjNm").text(pronm ? ` (${pronm})` : " (All Projects)");
  show_report();
}


function wtr_name(tagid){
  var pronm = $("#"+tagid+" option:selected").text();
  $("#wNm").text(pronm ? ` (${pronm})` : ""); 
  show_report();
}


function day_wise(){
  $("#for_showreport").val(0);
  show_report();
}


function report_highlighted(){
  $("#for_showreport").val(1);
  show_report();
}

</script>


<script>
$(document).ready(function(){
    $("#report_month").on("change", function(){
        show_report(); 
    });
});

var emps = null;
function updt_user(uid){
  var uType = $("#uType").val();
  $("#cnt_nm").html("<option value=''>- select user -</option>");

  const uTypeMap = {
    1: { role: 3 },
    2: { role: 2, user_type: 3 },
    3: { role: 2, user_type: 2 },
    4: { role: 2, user_type: 5 },
    5: { role: 2, user_type: 4 }
  };

  const condition = uTypeMap[uType];

  if (condition) {
      emps.forEach(emp => {
          const matches = Object.keys(condition).every(key => emp[key] == condition[key]);
          if (matches) {
              $("#cnt_nm").append(`<option value='${emp.id}'>${emp.name}</option>`);
          }
      });
  }
  
}

</script>

@stop