@extends('layouts.teamlead')

@section('title', 'Додати баланс')

@push('head')
    <link rel="stylesheet" href="{{ mix('css/teamlead/balance-form.css') }}">
@endpush

@section('content')
    <div class="balance-form-page">

        {{-- Шапка --}}
        <div class="page-head mb-3">
            <h3>Додати баланс</h3>
            <a href="{{ route('teamlead.balances.index') }}" class="btn btn-link">← До списку</a>
        </div>

        {{-- Помилки валідації --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                @foreach ($errors->all() as $e) <div>{{ $e }}</div> @endforeach
            </div>
        @endif

        <div class="card card-slim" style="max-width:900px;">
            <div class="card-body">
                <form method="POST" action="{{ route('teamlead.balances.store') }}">
                    @csrf

                    {{-- Блок 1: Основне --}}
                    <div class="form-section-title">Основне</div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Кабінет</label>
                            <select name="cabinet_id" id="cabinet_id" class="form-control" required>
                                @foreach($myCabinets as $cab)
                                    <option value="{{ $cab->id }}"
                                            data-day="{{ $cab->day_operator }}"
                                            data-evening="{{ $cab->evening_operator }}"
                                            data-night="{{ $cab->night_operator }}"
                                        {{ (int)old('cabinet_id', $cabinetId) === (int)$cab->id ? 'selected' : '' }}>
                                        {{ $cab->slug }} — {{ $cab->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('cabinet_id') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group col-md-3">
                            <label>Дата</label>
                            <input type="date"
                                   name="work_date"
                                   value="{{ old('work_date', $workDate) }}"
                                   class="form-control"
                                   required>
                            <div class="form-note">Дата, за яку вноситься баланс</div>
                            @error('work_date') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group col-md-3">
                            <label>Зміна</label>
                            <select name="shift" id="shift" class="form-control" required>
                                <option value="day"     {{ old('shift', $shift) === 'day' ? 'selected' : '' }}>денна</option>
                                <option value="evening" {{ old('shift', $shift) === 'evening' ? 'selected' : '' }}>вечірня</option>
                                <option value="night"   {{ old('shift', $shift) === 'night' ? 'selected' : '' }}>нічна</option>
                            </select>
                            @error('shift') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    {{-- Блок 2: Оператор --}}
                    <div class="form-section-title">Оператор</div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Оператор (автоматично)</label>
                            <input type="text"
                                   id="operator_name"
                                   class="form-control"
                                   value="{{ $operatorName }}"
                                   readonly>
                            <div class="form-note">Ім’я підтягується за вибраним кабінетом та зміною.</div>
                        </div>
                    </div>

                    {{-- Блок 3: Сума --}}
                    <div class="form-section-title">Сума</div>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label>Сума</label>
                            <input type="number"
                                   step="0.01"
                                   name="amount"
                                   class="form-control input-amount"
                                   value="{{ old('amount') }}"
                                   placeholder="0.00"
                                   required>
                            @error('amount') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    {{-- Дії --}}
                    <div class="btn-row mt-2">
                        <button class="btn btn-primary">Зберегти</button>
                        <a href="{{ route('teamlead.balances.index') }}" class="btn btn-light">Скасувати</a>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection

@push('body')
    <script>
        (function () {
            function updateOperator() {
                const cabinetSelect = document.getElementById('cabinet_id');
                const shiftSelect   = document.getElementById('shift');
                const opInput       = document.getElementById('operator_name');

                const opt   = cabinetSelect.options[cabinetSelect.selectedIndex];
                const shift = shiftSelect.value;

                let name = '';
                if (opt) {
                    if (shift === 'day')     name = opt.getAttribute('data-day')     || '';
                    if (shift === 'evening') name = opt.getAttribute('data-evening') || '';
                    if (shift === 'night')   name = opt.getAttribute('data-night')   || '';
                }
                opInput.value = name || '';
            }

            document.getElementById('cabinet_id').addEventListener('change', updateOperator);
            document.getElementById('shift').addEventListener('change', updateOperator);
            updateOperator(); // ініціалізація
        })();
    </script>
@endpush