@extends('layouts.main')


@section('content')
<div class="main-content">
    <h5 class="mb-3">
        <i class="bi bi-kanban icon-animate" style="color: #6f42c1;"> </i>
        <span class="heading">Task Report</span>
    </h5>
    
    <hr>

    @php
        $task_summary = $data['task_summary']->toArray();
        $total_tasks = array_sum($task_summary);
    @endphp

    <div class="row g-3 mb-4">

        <!-- Total Tasks -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-dark fw-bold">
                        <h5 class="mb-0">{{ $total_tasks }}</h5>
                    </div>
                    <small class="text-muted d-block">(100%)</small>
                    <span class="fw-bold text-dark mt-2 d-block">Total</span>
                </div>
            </div>
        </div>


        <!-- Backlog -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-secondary fw-bold">
                        <h5 class="mb-0">{{ $task_summary[TASK_STATUS_BACKLOG] ?? 0 }}</h5>
                    </div>
                    <small class="text-muted d-block">
                        ({{ $total_tasks > 0 ? round(($task_summary[TASK_STATUS_BACKLOG] ?? 0) * 100 / $total_tasks, 1) : 0 }}%)
                    </small>
                    <span class="fw-bold text-secondary mt-2 d-block">Backlog</span>
                </div>
            </div>
        </div>

        <!-- In Progress -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-primary fw-bold">
                        <h5 class="mb-0">{{ $task_summary[TASK_STATUS_IN_PROGRESS] ?? 0 }}</h5>
                    </div>
                    <small class="text-muted d-block">
                        ({{ $total_tasks > 0 ? round(($task_summary[TASK_STATUS_IN_PROGRESS] ?? 0) * 100 / $total_tasks, 1) : 0 }}%)
                    </small>
                    <span class="fw-bold text-primary mt-2 d-block">In Progress</span>
                </div>
            </div>
        </div>

        <!-- Testing -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-info fw-bold">
                        <h5 class="mb-0">{{ $task_summary[TASK_STATUS_TESTING] ?? 0 }}</h5>
                    </div>
                    <small class="text-muted d-block">
                        ({{ $total_tasks > 0 ? round(($task_summary[TASK_STATUS_TESTING] ?? 0) * 100 / $total_tasks, 1) : 0 }}%)
                    </small>
                    <span class="fw-bold text-info mt-2 d-block">Testing</span>
                </div>
            </div>
        </div>

        <!-- Awaiting Feedback -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-warning fw-bold">
                        <h5 class="mb-0">{{ $task_summary[TASK_STATUS_AWAITING_FEEDBACK] ?? 0 }}</h5>
                    </div>
                    <small class="text-muted d-block">
                        ({{ $total_tasks > 0 ? round(($task_summary[TASK_STATUS_AWAITING_FEEDBACK] ?? 0) * 100 / $total_tasks, 1) : 0 }}%)
                    </small>
                    <span class="fw-bold text-warning mt-2 d-block">Awaiting Feedback</span>
                </div>
            </div>
        </div>

        <!-- Complete -->
        <div class="col-md-2">
            <div class="card shadow-sm border-0 text-center task-card">
                <div class="card-body p-2">
                    <div class="task-title text-success fw-bold">
                        <h5 class="mb-0">{{ $task_summary[TASK_STATUS_COMPLETE] ?? 0 }}</h5>
                    </div>
                    <small class="text-muted d-block">
                        ({{ $total_tasks > 0 ? round(($task_summary[TASK_STATUS_COMPLETE] ?? 0) * 100 / $total_tasks, 1) : 0 }}%)
                    </small>
                    <span class="fw-bold text-success mt-2 d-block">Complete</span>
                </div>
            </div>
        </div>

    </div>


    <hr>

    <div class="card shadow-sm mb-4 border-0">
        <div class="card-body">
            <form method="GET" action="{{ route('task_report') }}" id="filterForm">
                <div class="form-row">
                    <!-- Project List -->
                    <div class="form-group col-md-3">
                        <label><i class="fas fa-project-diagram text-info"></i> Project List</label>
                        {!! form_dropdown(
                            'project_list',
                            $data['project_id_list'],
                            request('project_list', []),
                            "multiple='multiple' class='form-control project-list-select2' id='project_list'"
                        ) !!}
                    </div>

                    <!-- Assigned To -->
                    <div class="form-group col-md-3">
                        <label><i class="fas fa-user text-secondary"></i> Assigned To</label>
                        {!! form_dropdown(
                            'assigned_to',
                            $data['assigned_to_list'],
                            request('assigned_to'),
                            "class='form-control assigned-to-select2' id='assigned_to'"
                        ) !!}
                    </div>

                    <!-- Start Date -->
                    <div class="form-group col-md-2">
                        <label><i class="fas fa-calendar-alt text-success"></i> Start Date</label>
                        <input type="date" name="filter_start_date" value="{{ $data['start_date'] ?? '' }}" class="form-control rounded" />
                    </div>

                    <!-- End Date -->
                    <div class="form-group col-md-2">
                        <label><i class="fas fa-calendar-check text-danger"></i> End Date</label>
                        <input type="date" name="filter_end_date" value="{{ $data['end_date'] ?? '' }}" class="form-control rounded" />
                    </div>

                    <!-- Filter Button -->
                    <div class="form-group col-md-2" style="margin-top: 30px;" >
                        <button type="submit" class="btn btn-primary btn-block rounded" >
                            Apply
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>


    <!-- Task Report Table -->
    <div id="reportTable">
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-striped">

                <thead class="thead-light">
                <tr>
                    <th>
                        <i class="fas fa-project-diagram text-info me-2 icon-animate"></i>
                        <span class="text-info heading">Project Name</span>
                    </th>
                    <th>
                        <i class="bi bi-clipboard-data text-dark me-2 icon-animate"></i>
                        <span class="text-dark heading">Total (%)</span>
                    </th>
                    <th>
                        <i class="bi bi-inbox-fill text-secondary me-2 icon-animate"></i>
                        <span class="text-secondary heading">Back Log (%)</span>
                    </th>
                    <th>
                        <i class="bi bi-hourglass-split text-primary me-2 icon-spin"></i>
                        <span class="text-primary heading">In Progress (%)</span>
                    </th>
                    <th>
                        <i class="bi bi-bug-fill text-info me-2 icon-animate"></i>
                        <span class="text-info heading">Testing (%)</span>
                    </th>
                    <th>
                        <i class="bi bi-chat-left-dots text-warning me-2 icon-animate"></i>
                        <span class="text-warning heading">Awaiting Feedback (%)</span>
                    </th>
                    <th>
                        <i class="bi bi-trophy text-success me-2 icon-animate"></i>
                        <span class="text-success heading">Complete (%)</span>
                    </th>
                </tr>

                </thead>
                <tbody>
                    @foreach($data['project_task_summary'] as $project)
                        @php
                            $total = $project['total'] ?? 0;
                            $rowClass = $loop->iteration % 2 === 0 ? 'table-active' : ''; // Apply background only on even rows
                        @endphp
                        <tr class="{{ $rowClass }}">
                            <td>{{ $project['project_name'] }}</td>
                            <td>
                                {{ $total }}
                                <small class="text-muted">(100%)</small>
                            </td>
                            <td>
                                {{ $project['backlog'] ?? 0 }}
                                <small class="text-muted">({{ $total > 0 ? round(($project['backlog'] ?? 0) * 100 / $total, 1) : 0 }}%)</small>
                            </td>
                            <td>
                                {{ $project['in_progress'] ?? 0 }}
                                <small class="text-muted">({{ $total > 0 ? round(($project['in_progress'] ?? 0) * 100 / $total, 1) : 0 }}%)</small>
                            </td>
                            <td>
                                {{ $project['testing'] ?? 0 }}
                                <small class="text-muted">({{ $total > 0 ? round(($project['testing'] ?? 0) * 100 / $total, 1) : 0 }}%)</small>
                            </td>
                            <td>
                                {{ $project['awaiting_feedback'] ?? 0 }}
                                <small class="text-muted">({{ $total > 0 ? round(($project['awaiting_feedback'] ?? 0) * 100 / $total, 1) : 0 }}%)</small>
                            </td>
                            <td>
                                {{ $project['complete'] ?? 0 }}
                                <small class="text-muted">({{ $total > 0 ? round(($project['complete'] ?? 0) * 100 / $total, 1) : 0 }}%)</small>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

                <tfoot >
                    <tr class="table-success fw-bold">
                        <td>Total</td>
                        <td>
                            {{ $data['project_task_totals']['total'] ?? 0 }}
                            <small class="text-muted">(100%)</small>
                        </td>
                        <td>
                            {{ $data['project_task_totals']['backlog'] ?? 0 }}
                            <small class="text-muted">
                                ({{ $data['project_task_totals']['total'] > 0 ? round(($data['project_task_totals']['backlog'] ?? 0) * 100 / $data['project_task_totals']['total'], 1) : 0 }}%)
                            </small>
                        </td>
                        <td>
                            {{ $data['project_task_totals']['in_progress'] ?? 0 }}
                            <small class="text-muted">
                                ({{ $data['project_task_totals']['total'] > 0 ? round(($data['project_task_totals']['in_progress'] ?? 0) * 100 / $data['project_task_totals']['total'], 1) : 0 }}%)
                            </small>
                        </td>
                        <td>
                            {{ $data['project_task_totals']['testing'] ?? 0 }}
                            <small class="text-muted">
                                ({{ $data['project_task_totals']['total'] > 0 ? round(($data['project_task_totals']['testing'] ?? 0) * 100 / $data['project_task_totals']['total'], 1) : 0 }}%)
                            </small>
                        </td>
                        <td>
                            {{ $data['project_task_totals']['awaiting_feedback'] ?? 0 }}
                            <small class="text-muted">
                                ({{ $data['project_task_totals']['total'] > 0 ? round(($data['project_task_totals']['awaiting_feedback'] ?? 0) * 100 / $data['project_task_totals']['total'], 1) : 0 }}%)
                            </small>
                        </td>
                        <td>
                            {{ $data['project_task_totals']['complete'] ?? 0 }}
                            <small class="text-muted">
                                ({{ $data['project_task_totals']['total'] > 0 ? round(($data['project_task_totals']['complete'] ?? 0) * 100 / $data['project_task_totals']['total'], 1) : 0 }}%)
                            </small>
                        </td>
                    </tr>
                </tfoot>

            </table>
        </div>
    </div>

</div>
@endsection

@section('onPageJs')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Select2 Styles -->
<style>
    .select2-container--default .select2-selection--multiple {
        min-height: 38px;
        border: 1px solid #ced4da;
        padding: 2px 5px;
    }

    .select2-container--default .select2-selection--single {
        min-height: 38px;
        border: 1px solid #ced4da;
        padding: 2px 5px;
    }

    
    .task-card {
        border-radius: 12px;
        transition: 0.3s ease;
    }

    .task-card:hover {
        transform: translateY(-3px);
        background-color: #f8f9fa;
    }

    .task-icon {
        font-size: 1.2rem;
        margin-right: 5px;
        vertical-align: middle;
    }

    .task-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .green-text {
        margin-top: 20px;
        color: green;
    }
    .light-blue-text {
        margin-top: 20px;
        color: #007bff;
    }
    .heading {
        font-weight: 400;
    }
    .admin {
        font-weight: bold;
    }
    

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

    .icon-animate {
        animation: pulse 2s ease-in-out infinite;
        display: inline-block;
    }


    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .icon-spin {
        animation: spin 10s linear infinite;
        display: inline-block;
    }


</style>

<script>

    $(function() {
        $('.assigned-to-select2').select2({
            placeholder: 'Select Member',
            allowClear: true,
            width: '100%'
        });

        $('.project-list-select2').select2({
            placeholder: 'Select Projects',
            allowClear: true,
            width: '100%'
        });
    });

    $('#filterForm').on('submit', function(e) {
        e.preventDefault();

        var formData = {
            project_list: $('#project_list').val(),
            assigned_to: $('#assigned_to').val(),
            filter_start_date: $('input[name="filter_start_date"]').val(),
            filter_end_date: $('input[name="filter_end_date"]').val(),
        };

        $.ajax({
            url: "{{ route('task_report') }}",
            method: "GET",
            data: formData,
            success: function(res) {
                let newContent = $(res.table).find('#reportTable').html();
                if (newContent) {
                    $('#reportTable').html(newContent);
                }
            },
            error: function(xhr) {
                alert('Something went wrong. Open console for error.');
                console.log(xhr.responseText);
            }
        });
    });

</script>
@endsection