@extends('adminlte::page')

@section('title', 'Common Task Report')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Common 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('content.common.dash') }}">Common 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>
                    <option value="6">Video Editor</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="date" id="fromDt" value="{{date('Y-m-01')}}" class="form-control" name="fromDt" placeholder="from date">
              </div>

              <div class="col-md-2 float-left"> 
                <input type="date" id="toDt" value="{{date('Y-m-d')}}" class="form-control" name="toDt" placeholder="to date">
              </div>

              <div class="col-md-2 float-left">
                <a href="javascript:;" class="btn btn-primary me-4" id="dayW" onclick="day_wise();">Filter</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-2 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 stVal" id="tot_task" data-key="totTasks">0</p>
                <p class="stat-label">Total Tasks</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="pending_task" data-key="totPen">0</p>
                <p class="stat-label">Pending Tasks</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="done_task" data-key="totDone">0</p>
                <p class="stat-label">Completed Tasks</p>
              </div>
            </div>
            
            <div class="col-md-2 col-sm-6 mb-3">
              <div class="stat-card" style="background: linear-gradient(135deg, #7b4397, #dc2430);">
                <i class="fas fa-thumbs-down stat-icon"></i>
                <p class="stat-value stVal" id="rej_task" data-key="totrejected">0</p>
                <p class="stat-label">Rejected Tasks</p>
              </div>
            </div>

            <div class="col-md-2 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 stVal" id="appv_task" data-key="totappv">0</p>
                <p class="stat-label">Approved Tasks</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="tot_inprogress" data-key="progess_task">0</p>
                <p class="stat-label">In-Progress Task</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="tot_review" data-key="review_task">0</p>
                <p class="stat-label">Review Task</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="tot_holded" data-key="onhold_task">0</p>
                <p class="stat-label">On-Hold Task</p>
              </div>
            </div>
            
            <div class="col-md-2 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 stVal" id="tot_revision" data-key="revision_task">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 w-100" >
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Project</th>
                    <th>Assignor</th>
                    <th>Assignee</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Status</th>
                    <th>Created At</th>
                  </tr>
                </thead>
                <tbody id="reportBody"></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(); 
  });


function show_report(){
  var r_for = $("#for_showreport").val(); 
  var cnt_nm = $('#cnt_nm').val();
  var cnt_txt = $('#cnt_nm option:selected').text();
  var fromDt =$('#fromDt').val(); 
  var toDt =$('#toDt').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 (fromDt && toDt) {
    var fromDate = new Date(fromDt);
    var toDate   = new Date(toDt);

    if (fromDate > toDate) {
      $("#toDt").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>From Date must be less than To Date</span>").focus(); is_err = 1;
      $(".fill_err").fadeOut(4000);
    } else {
        var diffTime = Math.abs(toDate - fromDate);
        var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 

        if (diffDays > 30) {
          $("#toDt").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>Date difference cannot be more than 30 days</span>").focus(); is_err = 1;
          $(".fill_err").fadeOut(4000);
        }
    }
  }
  else {
      if(fromDt == "") { $("#fromDt").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>select from date</span>").focus(); }
      if(toDt == "") { $("#toDt").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>select to date</span>").focus(); }
      
      $(".fill_err").fadeOut(4000); is_err = 1;
  }

  $("#hv_report").hide().html("");
  if(is_err == 0){ 
    
    var fromDateFormatted = formatDateYMD(fromDate);
    var toDateFormatted   = formatDateYMD(toDt);

    var form_data = new FormData();                   
    form_data.append('cnt_nm', cnt_nm);
    form_data.append('cnt_txt', cnt_txt);
    form_data.append('fromDate', fromDateFormatted);   
    form_data.append('toDt', toDateFormatted);   
    form_data.append('report_for', r_for);   
    form_data.append('proNm', proNm);   
    $.ajax({
      url: BASE_URL+'/admin/task-report/cmn',  
      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();
            if (!obj_res.tasks || obj_res.tasks.length === 0) { $("#hv_report").html("<div class='text-warning' style='font-size:18px;text-align:center;'>No record found</div>"); return; }

            // Generate and show report
            generateReport(obj_res);
          }
      },
      error: function (response) {
        console.log(response);
      }
    });
  }
}


function generateReport(obj_res) {
    const tasks = obj_res.tasks;

    const seoTaskStatus = {
        0: '<span class="text-warning" style="font-weight:bold;">Pending</span>',
        1: '<span class="text-success" style="font-weight:bold;">Completed</span>',
        2: '<span class="text-primary" style="font-weight:bold;">Approved</span>',
        3: '<span class="text-info" style="font-weight:bold;">In Progress</span>',
        4: '<span class="text-warning" style="font-weight:bold;">Review</span>',
        5: '<span class="text-danger" style="font-weight:bold;">On Hold</span>',
        6: '<span class="text-dark" style="font-weight:bold;">Revision Needed</span>'
    };

    const cmnTaskStatus = {
        1: '<span class="text-warning fw-bold">Pending</span>',
        2: '<span class="text-success fw-bold">Completed</span>',
        3: '<span class="text-danger fw-bold">Rejected</span>'
    };

    // Group tasks by user (assignee or reassignee)
    const users = {};

    tasks.forEach(t => {
        // Primary assignee
        const assigneeName = t.assignee ? t.assignee.name : 'Unknown';
        if (!users[assigneeName]) {
            users[assigneeName] = { tasks: [], totals: initTotals() };
        }
        users[assigneeName].tasks.push(t);
        updateTotals(users[assigneeName].totals, t, false);

        // Reassignee (if exists)
        if (t.reassign_to && t.reassignee) {
            const reassignName = t.reassignee.name;
            if (!users[reassignName]) {
                users[reassignName] = { tasks: [], totals: initTotals() };
            }
            users[reassignName].tasks.push(t);
            updateTotals(users[reassignName].totals, t, true);
        }
    });

    // Generate HTML for all users
    let reportHTML = '';
    Object.keys(users).forEach(userName => {
        const userData = users[userName];
        const totals = userData.totals;

        reportHTML += `
        <div class="card mb-3">
            <div class="card-body">
                <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;">${userName}</span>
                    <span style="font-size: 18px; color: #666; margin-left: 5px;">(${obj_res.proNm || 'All Projects'})</span>
                </div>
                <div class="row">
                    ${generateStatCard('Total Tasks', 'tot_task', totals.totTasks, '#007bff', 'fas fa-list-alt')}
                    ${generateStatCard('Pending Tasks', 'pending_task', totals.totPen, '#f6d365', 'fas fa-user-plus')}
                    ${generateStatCard('Completed Tasks', 'done_task', totals.totDone, '#56ab2f', 'fas fa-check-circle')}
                    ${generateStatCard('Rejected Tasks', 'rej_task', totals.totrejected, '#7b4397', 'fas fa-thumbs-down')}
                    ${generateStatCard('Approved Tasks', 'appv_task', totals.totappv, '#7b4397', 'fas fa-thumbs-up')}
                    ${generateStatCard('In-Progress Task', 'tot_inprogress', totals.progess_task, '#36d1dc', 'fas fa-spinner')}
                    ${generateStatCard('Review Task', 'tot_review', totals.review_task, '#ff9a9e', 'fas fa-search')}
                    ${generateStatCard('On-Hold Task', 'tot_holded', totals.onhold_task, '#bdc3c7', 'fas fa-pause-circle')}
                    ${generateStatCard('Revision Needed Task', 'tot_revision', totals.revision_task, '#ff6a00', 'fas fa-exclamation-triangle')}
                </div>
                <div class="table-responsive mt-3">
                    <table class="table table-bordered w-100">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Project</th>
                                <th>Assignor</th>
                                <th>Assignee</th>
                                <th>Title</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Created At</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${generateTableRows(userData.tasks, cmnTaskStatus, seoTaskStatus, userName)}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        `;
    });

    $('#hv_report').show().html(reportHTML);
}

// Initialize totals
function initTotals() {
    return {
        totTasks: 0,
        totPen: 0,
        totDone: 0,
        totappv: 0,
        onhold_task: 0,
        review_task: 0,
        revision_task: 0,
        progess_task: 0,
        totrejected: 0
    };
}

// Update totals based on task
function updateTotals(totals, task, isReassign) {
    totals.totTasks++;
    if (task.task_for == 0) {
        if (!isReassign) {
            if (task.task_status == 1) totals.totPen++;
            else if (task.task_status == 2) totals.totDone++;
            else if (task.task_status == 3) totals.totrejected++;
        } else {
            if (task.reassign_status == 1) totals.totPen++;
            else if (task.reassign_status == 2) totals.totDone++;
            else if (task.reassign_status == 3) totals.totrejected++;
        }
    } else {
        const st = task.assign_task_status;
        if (st === 0) totals.totPen++;
        else if (st === 1) totals.totDone++;
        else if (st === 2) totals.totappv++;
        else if (st === 3) totals.progess_task++;
        else if (st === 4) totals.review_task++;
        else if (st === 5) totals.onhold_task++;
        else if (st === 6) totals.revision_task++;
    }
}

// Table rows
function generateTableRows(tasks, cmnTaskStatus, seoTaskStatus, currentUser) {
    let html = '';
    let i = 1;

    tasks.forEach(t => {
        let statusLabel = '';
        let category = t.task_for == 0 ? 'Video Edit' : (t.assign_task_type ?? 'Self Task');

        // Determine which status to show for this user
        if (t.assignee && t.assignee.name === currentUser) {
            statusLabel = t.task_for == 0 ? cmnTaskStatus[t.task_status] : seoTaskStatus[t.assign_task_status];
        } else if (t.reassignee && t.reassignee.name === currentUser) {
            statusLabel = t.task_for == 0 ? cmnTaskStatus[t.reassign_status] : seoTaskStatus[t.assign_task_status];
        }

        // Determine assignor column based on current user role
        let assignorName = '';
        if (t.assignee && t.assignee.name === currentUser) {
            // If current user is original assignee, show assignor
            assignorName = t.assignor ? t.assignor.name : '-';
        } else if (t.reassignee && t.reassignee.name === currentUser) {
            // If current user is reassignee, show original assignee
            assignorName = t.assignee ? t.assignee.name : '-';
        } else {
            // Fallback
            assignorName = t.assignor ? t.assignor.name : '-';
        }

        html += `
        <tr>
            <td>${i}</td>
            <td>${t.project_nm}</td>
            <td>${assignorName}</td> <!-- Dynamic assignor logic -->
            <td>${currentUser}</td> <!-- Current user -->
            <td>${t.title}</td>
            <td>${category}</td>
            <td>${statusLabel}</td>
            <td>${t.created_at ? t.created_at.split('T')[0] : '-'}</td>
        </tr>
        `;
        i++;
    });

    return html;
}


// Stat card generator
function generateStatCard(label, id, value, bgColor, icon) {
    return `
    <div class="col-md-2 col-sm-6 mb-3">
        <div class="stat-card" style="background: linear-gradient(135deg, ${bgColor}, #00000033);">
            <i class="${icon} stat-icon"></i>
            <p class="stat-value" id="${id}">${value}</p>
            <p class="stat-label">${label}</p>
        </div>
    </div>
    `;
}



function formatDateYMD(dateStr) {
    let d = new Date(dateStr);
    let year = d.getFullYear();
    let month = String(d.getMonth() + 1).padStart(2, '0');
    let day = String(d.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}


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 },
    6: { role: 2, user_type: 1 }
  };

  const condition = uTypeMap[uType];

  $("#hv_report").html("");

  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