@extends('adminlte::page')

@section('title', 'Content')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Content Writer Reports (SEO)</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('content.seo.dash') }}">SEO Dashboard</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page">Report</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-2"> 
                  <a href="{{ route('seo.timelines') }}" class="btn btn-primary"><i class="fas fa-stream me-1"></i> Timeline Report</a>
                </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=""> - select project -</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="cnt_nm" id="cnt_nm" onchange="wtr_name(this.id);" class="form-control col-md-12 mb-12">
                    <option value="">- select content writer -</option>
                    <option value="1">Admin</option>
                    @if(!empty($contents_person))
                      @foreach($contents_person as $cp)
                        <option value="{{$cp->id}}">{{$cp->name}}</option> 
                      @endforeach
                    @endif
                </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 class="col-md-2 float-left">
                <a href="javascript:;" class="btn btn-primary" style="background-color: #afbac7;border-color: #afbac7;" id="highlightW" onclick="report_highlighted();">Highlighted Text</a>
              </div>
              
            </div>
            
        </div>
        
        <div id="hv_report" class="card-body">

          <div id="wrtNm" style="margin: 10px 0;display:none;">
            <span style="font-size: 22px; font-weight: 600; color: #333;">
              Writer 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 g-3" id="tot_boxs" style="display:none;">
            
            <!-- Total Tasks -->
            <div class="col-md-3 col-sm-6">
              <div class="stat-card" style="background: linear-gradient(135deg, #17a2b8, #199eb3);">
                <i class="fas fa-tasks stat-icon"></i>
                <p class="stat-value" id="tot_task">0</p>
                <p class="stat-label">Total Tasks</p>
              </div>
            </div>
            <!-- Pending Tasks -->
            <div class="col-md-3 col-sm-6">
              <div class="stat-card" style="background: linear-gradient(135deg, #ffc107, #e4ac06ff);">
                <i class="fas fa-hourglass-half stat-icon"></i>
                <p class="stat-value" id="pending_task">0</p>
                <p class="stat-label">Pending Tasks</p>
              </div>
            </div>
            <!-- Completed Tasks -->
            <div class="col-md-3 col-sm-6">
              <div class="stat-card" style="background: linear-gradient(135deg, #28a745, #279c42ff);">
                <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>
            <!-- Rejected Tasks -->
            <div class="col-md-3 col-sm-6">
              <div class="stat-card" style="background: linear-gradient(135deg, #dc3545, #be2232ff);">
                <i class="fas fa-times-circle stat-icon"></i>
                <p class="stat-value" id="reject_task">0</p>
                <p class="stat-label">Rejected Tasks</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(); 
  if(r_for == 0){
    $("#dayW").css({ "background-color": "#007bff", "border-color": "#007bff" });

    $("#highlightW").css({ "background-color": "#afbac7", "border-color": "#afbac7" });
  }
  else {
    $("#highlightW").css({ "background-color": "#007bff", "border-color": "#007bff" });

    $("#dayW").css({ "background-color": "#afbac7", "border-color": "#afbac7" });
  }

  $(".fill_err").remove(); 
  var is_err = 0;
  /*$("#cntNm").html("");
  $("#totwords").html("");
  $("#forums").html("");
  $("#blogs").html("");
  $("#web_contents").html("");
  $("#faqs").html("");
  $("#tools").html("");
  $("#others").html("");
  $("#hv_report").hide();
  $("#day_report").hide();
  $("#day_data").html("");*/  
  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/seo/get-reports',  
      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") {
            $("#wrtNm").show();
            $("#tot_boxs").show();
            $("#hv_report").show();
            $("#tot_task").html(obj_res.totTasks);
            $("#pending_task").html(obj_res.totPen);
            $("#done_task").html(obj_res.totDone);
            $("#reject_task").html(obj_res.totRej);
            $("#dt_report").html(obj_res.secondTbl).show(); 
            
            
            /*$("#day_report").show();
            if(proNm == "") { proNm_text = "All Projects"; }
            $("#c_nm").html(cnt_txt+' ['+proNm_text+']');
            $("#day_data").html(obj_res.dayWise);
            $("#projNm").html(proNm_text);
            if(r_for == 0){  
              $("#tot_report").show();
              $("#hv_report").show();
              $("#cntNm").html(obj_res.name+' ['+proNm_text+']');
              $("#totwords").html(obj_res.totWords);
              $("#forums").html(obj_res.forums);
              $("#blogs").html(obj_res.blogs);
              $("#web_contents").html(obj_res.web_content);
              
              $("#taskTot").html(obj_res.totTasks);
              $("#taskPending").html(obj_res.totPen);
              $("#taskDone").html(obj_res.totDone);
              $("#taskRej").html(obj_res.totRej);
            }
            else {
              $("#tot_report").hide();
            }*/
          }
      },
      error: function (response) {
        console.log(response);
      }
    });
  }
}


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


function wtr_name(tagid){
  var pronm = $("#"+tagid+" option:selected").text();
  if(pronm == "") { $("#wNm").html(""); }
  else { $("#wNm").html(" ("+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(); 
    });
});

</script>

@stop