@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-4">
        {{-- 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 $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0">New Living Expenses (Bulk)</h4>
                <small class="text-muted">List of all laborers — enter a separate expense for each</small>
            </div>
            <a href="{{ route('labor-living-expences.index') }}" class="btn btn-outline-primary">Back</a>
        </div>

        <form action="{{ route('labor-living-expences.bulkStore') }}" method="POST" novalidate>
            @csrf

            {{-- Quick helpers --}}
            <div class="row g-2 mb-3">
                <div class="col-md-3">
                    <label class="form-label">Default Date</label>
                    <input type="date" id="default-date" class="form-control">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" id="apply-date" class="btn btn-outline-secondary w-100">Apply Date to
                        Empty</button>
                </div>
                <div class="col-md-3 ms-auto d-flex align-items-end justify-content-end gap-2">
                    <button type="button" id="add-row" class="btn btn-outline-success">
                        <i class="fas fa-plus me-1"></i> Add Extra Row
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered align-middle" id="expenses-table">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 260px;">Laborer</th>
                            <th>Description</th>
                            <th style="width: 160px;">Amount</th>
                            <th style="width: 180px;">Date (spent_at)</th>
                            <th style="width: 70px;">—</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Pre-generate one row per laborer --}}
                        @foreach ($laborers as $index => $l)
                            <tr data-index="{{ $index }}">
                                <td>
                                    {{ $l->name }}
                                    <input type="hidden" name="rows[{{ $index }}][laborer_id]"
                                        value="{{ $l->id }}">
                                </td>
                                <td>
                                    <input type="text" name="rows[{{ $index }}][description]" class="form-control"
                                        value="{{ old("rows.$index.description") }}"
                                        placeholder="e.g., Rent, Meal, Transport">
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0"
                                        name="rows[{{ $index }}][amount]" class="form-control amount-field"
                                        value="{{ old("rows.$index.amount") }}">
                                </td>
                                <td>
                                    <input type="date" name="rows[{{ $index }}][spent_at]" class="form-control"
                                        value="{{ old("rows.$index.spent_at") }}">
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-row"
                                        title="Remove row">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="2" class="text-end">Total</th>
                            <th>
                                <input type="text" id="total-amount" class="form-control" value="0.00" readonly>
                            </th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>

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

@section('scripts')
    {{-- Font Awesome (only if not globally included) --}}
    <script src="https://kit.fontawesome.com/a2e0e6ad53.js" crossorigin="anonymous"></script>

    <script>
        (function() {
            const tbody = document.querySelector('#expenses-table tbody');
            const totalField = document.getElementById('total-amount');

            // apply default date to empty date inputs
            document.getElementById('apply-date')?.addEventListener('click', function() {
                const d = document.getElementById('default-date')?.value;
                if (!d) return;
                tbody.querySelectorAll('input[type="date"]').forEach(inp => {
                    if (!inp.value) inp.value = d;
                });
            });

            // calc total
            function recalcTotal() {
                let sum = 0;
                tbody.querySelectorAll('.amount-field').forEach(inp => {
                    const n = parseFloat(inp.value);
                    if (!isNaN(n)) sum += n;
                });
                totalField.value = sum.toFixed(2);
            }
            tbody.addEventListener('input', function(e) {
                if (e.target.classList.contains('amount-field')) recalcTotal();
            });
            window.addEventListener('DOMContentLoaded', recalcTotal);

            // remove row
            tbody.addEventListener('click', function(e) {
                if (e.target.closest('.remove-row')) {
                    const tr = e.target.closest('tr');
                    tr?.remove();
                    recalcTotal();
                }
            });

            // add extra row (choose laborer manually)
            document.getElementById('add-row')?.addEventListener('click', function() {
                const next = Date.now(); // unique index
                const options = `{!! $laborers->map(function ($l) {
                        return '<option value="' . $l->id . '">' . e($l->name) . '</option>';
                    })->implode('') !!}`;

                const tr = document.createElement('tr');
                tr.setAttribute('data-index', next);
                tr.innerHTML = `
        <td>
            <select name="rows[${next}][laborer_id]" class="form-select" required>
                <option value="">-- select --</option>
                ${options}
            </select>
        </td>
        <td><input type="text" name="rows[${next}][description]" class="form-control" placeholder="e.g., Meal, Transport"></td>
        <td><input type="number" step="0.01" min="0" name="rows[${next}][amount]" class="form-control amount-field"></td>
        <td><input type="date" name="rows[${next}][spent_at]" class="form-control"></td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="Remove row">
                <i class="fas fa-times"></i>
            </button>
        </td>
    `;
                tbody.appendChild(tr);
            });
        })();
    </script>
@endsection