@extends('adminlte::page')

@section('title', 'Content')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Content Writer Reports</h1>
@stop

@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-6 float-left "> 
                    <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.index') }}">Content</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page">Report</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        
        <div class="card-body">
            <div class="table-responsive">
              <div class="col-md-3 float-left ">
                <input type="hidden" value="0" id="reportFor" />
                <select name="cnt_nm" id="cnt_nm" class="form-control col-md-8 mb-8">
                    <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-3 float-left"> 
                <input type="month" id="report_month" value="2026-02" 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" style="background-color: #afbac7;border-color: #afbac7;" id="dayW" onclick="show_report(0);">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="show_report(1);">Highlighted Text</a>
              </div>
              
            </div>
            
        </div>

        <div class="card-body" id="hv_report" style="display:none;">
            <div class="table-responsive">
              <div class="col-md-3 float-left">
                Name : <span id="cntNm" style="color:#0070ff; font-weight:bold;"></span>
              </div>

              <div class="col-md-3 float-left">
                Total Words In Documents : <span id="totwords" class="stVal" data-key="totWords" style="color:#0070ff; font-weight:bold;">0</span> 
              </div>

              <div class="col-md-3 float-left">
                Total Forums : <span id="forums" class="stVal" data-key="forums" style="color:#0070ff; font-weight:bold;">0</span>
              </div>

              <div class="col-md-3 float-left">
                Total Blogs : <span id="blogs" class="stVal" data-key="blogs" style="color:#0070ff; font-weight:bold;">0</span>
              </div>
            </div><br/>

            <div class="table-responsive">
              <div class="col-md-3 float-left">
                Total Website Content : <span id="web_contents" data-key="web_content" class="stVal" style="color:#0070ff; font-weight:bold;">0</span>
              </div>

              <div class="col-md-3 float-left">
                Total FAQ'S : <span id="faqs" class="stVal" data-key="faq" style="color:#0070ff; font-weight:bold;">0</span> 
              </div>

              <div class="col-md-3 float-left">
                Total Tools : <span id="tools" class="stVal" data-key="tools" style="color:#0070ff; font-weight:bold;">0</span>
              </div>

              <div class="col-md-3 float-left">
                Total Others : <span id="others" class="stVal" data-key="others" style="color:#0070ff; font-weight:bold;">0</span>
              </div>
            </div><br/>

            <div class="table-responsive">
              <div class="col-md-3 float-left">
                Total US Blog : <span id="us_blog" class="stVal" data-key="us_blog" style="color:#0070ff; font-weight:bold;">0</span>
              </div>
            </div>
            
        </div>

        <div class="card-body" id="day_report" style="display:none;">
          <div><h3>Day Wise Report (<span id="c_nm" style="color:blue;"></span>)</h3></div><br>
          <div class="table-responsive" id="day_data"></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}`;

function show_report(r_for){   
  var cnt_nm = $('#cnt_nm').val();
  var cnt_txt = $('#cnt_nm option:selected').text();
  var report_month =$('#report_month').val();
  var BASE_URL = $("#urlBase").val(); 
  $("#reportFor").val(r_for); 

  const activeCss  = { "background-color": "#007bff", "border-color": "#007bff" };
  const inactiveCss = { "background-color": "#afbac7", "border-color": "#afbac7" };

  $("#dayW").css(r_for == 0 ? activeCss : inactiveCss);
  $("#highlightW").css(r_for == 0 ? inactiveCss : activeCss);

  $(".fill_err").remove(); 
  var is_err = 0;
  $("#cntNm").html("");
  $(".stVal").text(0); 
  $("#hv_report, #day_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;
  }

  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;
  }
 
  if(is_err == 0){  
    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);   
    $.ajax({
      url: BASE_URL+'/admin/content/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") {
            $("#day_report").show();
            $("#c_nm").html(cnt_txt);
            $("#day_data").html(obj_res.dayWise);
            if(r_for == 0){ 
              $("#hv_report").show();
              $("#cntNm").html(obj_res.name);

              $("[data-key]").each(function () {
                const key = $(this).data("key");
                $(this).text(obj_res[key] || 0);
              });
            }
          }
      },
      error: function (response) {
        console.log(response);
      }
    });
  }
}


$("#cnt_nm").on("change", function () {      
  const sctCat = $(this).val(); 
  $(".stVal").text(0); 
  $("#day_data").html(""); 
  if(sctCat != ""){
    var reportFor = $("#reportFor").val();
    show_report(reportFor);
  } 
});

</script>

@stop