@extends('Admin.layout')

@section('content')

<div class="container-fluid">

<div class="card">

    <div class="card-header">
        <h5 class="mb-0">
            Project: {{ $project }}
        </h5>
    </div>

    <div class="card-body">

        <table class="table table-bordered table-hover">

            <thead>
                <tr>
                    <th style="width: 80px;">S.No</th>
                    <th>Staff</th>
                    <th>Total Expense</th>
                    <th style="width: 120px;">Action</th>
                </tr>
            </thead>

            <tbody id="staffBody">

                <tr>
                    <td colspan="4" class="text-center">
                        Loading...
                    </td>
                </tr>

            </tbody>

        </table>

    </div>

</div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

$(document).ready(function () {

    let project = @json($project);

    let encodedProject = encodeURIComponent(project);

    let baseUrl = @json(url('/'));

    $.ajax({

        url: baseUrl + '/admin/project-details-data/' + encodedProject,

        type: 'GET',

        success: function (res) {

            console.log('Project expense response:', res);

            let data = res.data || [];

            /*
            |--------------------------------------------------------------------------
            | No data
            |--------------------------------------------------------------------------
            */

            if (data.length === 0) {

                $('#staffBody').html(`
                    <tr>
                        <td colspan="4"
                            class="text-center text-muted">

                            No expense details found for this project.

                        </td>
                    </tr>
                `);

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | GROUP DATA BY STAFF
            |--------------------------------------------------------------------------
            */

            let staffGroups = {};


            data.forEach(function (row) {

                let staffId = row.staff_id || row.staff_name;

                let staffName =
                    row.staff_name || 'Unknown Staff';


                /*
                | Create staff group
                */

                if (!staffGroups[staffId]) {

                    staffGroups[staffId] = {

                        staff_id: staffId,

                        staff_name: staffName,

                        total_expense: 0,

                        records: []

                    };

                }


                /*
                | Add expense
                */

                let expense =
                    parseFloat(row.expense) || 0;


                staffGroups[staffId].total_expense += expense;


                /*
                | Store individual record
                */

                staffGroups[staffId].records.push(row);

            });


            /*
            |--------------------------------------------------------------------------
            | Convert object to array
            |--------------------------------------------------------------------------
            */

            let staffList =
                Object.values(staffGroups);


            /*
            |--------------------------------------------------------------------------
            | Create table
            |--------------------------------------------------------------------------
            */

            let html = '';

            staffList.forEach(function (staff, index) {

                html += `

                    <tr>

                        <td>
                            ${index + 1}
                        </td>

                        <td>
                            <strong>
                                ${escapeHtml(staff.staff_name)}
                            </strong>
                        </td>

                        <td>
                            ₹${staff.total_expense.toFixed(2)}
                        </td>

                        <td>

                            <button
                                type="button"
                                class="btn btn-sm btn-primary viewStaff"
                                data-staff-id="${escapeHtml(staff.staff_id)}"
                            >
                                View
                            </button>

                        </td>

                    </tr>

                `;

            });


            /*
            |--------------------------------------------------------------------------
            | Total project expense
            |--------------------------------------------------------------------------
            */

            let projectTotal = 0;

            staffList.forEach(function (staff) {

                projectTotal +=
                    staff.total_expense;

            });


            html += `

                <tr class="table-light">

                    <td colspan="2">

                        <strong>
                            Total Project Expense
                        </strong>

                    </td>

                    <td>

                        <strong>
                            ₹${projectTotal.toFixed(2)}
                        </strong>

                    </td>

                    <td></td>

                </tr>

            `;


            $('#staffBody').html(html);


            /*
            |--------------------------------------------------------------------------
            | VIEW STAFF
            |--------------------------------------------------------------------------
            */

            $('.viewStaff').on('click', function () {

                let staffId =
                    $(this).data('staff-id');


                /*
                | Find selected staff
                */

                let selectedStaff =
                    staffList.find(function (staff) {

                        return String(staff.staff_id)
                            === String(staffId);

                    });


                if (!selectedStaff) {
                    return;
                }


                /*
                | Store data temporarily
                */

                sessionStorage.setItem(

                    'project_staff_details',

                    JSON.stringify({

                        project: project,

                        staff: selectedStaff

                    })

                );


                /*
                | Open staff details page
                */

                let url =
                    baseUrl
                    + '/admin/project-staff-detail/'
                    + encodeURIComponent(project)
                    + '/'
                    + encodeURIComponent(staffId);


                window.location.href = url;

            });

        },


        error: function (xhr) {

            console.log(
                'Project expense error:',
                xhr.responseText
            );


            $('#staffBody').html(`

                <tr>

                    <td colspan="4"
                        class="text-center text-danger">

                        Failed to load project details.

                    </td>

                </tr>

            `);

        }

    });


    /*
    |--------------------------------------------------------------------------
    | HTML ESCAPE
    |--------------------------------------------------------------------------
    */

    function escapeHtml(value) {

        return $('<div>')
            .text(value ?? '')
            .html();

    }

});

</script>

@endsection