@extends('layouts.app')

@section('content')
<div class="container">
    <!-- ALERT PONIEDZIAŁKOWY -->
<div id="monday-alert" class="alert d-none">
    Dziś poniedziałek – wyczyść soczewki i lustra w laserach!
    <button type="button" id="close-monday-alert">&times;</button>
</div>


    <h1 class="title">Zlecenia</h1>

    <!-- FORMULARZ DODAWANIA ZLECEŃ -->
    <form action="{{ route('orders.store') }}" method="POST" class="order-form">
        @csrf
        <input type="text" name="number" placeholder="Numer np. PR_1234" class="form" required>
        <select name="priority" class="form">
            <option value="min">min</option>
            <option value="normalny" selected>normalny</option>
            <option value="maks">maks</option>
        </select>
        <button type="submit">Dodaj</button>
    </form>

    <!-- FILTR ZLECEŃ -->
    <form method="GET" class="filter-form">
        <label>
            <input type="checkbox" name="only_done" value="1" onchange="this.form.submit()" {{ $onlyDone ? 'checked' : '' }}>
            Pokaż tylko zrobione
        </label>
    </form>

    <!-- TABELA ZLECEŃ -->
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Numer</th>
                    <th>Priorytet</th>
                    <th>Akcept</th>
                    <th>Szkło</th>
                    <th>Plik</th>
                    <th>Status</th>
                    <th>Uwagi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                <tr data-id="{{ $order->id }}">
                    <td>{{ $order->number }}</td>
                    <td>
                        <select class="auto-save" name="priority">
                            @foreach(['min','normalny','maks'] as $p)
                                <option value="{{ $p }}" @selected($order->priority==$p)>{{ $p }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><input type="checkbox" class="auto-save" name="client_approved" @checked($order->client_approved)></td>
                    <td><input type="checkbox" class="auto-save" name="glass_ready" @checked($order->glass_ready)></td>
                    <td><input type="checkbox" class="auto-save" name="file_ready" @checked($order->file_ready)></td>
                    <td>
                        <select class="auto-save" name="status">
                            @foreach(['nowe','w trakcie prac','problem','zrobione'] as $s)
                                <option value="{{ $s }}" @selected($order->status==$s)>{{ $s }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <textarea class="auto-save" name="notes" placeholder="">{{ $order->notes }}</textarea>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- CUSTOM STYLES -->
<style>
    /* Container */
    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 15px;
        font-family: "Comfortaa", sans-serif;
    }

    /* Alert */
    .alert {
        background-color: #f44336;
        color: white;
        padding: 12px 15px;
        margin-bottom: 20px;
        border-radius: 5px;
        font-weight: bold;
        position: relative;
    }

    #close-monday-alert {
        position: absolute;
        top: 5px;
        right: 10px;
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
    }

    /* Działa jak "ukryty" */
    .d-none {
        display: none !important;
    }


    /* Title */
    .title {
        margin-bottom: 20px;
    }

    /* Formularz */
    input.form,
    select.form {
        border: 1px solid #ccc;
    }
    .order-form, .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    .order-form input, .order-form select, .order-form button {
        padding: 12px 15px;
        font-size: 14px;
    }

    .order-form input, .order-form select {
        flex: 1 1 150px;
        min-width: 120px;
    }

    .order-form button {
        flex: 0 0 100px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }

    .order-form button:hover {
        background-color: #0056b3;
    }

    /* Tabela */
    .table-wrapper {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 700px;
    }

    th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f4f4f4;
    }

    textarea {
        width: 100%;
        min-height: 50px;
        resize: vertical;
        border: none;
    }

    .success {
        background-color: #ebf7eb !important;
    }

    /* Checkbox */
    input[type="checkbox"] {
        transform: scale(1.2);
    }

    select {
        background-color: #fff;
        padding: 12px 15px;
    }

    input,
    select {
        border: 1px solid #fff;
    }
    /* RESPONSYWNE */
    @media (max-width: 768px) {


        table, th, td {
            font-size: 13px;
        }
    }
</style>

<!-- JS -->
<script>
function colorizeCheckedCells() {
    document.querySelectorAll('input.auto-save[type="checkbox"]').forEach(cb => {
        const td = cb.closest('td');
        td.classList.toggle('success', cb.checked);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    // Podświetlanie checkboxów przy ładowaniu
    colorizeCheckedCells();

    // Auto-save + dynamiczne podświetlanie
    document.querySelectorAll('.auto-save').forEach(el => {
        el.addEventListener('change', e => {
            const tr = e.target.closest('tr');
            const id = tr.dataset.id;

            if (e.target.type === 'checkbox') {
                const td = e.target.closest('td');
                td.classList.toggle('success', e.target.checked);
            }

            const formData = new FormData();
            tr.querySelectorAll('.auto-save').forEach(input => {
                formData.append(
                    input.name,
                    input.type === 'checkbox' ? (input.checked ? 1 : 0) : input.value
                );
            });

            fetch(`/orders/${id}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-HTTP-Method-Override': 'PATCH',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            }).catch(err => console.error('Błąd zapisu', err));
        });
    });

const alert = document.getElementById('monday-alert');

    // Pokaż tylko w poniedziałek
    if (new Date().getDay() === 1) { // 1 = poniedziałek
        alert.classList.remove('d-none');
    }

    // Obsługa przycisku X
    const closeBtn = document.getElementById('close-monday-alert');
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            alert.classList.add('d-none');
        });
    }
});
</script>
@endsection