@extends('layouts.main')
<style>
    .badge-green {
        background-color: #28a745;
        color: white;
    }

    .badge-orange {
        background-color: #fd7e14;
        color: white;
    }

    .badge-red {
        background-color: #dc3545;
        color: white;
    }

    .badge-gray {
        background-color: #6c757d;
        color: white;
    }
</style>

@section('title', __('form.report') . ' - ' . __('Hourly Report'))
@section('content')
    <div class="main-content" style="margin-bottom: 20px !important;">
        <div class="row">
            <div class="col-md-6">
                <h5 class="mb-3">
                    <i class="bi bi-kanban icon-animate" style="color: #6f42c1;"> </i>
                    <span class="heading">Project - Hours Report</span>
                </h5>
            </div>

        </div>
        <hr>


       

       

<div class="card shadow-sm mb-4 border-0">
            <div class="card-body">
      <form method="GET" action="{{ route('projectwiseHoursReport') }}">
    <div class="form-row ">
        {{-- Project Multi-Select --}}
        <div class="form-group col-md-3">
         
            <label for="project_list"><i class="fas fa-project-diagram text-info"></i> Project Name</label>
            <select name="project_list[]" id="project_list" class="form-control select2" multiple>
                @foreach($projectList as $id => $name)
                    <option value="{{ $id }}" 
                        {{ in_array($id, $selected_projects ?? []) ? 'selected' : '' }}>
                        {{ $name }}
                    </option>
                @endforeach
            </select>
        </div>

{{-- Project Category --}}
<div class="form-group col-md-3">
    <label for="project_category"><i class="bi bi-tags-fill text-secondary"></i> Project Category</label>
    <select name="project_category" id="project_category" class="form-control select2">
        <option value="">-- All Categories --</option>
        @foreach($projectCategories as $id => $name)
            <option value="{{ $id }}" {{ ($selected_category ?? '') == $id ? 'selected' : '' }}>
                {{ $name }}
            </option>
        @endforeach
    </select>
</div>


        {{-- Start Date --}}
        <div class="form-group col-md-2">
            {{-- <label for="start_date">Start Date</label> --}}
            <label for="start_date"><i class="fas fa-calendar-alt text-success"></i> Start Date</label>
            <input type="date" name="start_date" id="start_date" 
                   value="{{ $start_date }}" class="form-control">
        </div>

        {{-- End Date --}}
        <div class="form-group col-md-2">
            {{-- <label for="end_date">End Date</label> --}}
             <label for="end_date"><i class="fas fa-calendar-check text-danger"></i> End Date</label>
            <input type="date" name="end_date" id="end_date" 
                   value="{{ $end_date }}" class="form-control">
        </div>

        {{-- Submit --}}
        <div class="form-group col-md-2 d-flex align-items-end">
            <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
        <div class="form-group col-md-2 d-flex align-items-end">
            <a href="{{ route('projectwiseHoursReport') }}" class="btn btn-secondary w-100">Clear</a>
        </div>
        
    </div>
    
</form>
 </div>
  </div>
<div class="card shadow-sm mb-4 border-0">
            <div class="card-body">

  <div class="container">

<div class="table-responsive">
            <table class="table table-bordered table-hover mb-0">
                <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-tags-fill text-secondary me-2 icon-animate"></i>
            <span class="text-secondary heading">Project Category</span>
        </th>
                        <th>
                            <i class="bi bi-hourglass-split text-primary me-2 icon-spin"></i>
                            <span class="text-primary heading">Total Assigned Task Hrs</span>
                        </th>

                        <th>
                            <i class="bi bi-clipboard-data text-dark me-2 icon-animate"></i>
                            <span class="text-dark heading">Total Spent Task Hrs</span>
                        </th>

                       

                         <th>
                        <i class="bi bi-inbox-fill text-secondary me-2 icon-animate"></i>
                        <span class="text-secondary heading">Assigned Hrs (Completed Tasks)</span>
                    </th>

                        <th>
                            <i class="bi bi-chat-left-dots text-warning me-2 icon-animate"></i>
                            <span class="text-warning heading">Spent Hrs (Completed Tasks)</span>
                        </th>
                        {{-- <th>Status</th>  --}}
                         <th>
                                        <i class="bi bi-currency-dollar text-success me-2 icon-animate"></i>
                                        <span class="text-success heading">Total Cost</span>
                         </th>
                    </tr>
                </thead>
                <tbody>
    @foreach ($data['project_data'] as $row)
        @php
            // Condition: if actual > planned → red row, else green row
            $rowColor = $row->actual_hrs > $row->planned_hrs ? '#fff2f3' : '#d4edda'; 
            // You can use Bootstrap alert colors: red-ish (#f8d7da) and green-ish (#d4edda)
        @endphp

        <tr style="background-color: {{ $rowColor }};">
            <td>{{ $row->project_name }}</td>
             <td>{{ $row->category_name ?? '---' }}</td>
            <td>{{ number_format($row->planned_hrs, 2) }}</td>
            <td>{{ number_format($row->actual_hrs, 2) }}</td>
          
            <td>{{ number_format($row->assigned_completed_hrs, 2) }}</td>
            <td>{{ number_format($row->spent_completed_hrs, 2) }}</td>
              <td>{{ number_format($row->total_cost, 2) }}</td>
        </tr>
    @endforeach
</tbody>
 {{-- START: Added Grand Total Footer --}}
                    <tfoot>
                        <tr style="font-weight: bold; background-color: #f8f9fa;">
                            <td colspan="6" style="text-align: right;">Grand Total:</td>
                            <td>{{ number_format($grandTotalCost, 2) }}</td>
                        </tr>
                    </tfoot>
                    {{-- END: Added Grand Total Footer --}}
            </table>
            
<div style="margin-top: 30px; font-size: 14px; border: 1px solid #000;">

    <strong style="padding: 10px;"> Note:</strong>
    <ul>
      
        <li><strong>Total Assigned Task Hrs:</strong> The total estimated hours assigned for all tasks in the project.</li>
        <li><strong>Total Spent Task Hrs:</strong> This is the total actual hours worked on all tasks for that project, based on entries in the time_sheets table. <br>
            <span style="color: green;">Green</span> means spent hours are less than or equal to assigned hours, 
            <br>
            <span style="color: red;">Red</span> means spent hours is more then assigned hours.</li>
        <li><strong>Assigned Hrs (Completed Tasks):</strong> Estimated hours for tasks marked as completed.</li>
        <li><strong>Spent Hrs (Completed Tasks):</strong> Actual hours logged in the time_sheets table for tasks that are completed</li>
    </ul>
</div>
        </div>    
        </div>
    </div>
    </div>
@endsection

@section('onPageJs')
<script>
    $(document).ready(function() {
        $('#project_list').select2({
            placeholder: "Select multiple projects",
            allowClear: true,
            width: '100%'
        });
    });
</script>

    <script>
        $(function() {
            var start = moment();
            var end = moment();

            function cb(start, end) {
                $('#reportrange').val(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    '{{ __('form.today') }}': [moment(), moment()],
                    '{{ __('form.yesterday') }}': [moment().subtract(1, 'days'), moment().subtract(1,
                        'days')],
                    '{{ __('form.this_week') }}': [moment().startOf('isoWeek'), moment().endOf('isoWeek')],
                    '{{ __('form.last_week') }}': [moment().subtract(1, 'week').startOf('isoWeek'),
                    moment().subtract(1, 'week').endOf('isoWeek')],
                    '{{ __('form.this_month') }}': [moment().startOf('month'), moment().endOf('month')],
                    '{{ __('form.last_month') }}': [moment().subtract(1, 'month').startOf('month'),
                    moment().subtract(1, 'month').endOf('month')]
                },
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, cb);

            cb(start, end);
        });
    </script>
@endsection