@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-4">
        {{-- Flash alerts --}}
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Validation summary --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>There were some problems with your input:</strong>
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0">New Timesheet Entry</h4>
                <small class="text-muted">Record hours for one or more laborers by shift</small>
            </div>
            <a href="{{ route('timesheets.index') }}" class="btn btn-outline-primary">Back</a>
        </div>

        <form action="{{ route('timesheets.bulkStore') }}" method="POST" novalidate>
            @csrf

            <!-- Shift + Date/Time -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <label class="form-label">Select Shift <span class="text-danger">*</span></label>
                    <select name="shift" id="shift-selector" class="form-select @error('shift') is-invalid @enderror"
                        required>
                        <option value="">-- Select Shift --</option>
                        <option value="daily" {{ old('shift') === 'daily' ? 'selected' : '' }}>Daily</option>
                        <option value="night" {{ old('shift') === 'night' ? 'selected' : '' }}>Night</option>

                    </select>
                    @error('shift')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label">Date & Time <span class="text-danger">*</span></label>
                    <input type="datetime-local" name="entry_datetime"
                        class="form-control @error('entry_datetime') is-invalid @enderror"
                        value="{{ old('entry_datetime') }}" required>
                    @error('entry_datetime')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered align-middle" id="laborers-table">
                    <thead class="table-light">
                        <tr>
                            <th>Laborer</th>
                            <th style="width: 160px;">Hours Worked</th>
                            <th style="width: 160px;">Overtime Hours</th>
                            <th style="width: 160px;">Hourly Rate</th>
                            <th style="width: 160px;">Total</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($laborers as $index => $l)
                            <tr data-index="{{ $index }}">
                                <td>
                                    {{ $l->name }}
                                    <input type="hidden" name="timesheets[{{ $index }}][laborer_id]"
                                        value="{{ $l->id }}">
                                    {{-- Per-row shift rates payload (safe JSON) --}}
                                    <input type="hidden" id="rates-{{ $index }}"
                                        value='{{ json_encode([
                                            'daily' => (float) $l->daily_rate,
                                            'night' => (float) $l->night_rate,

                                        ]) }}'>
                                </td>
                                <td>
                                    <input type="number" name="timesheets[{{ $index }}][hours_worked]"
                                        step="0.01" min="0" class="form-control hours-input"
                                        data-index="{{ $index }}"
                                        value="{{ old("timesheets.$index.hours_worked") }}">
                                </td>
                                 <td>
                                    <input type="number" name="timesheets[{{ $index }}][overtime_hours]"
                                        step="0.01" min="0" class="form-control hours-input"
                                        data-index="{{ $index }}"
                                        value="{{ old("timesheets.$index.overtime_hours") }}">
                                </td>
                                <td>
                                    <input type="number" name="timesheets[{{ $index }}][hourly_rate]"
                                        step="0.01" min="0" class="form-control hourly-rate"
                                        data-index="{{ $index }}"
                                        value="{{ old("timesheets.$index.hourly_rate", $l->hourly_wage) }}" readonly>
                                </td>
                                <td>
                                    <input type="number" name="timesheets[{{ $index }}][total]" step="0.01"
                                        min="0" class="form-control total-field" data-index="{{ $index }}"
                                        value="{{ old("timesheets.$index.total") }}" readonly>
                                </td>
                                <td>
                                    <input type="text" name="timesheets[{{ $index }}][notes]"
                                        class="form-control" value="{{ old("timesheets.$index.notes") }}">
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4">
                <button class="btn btn-primary">
                    <i class="fas fa-save me-2"></i> Save Timesheets
                </button>
                <a href="{{ route('timesheets.index') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
   <script>
(function () {
  // Recalculate total for a single row
  function updateTotal(index) {
    const hoursInput = document.querySelector(`[name="timesheets[${index}][hours_worked]"]`);
    const overtimeInput = document.querySelector(`[name="timesheets[${index}][overtime_hours]"]`);
    const rateInput  = document.querySelector(`[name="timesheets[${index}][hourly_rate]"]`);
    const totalInput = document.querySelector(`[name="timesheets[${index}][total]"]`);
    if (!hoursInput || !overtimeInput || !rateInput || !totalInput) return;

    const hours = parseFloat(hoursInput.value);
    const overtime = parseFloat(overtimeInput.value);
    const rate  = parseFloat(rateInput.value);
    const total = (isNaN(hours) ? 0 : hours) * (isNaN(rate) ? 0 : rate) + (isNaN(overtime) ? 0 : overtime) * (isNaN(rate) ? 0 : rate);

    totalInput.value = total.toFixed(2);
  }

  // Wire up events for hours and (optionally) rate fields
  document.querySelectorAll('.hours-input').forEach(input => {
    input.addEventListener('input',  function () { updateTotal(this.dataset.index); });
    input.addEventListener('change', function () { updateTotal(this.dataset.index); });
  });

  // If hourly_rate might change (even if readonly now), keep listeners
  document.querySelectorAll('.hourly-rate').forEach(input => {
    input.addEventListener('input',  function () { updateTotal(this.dataset.index); });
    input.addEventListener('change', function () { updateTotal(this.dataset.index); });
  });

  // Initial compute on page load (e.g., after validation errors)
  window.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('tr[data-index]').forEach(tr => {
      const idx = tr.getAttribute('data-index');
      updateTotal(idx);
    });
  });
})();
</script>

@endsection