@extends('layouts.main')
@section('title', 'Weekly Task Report')

@section('content')

<div class="main-content">
<h5 class="mb-3">Weekly Task Report ({{ $startOfWeek->format('d M') }} - {{ $endOfWeek->format('d M, Y') }})</h5>

<div class="table-responsive">
    <table class="table table-bordered table-striped" id="weeklyTaskTable">
        <thead>
            <tr>
                <th>Project</th>
                <th>Task</th>
                <th>Developer Name</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Assigned Hrs</th>
                <th>Actual Work Hrs</th>
                <th>History</th>
            </tr>
        </thead>
        <tbody>
            @foreach($weeklyReport as $row)
                <tr class="{{ ($row->status === 'Complete') ? 'table-success' : '' }}">
                    <td>{{ $row->project }}</td>
                    {{-- <td>{{ $row->task }}</td> --}}
                    <td>
    <a href="{{ route('show_task_page', ['task_id' => $row->task_id]) }}">
        {{ $row->number }}
    </a>
    -
    <small style="font-size: 97% !important;">
        {{ $row->project ?? '-' }}
    </small>
</td>

                    <td>{{ $row->developer_name }}</td>
                    <td>{{ $row->status }}</td>
                    <td>{{ \Carbon\Carbon::parse($row->start_date)->format('d M Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($row->end_date)->format('d M Y') }}</td>
                    <td>{{ $row->assigned_hours }}</td>
                    <td>{{ number_format($row->actual_hours, 2) }}</td>
                    <td>
    @if(true) {{-- check later if you want to conditionally show --}}
        <button class="btn btn-sm btn-outline-info view-history" data-task-id="{{ $row->task_id }}">
            View History
        </button>
    @else
        -
    @endif
</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

</div>

<!-- History Modal -->
<div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Task Due Date History</h5>
            {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Old Due Date</th>
                        <th>New Due Date</th>
                        <th>Reason</th>
                        <th>Changed By</th>
                        <th>Changed At</th>
                    </tr>
                </thead>
                <tbody id="historyTableBody">
                    <tr><td colspan="5" class="text-center">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
  </div>
</div>

@endsection

@section('onPageJs')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


<script>
$(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('#weeklyTaskTable')) {
    @extends('layouts.main')
@section('title', 'Weekly Task Report')

@section('content')

<div class="main-content">
<h5 class="mb-3">Weekly Task Report ({{ $startOfWeek->format('d M') }} - {{ $endOfWeek->format('d M, Y') }})</h5>

<div class="table-responsive">
    <table class="table table-bordered table-striped" id="weeklyTaskTable">
        <thead>
            <tr>
                <th>Project</th>
                <th>Task</th>
                <th>Developer Name</th>
                <th>Status</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Assigned Hrs</th>
                <th>Actual Work Hrs</th>
                <th>History</th>
            </tr>
        </thead>
        <tbody>
            @foreach($weeklyReport as $row)
                <tr class="{{ ($row->status === 'Complete') ? 'table-success' : '' }}">
                    <td>{{ $row->project }}</td>
                   <td>
    <a href="{{ route('show_task_page', ['task_id' => $row->task_id]) }}">
        {{ $row->number }}
    </a>
    -
    <small style="font-size: 97% !important;">
        {{ $row->project ?? '-' }}
    </small>
</td>

                    <td>{{ $row->developer_name }}</td>
                    <td>{{ $row->status }}</td>
                    <td>{{ \Carbon\Carbon::parse($row->start_date)->format('d M Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($row->end_date)->format('d M Y') }}</td>
                    <td>{{ $row->assigned_hours }}</td>
                    <td>{{ number_format($row->actual_hours, 2) }}</td>
                    <td>
                        @if(true) {{-- check later if you want to conditionally show --}}
                            <button class="btn btn-sm btn-outline-info view-history" data-task-id="{{ $row->task_id }}">
                                View History
                            </button>
                        @else
                            -
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

</div>

<!-- History Modal -->
<div class="modal fade" id="historyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Task Due Date History</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Old Due Date</th>
                            <th>New Due Date</th>
                            <th>Reason</th>
                            <th>Changed By</th>
                            <th>Changed At</th>
                        </tr>
                    </thead>
                    <tbody id="historyTableBody">
                        <tr><td colspan="5" class="text-center">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('onPageJs')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


<script>
$(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('#weeklyTaskTable')) {
 $('#weeklyTaskTable').DataTable({
            // UPDATED: Swapped search box and buttons
            dom:
                '<"row align-items-center mb-3"' +
                    '<"col-md-6" <"week-nav"> >' +         // Column for Week Navigation
                    '<"col-md-6 d-flex justify-content-end" fB>' + // Column for Search and Buttons, flex-aligned to the end
                '>' +
                'rtip',                                   // Table, info, pagination

            buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
            pageLength: 15,
            initComplete: function () {
                // This function places the week navigation buttons into our custom 'week-nav' div.
                $('div.week-nav').html(`
                    <a href="{{ route('reports_weekly2', ['week' => $weekOffset - 1]) }}"
                       class="btn btn-sm btn-outline-primary me-2">
                        ← Previous Week
                    </a>
                    <a href="{{ route('reports_weekly2', ['week' => $weekOffset + 1]) }}"
                       class="btn btn-sm btn-outline-primary">
                        Next Week →
                    </a>
                `);

                // NEW: Add margin to the search box container
                $('#weeklyTaskTable_filter').addClass('me-2');
            }
        });
    }


    // Handle History button click
    $(document).on('click', '.view-history', function () {
        let taskId = $(this).data('task-id');
        $('#historyTableBody').html('<tr><td colspan="5" class="text-center">Loading...</td></tr>');
        $('#historyModal').modal('show');

        $.ajax({
            url: "{{ url('/reports/task-history') }}/" + taskId,
            method: "GET",
            success: function (data) {
                if (data.length > 0) {
                    let rows = '';
                    $.each(data, function (i, history) {
                        rows += `
                            <tr>
                                <td>${history.old_due_date ?? '-'}</td>
                                <td>${history.new_due_date ?? '-'}</td>
                                <td>${history.reason ?? '-'}</td>
                                <td>${history.changed_by}</td>
                                <td>${history.changed_at}</td>
                            </tr>`;
                    });
                    $('#historyTableBody').html(rows);
                } else {
                    $('#historyTableBody').html('<tr><td colspan="5" class="text-center">No history found</td></tr>');
                }
            },
            error: function () {
                $('#historyTableBody').html('<tr><td colspan="5" class="text-center text-danger">Error loading history</td></tr>');
            }
        });
    });
});
</script>



@endsection