@extends('layouts.app')

@section('title', 'Timesheets')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h4 mb-0 text-dark fw-bold">Timesheets</h2>
    <div>
        <button type="button" class="btn btn-outline-primary px-4 shadow-sm fw-bold me-2 d-none" id="btnCreateInvoice">
            <i class="fas fa-file-invoice me-2"></i> Create Invoice (<span id="selectedCount">0</span>)
        </button>
        <a href="{{ route('timesheets.create') }}" class="btn btn-primary px-4 shadow-sm fw-bold">
            <i class="fas fa-plus me-2"></i> Add Time Entry
        </a>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 position-relative">
    <div class="card-body p-0">
        <!-- Floating Summary Bar -->
        <div id="selectionSummary" class="bg-primary text-white p-3 rounded-top d-none position-absolute top-0 start-0 end-0 z-3 shadow" style="transform: translateY(-100%);">
            <div class="d-flex justify-content-between align-items-center px-3">
                <div class="small fw-bold">
                    <span id="txtSelectedCount">0</span> Entries Selected 
                    <span class="mx-2">|</span> 
                    Total Hours: <span id="txtTotalHours">0.00</span>
                    <span class="mx-2">|</span> 
                    Est. Amount: {{ getCurrencySymbol() }}<span id="txtTotalAmount">0.00</span>
                </div>
                <form action="{{ route('timesheets.convert') }}" method="POST" id="convertForm">
                    @csrf
                    <div id="selectedIdsContainer"></div>
                    <button type="submit" class="btn btn-sm btn-light fw-bold px-4 rounded-pill">Generate Invoice</button>
                    <button type="button" class="btn btn-sm btn-link text-white text-decoration-none ms-2" id="btnClearSelection">Clear</button>
                </form>
            </div>
        </div>

        <div class="p-4 border-bottom">
            <!-- Filter form remains same -->
            <form action="{{ route('timesheets.index') }}" method="GET" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label small text-muted fw-bold text-uppercase">Project</label>
                    <select name="project_id" class="form-select" onchange="this.form.submit()">
                        <option value="">All Projects</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>{{ $project->name }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- ... other filters ... -->
                <div class="col-md-3">
                    <label class="form-label small text-muted fw-bold text-uppercase">User</label>
                    <select name="user_id" class="form-select" onchange="this.form.submit()">
                        <option value="">All Users</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted fw-bold text-uppercase">From</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" onchange="this.form.submit()">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted fw-bold text-uppercase">To</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" onchange="this.form.submit()">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted fw-bold text-uppercase">Status</label>
                    <select name="status" class="form-select" onchange="this.form.submit()">
                        <option value="">All Status</option>
                        <option value="unbilled" {{ request('status') == 'unbilled' ? 'selected' : '' }}>Unbilled</option>
                        <option value="billed" {{ request('status') == 'billed' ? 'selected' : '' }}>Billed</option>
                    </select>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead class="bg-light text-muted small text-uppercase fw-bold">
                    <tr>
                        <th class="ps-4" style="width: 40px">
                            <input type="checkbox" class="form-check-input" id="checkAll">
                        </th>
                        <th>Date</th>
                        <th>User</th>
                        <th>Project</th>
                        <th>Task</th>
                        <th class="text-center">Hours</th>
                        <th class="text-center">Status</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($timesheets as $timesheet)
                    <tr class="timesheet-row" data-hours="{{ $timesheet->hours }}" data-rate="{{ $timesheet->project->rate ?? 0 }}" data-status="{{ $timesheet->status }}">
                        <td class="ps-4">
                            @if($timesheet->status == 'unbilled')
                                <input type="checkbox" class="form-check-input timesheet-check" value="{{ $timesheet->id }}">
                            @endif
                        </td>
                        <td class="fw-bold text-dark">{{ \Carbon\Carbon::parse($timesheet->date)->format('d M Y') }}</td>
                        <td>{{ optional($timesheet->user)->name ?? 'Unknown User' }}</td>
                        <td>{{ optional($timesheet->project)->name ?? 'No Project' }}</td>
                        <td>{{ optional($timesheet->task)->name ?? 'No Task' }}</td>
                        <td class="text-center fw-bold text-primary">{{ number_format($timesheet->hours, 2) }}</td>
                        <td class="text-center">
                            @php
                                $statusColors = [
                                    'unbilled' => 'bg-warning text-dark',
                                    'billed' => 'bg-success',
                                ];
                            @endphp
                            <span class="badge {{ $statusColors[$timesheet->status] ?? 'bg-secondary' }} rounded-pill px-3">
                                {{ ucfirst($timesheet->status) }}
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group shadow-sm rounded-pill overflow-hidden bg-white border">
                                <a href="{{ route('timesheets.edit', $timesheet) }}" class="btn btn-white btn-sm px-3 border-end {{ $timesheet->status == 'billed' ? 'disabled' : '' }}" title="Edit"><i class="fas fa-edit text-secondary"></i></a>
                                <form action="{{ route('timesheets.destroy', $timesheet) }}" method="POST" onsubmit="return confirm('Delete this time entry?');" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-white btn-sm px-3 text-danger" {{ $timesheet->status == 'billed' ? 'disabled' : '' }}><i class="fas fa-trash-alt"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <!-- ... empty table remains same ... -->
                     <tr>
                        <td colspan="8" class="text-center py-5 text-muted">
                            <i class="fas fa-clock fa-3x mb-3 opacity-25"></i>
                            <p class="mb-0">No time entries found.</p>
                            <a href="{{ route('timesheets.create') }}" class="btn btn-sm btn-link text-primary mt-2">Add Time Entry</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4 border-top">
            {{ $timesheets->links() }}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkAll = document.getElementById('checkAll');
    const checks = document.querySelectorAll('.timesheet-check');
    const summaryBar = document.getElementById('selectionSummary');
    const txtCount = document.getElementById('txtSelectedCount');
    const txtHours = document.getElementById('txtTotalHours');
    const txtAmount = document.getElementById('txtTotalAmount');
    const idsContainer = document.getElementById('selectedIdsContainer');

    function updateSummary() {
        let totalHours = 0;
        let totalAmount = 0;
        let count = 0;
        idsContainer.innerHTML = '';

        checks.forEach(check => {
            if (check.checked) {
                const row = check.closest('.timesheet-row');
                totalHours += parseFloat(row.dataset.hours);
                totalAmount += parseFloat(row.dataset.hours) * parseFloat(row.dataset.rate);
                count++;

                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'timesheet_ids[]';
                input.value = check.value;
                idsContainer.appendChild(input);
            }
        });

        if (count > 0) {
            summaryBar.classList.remove('d-none');
            txtCount.textContent = count;
            txtHours.textContent = totalHours.toFixed(2);
            txtAmount.textContent = totalAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        } else {
            summaryBar.classList.add('d-none');
        }
    }

    checkAll.addEventListener('change', function() {
        checks.forEach(check => check.checked = this.checked);
        updateSummary();
    });

    checks.forEach(check => {
        check.addEventListener('change', updateSummary);
    });

    document.getElementById('btnClearSelection').addEventListener('click', function() {
        checks.forEach(check => check.checked = false);
        checkAll.checked = false;
        updateSummary();
    });
});
</script>
@endsection