@extends('layouts.app', ['title' => 'Wochenplan KW ' . $kw . ' / ' . $year])

@section('content')
<div class="container-fluid px-3 py-3">

    {{-- Header --}}
    <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
        <h5 class="mb-0 fw-bold">
            <i class="bi bi-calendar-week text-primary"></i>
            Wochenplan &nbsp;<span class="badge bg-primary">KW {{ $kw }} / {{ $year }}</span>
        </h5>
        <div class="d-flex gap-1 ms-2">
            <a href="{{ route('einsatz.week', ['year' => $prevKw->year, 'kw' => $prevKw->isoWeek]) }}"
               class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-chevron-left"></i>
            </a>
            <a href="{{ route('einsatz.index') }}" class="btn btn-sm btn-outline-secondary">Heute</a>
            <a href="{{ route('einsatz.week', ['year' => $nextKw->year, 'kw' => $nextKw->isoWeek]) }}"
               class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-chevron-right"></i>
            </a>
        </div>
        <div class="d-flex gap-2 ms-auto">
            @if(Auth::user()->hasAnyRole(['hrm','sysadmin']))
            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#farbenModal">
                <i class="bi bi-palette"></i> Farben
            </button>
            @endif
            <a href="{{ route('einsatz.pdf', ['year' => $year, 'kw' => $kw]) }}"
               class="btn btn-sm btn-danger">
                <i class="bi bi-file-earmark-pdf"></i> A3 PDF
            </a>
        </div>
    </div>

    {{-- Conflict alerts (filled by JS) --}}
    <div id="conflict-zone"></div>

    {{-- Grid --}}
    <div class="table-responsive">
        <table class="table table-bordered table-sm einsatz-table align-middle" style="min-width:1100px;">
            <thead class="table-dark">
                <tr>
                    <th style="width:130px; min-width:130px;">Mitarbeiter</th>
                    @foreach($days as $day)
                    <th class="text-center {{ $day->isToday() ? 'bg-primary text-white' : '' }}" style="width:16%;">
                        <div class="fw-bold">{{ ['Mo','Di','Mi','Do','Fr','Sa'][$loop->index] }}</div>
                        <div class="small">{{ $day->format('d.m.') }}</div>
                    </th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($employees as $emp)
                <tr>
                    <td class="fw-semibold small text-nowrap bg-light">
                        {{ $emp->last_name }}<br>
                        <span class="text-muted fw-normal">{{ $emp->first_name }}</span>
                    </td>
                    @foreach($days as $day)
                    @php
                        $key        = $emp->employee_id . '_' . $day->toDateString();
                        $dayEntries = $entries->get($key, collect());
                    @endphp
                    <td class="einsatz-cell p-1"
                        data-employee="{{ $emp->employee_id }}"
                        data-date="{{ $day->toDateString() }}"
                        style="vertical-align: top; min-height: 70px;">

                        <div class="einsatz-drop-zone" data-employee="{{ $emp->employee_id }}" data-date="{{ $day->toDateString() }}" data-sortable="{{ Auth::user()->get_employee->is_hrm ? '1' : '0' }}">
                            @foreach($dayEntries as $entry)
                            <div class="einsatz-card mb-1"
                                 data-id="{{ $entry->id }}"
                                 data-order-id="{{ $entry->fk_order_id }}"
                                 style="background: {{ $entry->color_hex ?? '#6c757d' }}22; border-left: 3px solid {{ $entry->color_hex ?? '#6c757d' }}; border-radius: 4px; padding: 4px 6px; cursor: grab; font-size: .78rem;">
                                <div class="d-flex justify-content-between align-items-start gap-1">
                                    <div style="flex:1; min-width:0;">
                                        @if($entry->order)
                                        <div class="fw-semibold text-truncate" style="color:#111;" title="{{ $entry->order->order_nr }} {{ $entry->order->title }}">
                                            <i class="bi bi-geo-alt-fill" style="font-size:.7rem;"></i>
                                            <span style="opacity:.75;">{{ $entry->order->order_nr }}</span> {{ $entry->order->title }}
                                        </div>
                                        @endif
                                        @if($entry->vehicle)
                                        <div class="text-muted text-truncate">
                                            <i class="bi bi-truck" style="font-size:.7rem;"></i>
                                            {{ $entry->vehicle->name }}{{ $entry->vehicle->license_plate ? ' ('.$entry->vehicle->license_plate.')' : '' }}
                                        </div>
                                        @endif
                                        @if($entry->aufgabe)
                                        <div class="text-muted text-truncate" title="{{ $entry->aufgabe }}">
                                            <i class="bi bi-card-text" style="font-size:.7rem;"></i>
                                            {{ $entry->aufgabe }}
                                        </div>
                                        @endif
                                    </div>
                                    @if(Auth::user()->get_employee->is_hrm)
                                    <div class="d-flex flex-column gap-1" style="flex-shrink:0;">
                                        <button class="btn btn-link p-0 btn-edit-entry"
                                                data-id="{{ $entry->id }}"
                                                data-employee="{{ $entry->fk_employee_id }}"
                                                data-date="{{ $entry->entry_date }}"
                                                data-order="{{ $entry->fk_order_id ?? '' }}"
                                                data-vehicle="{{ $entry->fk_vehicle_id ?? '' }}"
                                                data-aufgabe="{{ $entry->aufgabe ?? '' }}"
                                                style="font-size:.7rem; line-height:1; color:#555;">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-link p-0 btn-delete-entry"
                                                data-id="{{ $entry->id }}"
                                                style="font-size:.7rem; line-height:1; color:#dc3545;">
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>

                        @if(Auth::user()->get_employee->is_hrm)
                        <button class="btn btn-sm btn-add-entry w-100 mt-1"
                                data-employee="{{ $emp->employee_id }}"
                                data-date="{{ $day->toDateString() }}"
                                style="font-size:.7rem; border: 1px dashed #adb5bd; background: transparent; color: #6c757d; padding: 2px;">
                            <i class="bi bi-plus"></i>
                        </button>
                        @endif
                    </td>
                    @endforeach
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Farblegende --}}
    @php
        $legend = $entries->flatten()
            ->whereNotNull('fk_order_id')
            ->unique('fk_order_id')
            ->filter(fn($e) => $e->order)
            ->sortBy(fn($e) => $e->order->order_nr)
            ->values();
    @endphp
    @if($legend->count())
    <div class="mt-2 d-flex flex-wrap gap-2">
        @foreach($legend as $e)
        <span class="legend-badge" data-order-id="{{ $e->fk_order_id }}"
              style="font-size:.72rem; background:{{ $e->color_hex }}22; border-left:3px solid {{ $e->color_hex }}; border-radius:3px; padding:2px 8px; color:#333;">
            <span style="color:#111; font-weight:600;">{{ $e->order->order_nr }}</span>
            {{ $e->order->title }}
        </span>
        @endforeach
    </div>
    @endif
</div>

{{-- Modal: Auftragsfarben --}}
@if(Auth::user()->hasAnyRole(['hrm','sysadmin']))
<div class="modal fade" id="farbenModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-palette"></i> Auftragsfarben</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-3">Farbe je Auftrag festlegen. Die Änderung gilt sofort für alle Einträge dieser Woche und neue Einträge.</p>
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Auftrag</th>
                                <th style="width:90px;" class="text-center">Farbe</th>
                                <th style="width:50px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $defaultColors = [
                                    '#3b82f6','#f97316','#22c55e','#a855f7','#ec4899',
                                    '#06b6d4','#eab308','#ef4444','#14b8a6','#8b5cf6',
                                    '#84cc16','#f43f5e','#0ea5e9','#d97706','#6366f1',
                                ];
                            @endphp
                            @foreach($orders as $o)
                            @php
                                $currentColor = $o->color_hex ?? $defaultColors[$o->id % count($defaultColors)];
                            @endphp
                            <tr id="farbe-row-{{ $o->id }}">
                                <td>
                                    <span class="badge rounded-pill"
                                          style="background:{{ $currentColor }}22; color:#111; border:1px solid {{ $currentColor }}; font-size:.75rem;">
                                        {{ $o->order_nr }} {{ $o->title }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <input type="color"
                                           class="form-control form-control-color border-0 p-0 mx-auto farbe-picker"
                                           value="{{ $currentColor }}"
                                           data-order-id="{{ $o->id }}"
                                           style="width:36px; height:28px; cursor:pointer;">
                                </td>
                                <td class="text-center">
                                    <span class="farbe-status text-success" id="farbe-ok-{{ $o->id }}" style="display:none; font-size:.85rem;">
                                        <i class="bi bi-check-circle-fill"></i>
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Modal: Eintrag anlegen / bearbeiten --}}
<div class="modal fade" id="entryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="entryModalTitle">Eintrag</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="entryForm">
                @csrf
                <input type="hidden" id="entry_id"       name="entry_id"       value="">
                <input type="hidden" id="entry_employee"  name="fk_employee_id" value="">
                <input type="hidden" id="entry_date"      name="entry_date"     value="">

                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Mitarbeiter</label>
                        <div class="form-control-plaintext small border rounded px-2 py-1 bg-light" id="entry_emp_display"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Tag</label>
                        <div class="form-control-plaintext small border rounded px-2 py-1 bg-light" id="entry_date_display"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">Baustelle / Auftrag</label>
                        <select class="form-select form-select-sm" name="fk_order_id" id="entry_order">
                            <option value="">– kein Auftrag –</option>
                            @foreach($orders as $o)
                            <option value="{{ $o->id }}">{{ $o->order_nr }} {{ $o->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold">KFZ / Fahrzeug</label>
                        <select class="form-select form-select-sm" name="fk_vehicle_id" id="entry_vehicle">
                            <option value="">– kein Fahrzeug –</option>
                            @foreach($vehicles as $v)
                            <option value="{{ $v->id }}">{{ $v->name }}{{ $v->license_plate ? ' ('.$v->license_plate.')' : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Aufgabe / Notiz</label>
                        <input type="text" class="form-control form-control-sm" name="aufgabe" id="entry_aufgabe" maxlength="500" placeholder="z.B. Dacharbeiten, Montage...">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-sm btn-primary">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- SortableJS --}}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>

<style>
.einsatz-table td { min-height: 80px; }
.einsatz-card.sortable-ghost  { opacity: .4; }
.einsatz-card.sortable-chosen { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.einsatz-drop-zone { min-height: 30px; }
</style>

<script>
(function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const entryModal = new bootstrap.Modal(document.getElementById('entryModal'));

    const empNames = @json($employees->mapWithKeys(fn($e) => [$e->employee_id => $e->first_name . ' ' . $e->last_name]));

    // ── Drag & Drop (nur is_hrm) ───────────────────────────────
    document.querySelectorAll('.einsatz-drop-zone').forEach(function (zone) {
        const canEdit = zone.dataset.sortable === '1';
        Sortable.create(zone, {
            group: 'einsatz',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            disabled: !canEdit,
            onEnd: function (evt) {
                if (!canEdit) return;
                const card    = evt.item;
                const entryId = card.dataset.id;
                const toZone  = evt.to;
                const newDate = toZone.dataset.date;
                const newEmp  = toZone.dataset.employee;

                if (!entryId) return;

                fetch('{{ route("einsatz.move", ["id" => "__ID__"]) }}'.replace('__ID__', entryId), {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({ entry_date: newDate, fk_employee_id: newEmp })
                })
                .then(r => r.json())
                .then(data => {
                    if (data.conflicts && data.conflicts.length) showConflicts(data.conflicts);
                });
            }
        });
    });

    // ── Add button ─────────────────────────────────────────────
    document.querySelectorAll('.btn-add-entry').forEach(btn => {
        btn.addEventListener('click', function () {
            openModal(null, this.dataset.employee, this.dataset.date);
        });
    });

    // ── Edit button ────────────────────────────────────────────
    document.querySelectorAll('.btn-edit-entry').forEach(btn => {
        btn.addEventListener('click', function () {
            openModal(
                this.dataset.id,
                this.dataset.employee,
                this.dataset.date,
                this.dataset.order,
                this.dataset.vehicle,
                this.dataset.aufgabe
            );
        });
    });

    function openModal(id, empId, date, order, vehicle, aufgabe) {
        document.getElementById('entry_id').value       = id ?? '';
        document.getElementById('entry_employee').value = empId;
        document.getElementById('entry_date').value     = date;
        document.getElementById('entry_order').value    = order ?? '';
        document.getElementById('entry_vehicle').value  = vehicle ?? '';
        document.getElementById('entry_aufgabe').value  = aufgabe ?? '';

        document.getElementById('entryModalTitle').textContent   = id ? 'Eintrag bearbeiten' : 'Eintrag anlegen';
        document.getElementById('entry_emp_display').textContent = empNames[empId] ?? empId;

        const d        = new Date(date + 'T00:00:00');
        const dayLabel = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'][d.getDay()];
        document.getElementById('entry_date_display').textContent =
            dayLabel + ', ' + d.toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' });

        entryModal.show();
    }

    // ── Form submit ────────────────────────────────────────────
    document.getElementById('entryForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const data = {
            entry_id:       document.getElementById('entry_id').value || null,
            fk_employee_id: document.getElementById('entry_employee').value,
            entry_date:     document.getElementById('entry_date').value,
            fk_order_id:    document.getElementById('entry_order').value   || null,
            fk_vehicle_id:  document.getElementById('entry_vehicle').value || null,
            aufgabe:        document.getElementById('entry_aufgabe').value || null,
        };

        fetch('{{ route("einsatz.save") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(res => {
            if (!res.success) return;
            if (res.conflicts && res.conflicts.length) showConflicts(res.conflicts);
            entryModal.hide();
            location.reload();
        });
    });

    // ── Delete ─────────────────────────────────────────────────
    document.querySelectorAll('.btn-delete-entry').forEach(btn => {
        btn.addEventListener('click', function () {
            if (!confirm('Eintrag löschen?')) return;
            const id = this.dataset.id;
            fetch('{{ url("wochenplan/eintrag") }}/' + id, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken }
            })
            .then(r => r.json())
            .then(() => location.reload());
        });
    });

    // ── Conflict toast ─────────────────────────────────────────
    function showConflicts(msgs) {
        const zone = document.getElementById('conflict-zone');
        zone.innerHTML = msgs.map(m =>
            `<div class="alert alert-warning alert-dismissible py-2 fade show" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> ${m}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>`
        ).join('');
        setTimeout(() => zone.innerHTML = '', 6000);
    }

    // ── Auftragsfarben ─────────────────────────────────────────
    let farbenTimer = {};
    document.querySelectorAll('.farbe-picker').forEach(function (picker) {
        picker.addEventListener('input', function () {
            const orderId = this.dataset.orderId;
            const color   = this.value;
            const row     = document.getElementById('farbe-row-' + orderId);
            const badge   = row.querySelector('.badge');
            const ok      = document.getElementById('farbe-ok-' + orderId);

            // Live-Vorschau Badge
            badge.style.background  = color + '22';
            badge.style.borderColor = color;

            clearTimeout(farbenTimer[orderId]);
            farbenTimer[orderId] = setTimeout(function () {
                fetch('{{ url("wochenplan/auftrag") }}/' + orderId + '/farbe', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({ color_hex: color })
                })
                .then(r => r.json())
                .then(function (data) {
                    if (!data.success) return;
                    // Karten auf der Seite aktualisieren
                    document.querySelectorAll('.einsatz-card').forEach(function (card) {
                        const orderEl = card.querySelector('[data-order-id]');
                        if (card.dataset.orderId == orderId) {
                            card.style.background      = color + '22';
                            card.style.borderLeftColor = color;
                        }
                    });
                    // Farblegende aktualisieren
                    document.querySelectorAll('.legend-badge[data-order-id="' + orderId + '"]').forEach(function (el) {
                        el.style.background      = color + '22';
                        el.style.borderLeftColor = color;
                    });
                    ok.style.display = 'inline';
                    setTimeout(() => ok.style.display = 'none', 2000);
                });
            }, 600);
        });
    });
})();
</script>
@endsection