{{-- @extends('layouts.main')

@section('content')
    <div class="container">
        <div class="row mb-3">
            <div class="col">
                <h4 class="page-title">Developer Timesheet Report</h4>
            </div>
        </div>

        <form method="GET" action="{{ route('report.developer_timesheet') }}" class="mb-4">

            <div class="form-row">
                <div class="col-md-3">
                    <label>Member Name</label>
                    <select name="user_id" class="form-control">
                        <option value="">-- All Members --</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->first_name }} {{ $user->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label>Start Date</label>
                    <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                </div>
                <div class="col-md-3">
                    <label>End Date</label>
                    <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                </div>
                <div class="col-md-3 align-self-end">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('report.developer_timesheet') }}" class="btn btn-light">Reset</a>
                </div>
            </div>
        </form>


        @if (request('start_date') && request('end_date'))
            <div class="card shadow-sm rounded">
                <div class="card-body p-3">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>Member Name</th>
                                    <th>Total Hours Spent</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $row)
                                    <tr>
                                        <td>{{ $row->member_name }}</td>
                                        <td>{{ number_format($row->total_hours, 2) }} hrs</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="2" class="text-center text-muted">
                                            No data found for selected dates.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @else
            <div class="alert alert-info">
                Please select a <strong>Start Date</strong> and <strong>End Date</strong> to view the report.
            </div>
        @endif
    </div>
@endsection --}}




@extends('layouts.main')

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

         



        </div>


        @php
            $startDate = request('start_date') ?? now()->startOfMonth()->format('Y-m-d');
            $endDate = request('end_date') ?? now()->endOfMonth()->format('Y-m-d');
        @endphp
        <form method="GET" action="{{ route('report.developer_timesheet') }}" class="mb-4">
            <div class="form-row">
                <div class="col-md-3">
                      <label><i class="fas fa-project-diagram text-info"></i> Member Name</label>
                    <select name="user_id" class="form-control">
                        <option value="">-- All Members --</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->first_name }} {{ $user->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                     <label><i class="fas fa-calendar-alt text-success"></i> Start Date</label>
                    <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
                </div>
                <div class="col-md-3">
                    <label><i class="fas fa-calendar-check text-danger"></i> End Date</label>
                    <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
                </div>
                <div class="col-md-3 align-self-end">
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <a href="{{ route('report.developer_timesheet') }}" class="btn btn-light">Reset</a>
                </div>
            </div>
        </form>

        @if (request('start_date') && request('end_date'))
            <div class="card shadow-sm rounded">
                <div class="card-body p-3">
                    <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">Member Name</span>
                                    </th>
                                    <th>
                                        <i class="bi bi-hourglass-split text-primary me-2 icon-spin"></i>
                                        <span class="text-primary heading">Actual Working Hrs</span>
                                    </th>
                                    <th>
                                        <i class="bi bi-trophy text-success me-2 icon-animate"></i>
                                        <span class="text-success heading">Total Hours Spent</span>
                                    </th>
                                    <th class="text-danger">
                                        <i class="bi bi-flag text-danger me-2"></i>
                                        Flag
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $row)
                                    <tr>
                                        <td>{{ $row->member_name }}</td>

                                        {{-- <td>{{ $row->actual_hours }} hrs</td>
                                        <td>{{ number_format($row->total_hours, 2) }} hrs</td> --}}

                                        <td>{{ $row->actual_hours }} hrs ({{ $row->actual_hours_percent }}%)</td>
            <td>{{ number_format($row->total_hours, 2) }} hrs ({{ $row->total_hours_percent }}%)</td>
                                        <td>
                                            <span class="badge badge-{{ $row->flag == 'green' ? 'success' : 'danger' }}">
                                                {{ ucfirst($row->flag) }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            No data found for selected dates.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @else
            <div class="alert alert-info">
                Please select a <strong>Start Date</strong> and <strong>End Date</strong> to view the report.
            </div>
        @endif
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const url = new URL(window.location.href);
            const startDateParam = url.searchParams.get('start_date');
            const endDateParam = url.searchParams.get('end_date');

            if (!startDateParam && !endDateParam) {
                const today = new Date();
                const year = today.getFullYear();
                const month = today.getMonth(); // 0-based index

                // First day of current month
                const firstDay = new Date(year, month, 1);
                // Last day of current month
                const lastDay = new Date(year, month + 1, 0);

                // Format to YYYY-MM-DD using local timezone
                const formatDate = (date) => date.toLocaleDateString('en-CA'); // YYYY-MM-DD

                url.searchParams.set('start_date', formatDate(firstDay));
                url.searchParams.set('end_date', formatDate(lastDay));

                // Redirect with dates applied to URL
                window.location.href = url.toString();
            }
        });
    </script>

@endsection