{{-- @extends('admin.layout.app')

@section('body')
    <div class="container">
        <div class="card shadow-sm p-4" style="max-width:760px;margin:auto;">
            <h4 class="mb-3"><i class="fas fa-plus me-2"></i>New Timesheet</h4>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('machinery-time-sheets.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <div class="col-md-5">
                        <label class="form-label">Date</label>
                        <input type="date" name="work_date" class="form-control" value="{{ old('work_date') }}" required>
                    </div>
                    <div class="col-md-7">
                        <label class="form-label">Machinery</label>
                        <select name="machinery_id" id="machinerySelect" class="form-select" required>
                            <option value="">-- Select Machinery --</option>
                            @foreach ($machineries as $m)
                                <option value="{{ $m->id }}" data-rate="{{ $m->hourly_rate }}"
                                    @selected(old('machinery_id') == $m->id)>
                                    {{ $m->name ?? '#' . $m->id }} — Rate: {{ number_format($m->hourly_rate, 2) }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Rate will auto-fill from selected machinery.</small>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Hours Worked</label>
                        <input type="number" step="0.01" name="hours_worked" id="hoursInput" class="form-control"
                            value="{{ old('hours_worked') }}" required>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Hourly Rate</label>
                        <input type="number" step="0.01" name="hourly_rate" id="rateInput" class="form-control"
                            value="{{ old('hourly_rate') }}" placeholder="Auto from machinery">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Total (auto)</label>
                        <input type="text" id="totalDisplay" class="form-control" value="0.00" disabled>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-control" rows="3">{{ old('notes') }}</textarea>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <button class="btn btn-primary"><i class="fas fa-save me-2"></i>Save</button>
                    <a href="{{ route('machinery-time-sheets.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        (function() {
            function fmt(n) {
                return (Number(n || 0)).toFixed(2);
            }

            function recalc() {
                const h = parseFloat(document.getElementById('hoursInput').value || 0);
                const r = parseFloat(document.getElementById('rateInput').value || 0);
                document.getElementById('totalDisplay').value = fmt(h * r);
            }
            document.getElementById('machinerySelect').addEventListener('change', function() {
                const rate = this.options[this.selectedIndex]?.getAttribute('data-rate') || '';
                const rateInput = document.getElementById('rateInput');
                if (!rateInput.value) rateInput.value = rate; // only if empty
                recalc();
            });
            document.getElementById('hoursInput').addEventListener('input', recalc);
            document.getElementById('rateInput').addEventListener('input', recalc);
        })();
    </script>
@endsection --}}
@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 Machinery Timesheet (Bulk)</h4>
            <small class="text-muted">Record hours for multiple machines by shift</small>
        </div>
        <a href="{{ route('machinery-time-sheets.index') }}" class="btn btn-outline-primary">Back</a>
    </div>

    <form action="{{ route('machinery-time-sheets.store') }}" 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="machineries-table">
                <thead class="table-light">
                    <tr>
                        <th>Machinery</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 ($machineries as $index => $m)
                        <tr data-index="{{ $index }}">
                            <td>
                                {{ $m->name ?? ('#'.$m->id) }}
                                <input type="hidden" name="timesheets[{{ $index }}][machinery_id]" value="{{ $m->id }}">
                                {{-- Per-row rate payload (safe JSON) --}}
                                <input type="hidden" id="rate-{{ $index }}" value='{{ json_encode(['default' => (float)$m->hourly_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 overtime-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", $m->hourly_rate) }}"
                                       readonly>
                                <small class="text-muted">Auto from machinery</small>
                            </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('machinery-time-sheets.index') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
(function () {
  function toNum(v){ const n = parseFloat(v); return isNaN(n) ? 0 : n; }

  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    = toNum(hoursInput.value);
    const overtime = toNum(overtimeInput.value);
    const rate     = toNum(rateInput.value);
    const total    = (hours * rate) + (overtime * rate);

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

  // listeners
  document.querySelectorAll('.hours-input, .overtime-input').forEach(input => {
    input.addEventListener('input',  function(){ updateTotal(this.dataset.index); });
    input.addEventListener('change', function(){ updateTotal(this.dataset.index); });
  });
  document.querySelectorAll('.hourly-rate').forEach(input => {
    input.addEventListener('input',  function(){ updateTotal(this.dataset.index); });
    input.addEventListener('change', function(){ updateTotal(this.dataset.index); });
  });

  // initial compute
  window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('tr[data-index]').forEach(tr => {
      updateTotal(tr.getAttribute('data-index'));
    });
  });
})();
</script>
@endsection