{% extends "layouts/base.twig" %}

{% block title %}{{ translations.client_order }}{% endblock %}



{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.client_order }}</h3>
        <p class="text-subtitle text-muted">{{ translations.client_order_subtitle }}</p>
    </div>

    <style>
        :root {
            --primary-color: #667eea;
            --primary-light: #a8b5f3;
            --primary-dark: #4c63d2;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --info-color: #3b82f6;
            --light-gray: #f8fafc;
            --medium-gray: #e2e8f0;
            --dark-gray: #64748b;
            --text-color: #334155;
            --border-radius: 16px;
            --border-radius-sm: 12px;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .order-card {
            background: rgba(255, 255, 255, 0.9);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            margin: 1rem;
        }

        .order-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .order-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--info-color), #60a5fa);
        }

        .order-card.priority-urgent::before {
            background: linear-gradient(90deg, var(--danger-color), #f87171);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .order-number {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-color);
            margin: 0;
        }

        .order-date {
            font-size: 0.85rem;
            color: var(--dark-gray);
        }

        .status-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-potwierdzone {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
        }

        .customer-info {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .customer-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            margin-right: 0.75rem;
        }

        .customer-details h6 {
            margin: 0;
            font-weight: 600;
            color: var(--text-color);
        }

        .customer-details small {
            color: var(--dark-gray);
        }

        .delivery-info {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border-radius: var(--border-radius-sm);
            padding: 0.75rem;
            margin-bottom: 1rem;
            text-align: center;
            border: 1px solid #bfdbfe;
        }

        .delivery-info.urgent {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            border-color: #fca5a5;
            color: #991b1b;
        }

        .products-list {
            margin-bottom: 1rem;
        }

        .product-tag {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .product-tag.tort {
            background: linear-gradient(135deg, #fecaca, #fca5a5);
            color: #991b1b;
        }

        .product-tag.kanapka {
            background: linear-gradient(135deg, #fed7aa, #fdba74);
            color: #9a3412;
        }

        .order-total {
            background: var(--light-gray);
            border-radius: var(--border-radius-sm);
            padding: 0.75rem;
            margin-bottom: 1rem;
        }

        .order-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            border-radius: var(--border-radius-sm);
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            transition: var(--transition);
            border: none;
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .btn-outline-secondary {
            border: 2px solid var(--medium-gray);
            color: var(--dark-gray);
            background: transparent;
        }

        .btn-outline-secondary:hover {
            background: var(--light-gray);
            border-color: var(--dark-gray);
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
        }

        .text-danger {
            color: var(--danger-color);
        }

        .text-muted {
            color: var(--dark-gray);
        }

        .d-flex {
            display: flex;
        }

        .justify-content-between {
            justify-content: space-between;
        }

        .mb-1 {
            margin-bottom: 0.25rem;
        }

        .my-2 {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .mt-2 {
            margin-top: 0.5rem;
        }

        .flex-fill {
            flex: 1 1 auto;
        }

        .po-hash-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            background: linear-gradient(135deg, #f0fdf4, #dcfce7);
            border: 1px solid #86efac;
            border-radius: 20px;
            padding: 0.25rem 0.65rem;
            font-size: 0.78rem;
            font-weight: 600;
            color: #15803d;
            cursor: pointer;
            transition: var(--transition);
        }

        .po-hash-badge:hover {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            box-shadow: var(--shadow-sm);
        }

        .po-hash-empty {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border: 1px dashed #cbd5e1;
            color: var(--dark-gray);
        }

        .po-hash-empty:hover {
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            border-color: #94a3b8;
        }
    </style>


    {% include "page_components/messages.twig" %}
{% endblock %}

{% block content %}

    <div class="search-section">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ translations.search_for_order }}</h4>
            </div>
            <div class="card-content">
                <div class="card-body px-4 py-4-5">
                    <div class="row g-3 mt-4">
                        <div class="col-md-3">
                            <label class="form-label">{{ translations.client_name }}</label>
                            <select class="form-select choices" id="customerSelect">
                                <option value="">{{ translations.select_client }}</option>
                                {% for client in clientsWithOrders %}
                                    <option value="{{ client.id }}">{{ client.absoluteName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ translations.order_status }}</label>
                            <select class="form-select" id="statusFilter">
                                <option value="">{{ translations.all_statuses }}</option>
                                <option value="new">{{ translations.new_orders }}</option>
                                <option value="picked_up">{{ translations.picked_up_orders }}</option>
                                <option value="canceled">{{ translations.canceled_orders }}</option>
                                <option value="unpicked">{{ translations.unpicked_orders }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">{{ translations.date_from }}</label>
                            <input type="date" class="form-control" id="dateFrom">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">{{ translations.date_to }}</label>
                            <input type="date" class="form-control" id="dateTo">
                        </div>

                        <div class="col-md-2 d-flex align-items-end">
                            <div class="flex-grow-1 me-2"></div>
                            <div>
                                <button class="btn btn-primary" id="searchBtn">
                                    <i class="bi bi-search"></i> {{ translations.search }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-2">
                        <div class="col-12">
                            <button class="btn btn-outline-secondary " id="clearFilters">
                                <i class="bi bi-arrow-clockwise"></i> {{ translations.clear_filters }}
                            </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="search-section">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ translations.orders }}</h4>
            </div>
            <div class="card-content">
                <div class="card-body px-4 py-4-5">

                    {% for statusId, orders in groupedOrders %}
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">{{ orderStatuses[statusId] }}</h5>
                                <button class="btn btn-sm btn-outline-secondary toggle-status-btn" type="button"
                                        data-target="#group-{{ statusId }}">
                                    <i class="bi bi-dash"></i>
                                </button>
                            </div>

                            <div class="row mt-2 order-group collapse show" id="group-{{ statusId }}">
                                {% for order in orders %}
                                    <div class="col-4">
                                        <div class="order-card {{ order.idOrderStatus == 3 ? 'priority-urgent' : '' }}"
                                             data-customer="{{ order.client.AbsoluteName }}"
                                             data-status="{{ order.idOrderStatus }}">

                                            <div class="row order-header">
                                                <div class="col-8 order-date">
                                                    {{ order.AcceptingTimestamp }}
                                                </div>
                                                <div class="col-4">
                                                    {% if order.idTransaction is null %}
                                                        <button class="btn btn-danger btn-sm float-end remove-order-btn"
                                                                data-order-id="{{ order.id }}">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </div>

                                            <div class="customer-info">
                                                <button class="btn btn-sm btn-outline-secondary edit-client-btn mx-2"
                                                        data-order-id="{{ order.id }}">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                <div class="customer-details">
                                                    <h6>{{ order.client.AbsoluteName }}</h6>
                                                    <small>{{ order.client.phone }}</small>
                                                </div>

                                            </div>

                                            <div class="delivery-info urgent">
                                                <i class="bi bi-calendar-event"></i>
                                                <strong>{{ translations.pick_up_datetime_short }}
                                                    : {{ order.PickUpDatetime }}</strong>
                                            </div>

                                            <div class="products-list">
                                                <div class="mt-1">
                                                    <span class="text-muted font-bold">{{ translations.comment }}:</span>
                                                </div>
                                                <div>
                                                    <small class="text-muted">{{ order.comment }}</small>
                                                </div>
                                            </div>

                                            <div class="mb-2">
                                                <button class="po-hash-badge {{ order.POHash is null or order.POHash == '' ? 'po-hash-empty' : '' }} edit-po-hash-btn"
                                                        data-order-id="{{ order.id }}"
                                                        data-po-hash="{{ order.POHash ?? '' }}">
                                                    <i class="bi bi-tag"></i>
                                                    {% if order.POHash is not null and order.POHash != '' %}
                                                        PO#: {{ order.POHash }}
                                                    {% else %}
                                                        + Dodaj PO#
                                                    {% endif %}
                                                </button>
                                            </div>

                                            <div class="order-total">
                                                <div class="d-flex justify-content-between">
                                                    <strong>{{ translations.to_be_paid }}:</strong>
                                                    <strong>
                                                        {% if order.idTransaction is not null %}
                                                            {% if order.getIdPaymentType == 0 %}
                                                                <span class="text-secondary font-bold">{{ translations.deferral }}</span>
                                                            {% else %}
                                                                <span class="text-success font-bold">{{ translations.already_paid }}</span>
                                                            {% endif %}
                                                        {% else %}
                                                            {{ order.TotalOrderValue|number_format(2, ',', ' ') }} {{ order.currency }}
                                                        {% endif %}
                                                    </strong>
                                                </div>
                                            </div>

                                            <div class="order-actions">

                                                {% if order.idOrderStatus != 3 and order.idOrderStatus != 5 %}
                                                    <button class="btn btn-primary btn-sm flex-fill edit-order-btn"
                                                            data-order-id="{{ order.id }}">
                                                        <i class="bi bi-pencil"></i> {{ translations.edit }}
                                                    </button>

                                                {% else %}
                                                    <button class="btn btn-primary btn-sm flex-fill preview-order-btn"
                                                            data-order-id="{{ order.id }}">
                                                        <i class="bi bi-search"></i> {{ translations.preview }}
                                                    </button>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <hr>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="editOrderModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ translations.order_editing }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editOrderForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">{{ translations.client_name }}</label>
                                <input type="text" class="form-control" id="customerName" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ translations.phone }}</label>
                                <input type="tel" class="form-control" id="customerPhone" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">{{ translations.pick_up_datetime }}</label>
                                <input type="datetime-local" class="form-control" id="deliveryDate"
                                       min="{{ "now"|date("Y-m-d\\TH:i") }}" required>
                            </div>
                        </div>

                        <div class="mt-5 product-section">
                            <label class="form-label">{{ translations.products_in_order }}</label>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col" style="width: 40%;">{{ translations.product_name }}</th>
                                    <th scope="col" style="width: 15%;">{{ translations.quantity }}</th>
                                    <th scope="col" style="width: 20%;">{{ translations.unit_price_short }}</th>
                                    <th scope="col" style="width: 20%;">{{ translations.total_price_short }}</th>
                                    <th scope="col" style="width: 5%;"></th>
                                </tr>
                                </thead>
                                <tbody id="productsList">

                                </tbody>
                                <tbody id="new-product-tbody">
                                <tr>
                                    <td>
                                        <select class="form-select choices product-select" id="productSelect">
                                            <option value="">{{ translations.select_product }}</option>
                                            {% for product in products %}
                                                <option value="{{ product.id }}">{{ product.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control new-product-quantity" value="1"
                                               min="1">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control new-product-price" placeholder="0.00"
                                               step="0.01" min="0">
                                    </td>
                                    <td colspan="2">
                                        <button type="button" class="btn btn-sm btn-success float-end new-product-btn">
                                            {{ translations.add_product }}
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3">
                            <label class="form-label">{{ translations.comment }}</label>
                            <textarea class="form-control" id="specialNotes" rows="3"></textarea>
                        </div>

                        <div class="row g-3 mt-2">
                            <div class="col-md-4">
                                <label class="form-label">{{ translations.order_value }}</label>
                                <input type="number" readonly class="form-control" id="totalAmount" step="0.01" min="0">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{{ translations.close }}</button>
                    <button type="button" class="btn btn-primary" id="saveOrderBtn">
                        <i class="bi bi-check-lg"></i> {{ translations.save_changes }}
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="editOrderClientModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ translations.edit_client_details }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#b2b" role="tab"
                               aria-controls="b2b" aria-selected="true">{{ translations.b2b }}</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#b2c" role="tab"
                               aria-controls="b2c" aria-selected="false">{{ translations.b2c }}</a>
                        </li>
                    </ul>
                    <div class="tab-content mt-5">
                        <div class="tab-pane fade show active" id="b2b" role="tabpanel" aria-labelledby="home-tab">
                            <table class="table table-hover mt-3 text-sm" id="b2b_table">
                                <thead>
                                <th style="width: 10%"></th>
                                <th style="width: 35%"> {{ translations.name }}</th>
                                <th style="width: 20%"> {{ translations.tax_number }}</th>
                                <th style="width: 20%"> {{ translations.phone }}</th>
                                <th style="width: 15%"></th>
                                </thead>
                                <tbody id="tbody_client">
                                {% for client in b2b_clients %}
                                    <tr>
                                        <td><i class="icon dripicons-briefcase"></i></td>
                                        <td>{{ client.companyName }}</td>
                                        <td>{{ client.taxNumber }}</td>
                                        <td>{{ client.phone }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-secondary float-end change-client-btn"
                                                    data-client-id="{{ client.id }}">
                                                <i class="bi bi-pencil"></i> {{ translations.select_client }}
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="b2c" role="tabpanel" aria-labelledby="profile-tab">
                            <table class="table table-hover mt-3" id="b2c_table">
                                <thead>
                                <th style="width: 10%"></th>
                                <th style="width: 25%"> {{ translations.name }}</th>
                                <th style="width: 25%"> {{ translations.surname }}</th>
                                <th style="width: 25%"> {{ translations.phone }}</th>
                                <th style="width: 15%"></th>
                                </thead>
                                <tbody id="tbody_client">
                                {% for client in b2c_clients %}
                                    <tr>
                                        <td><i class="icon dripicons-briefcase"></i></td>
                                        <td>{{ client.name }}</td>
                                        <td>{{ client.surname }}</td>
                                        <td>{{ client.phone }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-secondary float-end change-client-btn"
                                                    data-client-id="{{ client.id }}">
                                                <i class="bi bi-pencil"></i> {{ translations.select_client }}
                                            </button>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{{ translations.close }}</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="previewOrderModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ translations.order_preview }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ translations.client_name }}</label>
                            <input type="text" class="form-control" id="previewCustomerName" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translations.phone }}</label>
                            <input type="tel" class="form-control" id="previewCustomerPhone" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translations.pick_up_datetime }}</label>
                            <input type="datetime-local" class="form-control" id="previewDeliveryDate"
                                   min="{{ "now"|date("Y-m-d\\TH:i") }}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translations.comment }}</label>
                            <textarea class="form-control" id="previewSpecialNotes" rows="3" readonly></textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translations.order_value }}</label>
                            <input type="number" readonly class="form-control" id="previewTotalAmount" step="0.01"
                                   min="0">
                        </div>
                    </div>
                    <div class="mt-5 product-section">
                        <label class="form-label">{{ translations.products_in_order }}</label>
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th scope="col" style="width: 40%;">{{ translations.product_name }}</th>
                                <th scope="col" style="width: 15%;">{{ translations.quantity }}</th>
                                <th scope="col" style="width: 20%;">{{ translations.unit_price_short }}</th>
                                <th scope="col" style="width: 20%;">{{ translations.total_price_short }}</th>
                            </tr>
                            </thead>
                            <tbody id="previewProductsList">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{{ translations.close }}</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="editPoHashModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-tag me-2"></i>Numer PO#</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label fw-semibold">PO#</label>
                    <input type="text"
                           class="form-control"
                           id="poHashInput"
                           placeholder="Wprowadź numer PO#"
                           maxlength="100">
                    <small class="text-muted mt-1 d-block">Pozostaw puste, aby usunąć wartość PO#.</small>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
                    <button type="button" class="btn btn-primary" id="savePoHashBtn">
                        <i class="bi bi-check-lg"></i> Zapisz
                    </button>
                </div>
            </div>
        </div>
    </div>



{% endblock %}


{% block scripts %}
    <script src="{{ root }}/assets/vendors/simple-datatables/simple-datatables.js"></script>


    <script type="text/javascript">

        let b2b_table = document.querySelector('#b2b_table');
        let b2bDataTable = new simpleDatatables.DataTable(b2b_table, {
            perPage: 15,
            perPageSelect: false,
            searchable: true,
            sortable: true,
            labels: {
                placeholder: `{{ translations.search_for_name }}`,
                noRows: `{{ translations.no_data_found }}`,
                info: `{{ translations.showing }} {start} - {end} {{ translations.of }} {rows} {{ translations.entries }}`,
            },
        });

        let b2c_table = document.querySelector('#b2c_table');
        let b2cDataTable = new simpleDatatables.DataTable(b2c_table, {
            perPage: 15,
            perPageSelect: false,
            searchable: true,
            sortable: true,
            labels: {
                placeholder: `{{ translations.search_for_name }}`,
                noRows: `{{ translations.no_data_found }}`,
                info: `{{ translations.showing }} {start} - {end} {{ translations.of }} {rows} {{ translations.entries }}`,
            },
        });


        const ordersData = {{ ordersById|json_encode|raw }};
        const productsData = {{ products|json_encode|raw }};
        let currentEditingOrderId = null;


        document.getElementById("searchBtn").addEventListener("click", function () {
            const idClient = document.getElementById("customerSelect").value;
            const status = document.getElementById("statusFilter").value;
            const dateFrom = document.getElementById("dateFrom").value;
            const dateTo = document.getElementById("dateTo").value;

            const params = new URLSearchParams();

            if (idClient) params.append("id_client", idClient);
            if (status) params.append("status", status);
            if (dateFrom) params.append("date_from", dateFrom);
            if (dateTo) params.append("date_to", dateTo);

            const baseUrl = window.location.pathname;
            const newUrl = `${baseUrl}?${params.toString()}`;

            window.location.href = newUrl;
        });

        window.addEventListener("DOMContentLoaded", function () {
            const params = new URLSearchParams(window.location.search);
            const today = new Date().toISOString().split('T')[0]; // "YYYY-MM-DD"

            const idClient = params.get("id_client") || "";
            const status = params.get("status") || "";
            const dateFrom = params.get("date_from") || today;
            const dateTo = params.get("date_to") || today;

            // Ustaw pozostałe filtry
            document.getElementById("statusFilter").value = status;
            document.getElementById("dateFrom").value = dateFrom;
            document.getElementById("dateTo").value = dateTo;

            // Ustaw wartość w select z Choices (już zainicjalizowanym globalnie)
            const customerSelect = document.getElementById("customerSelect");

            if (idClient && customerSelect && customerSelect.choices) {
                customerSelect.choices.setChoiceByValue(idClient);
            }
        });


        document.addEventListener('click', function (e) {
            if (e.target.closest('.change-client-btn')) {
                const btn = e.target.closest('.change-client-btn');
                const clientId = parseInt(btn.dataset.clientId);

                if (!clientId || !currentEditingOrderId) {
                    alert('{{ translations.error_updating_order }}');
                    return;
                }

                if (!confirm('{{ translations.confirm_client_change }}')) {
                    return;
                }

                const data = {
                    id_client: clientId
                };

                api(`/ajax/client-orders/${currentEditingOrderId}`, {
                    method: 'PATCH',
                    data
                })
                    .then(result => {
                        if (result.ok) {
                            showSnack(true, `{{ translations.client_updated_successfully }}`);
                            location.reload();
                        } else {
                            alert(result.message || '{{ translations.error_updating_order }}');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showSnack(false, `{{ translations.error_updating_order }}`);
                    });
            }
        });

        document.addEventListener('click', function (e) {
            if (e.target.closest('.remove-order-btn')) {
                const btn = e.target.closest('.remove-order-btn');
                const orderId = parseInt(btn.dataset.orderId);

                if (!orderId) {
                    alert('{{ translations.error_removing_order }}');
                    return;
                }

                if (!confirm('{{ translations.confirm_order_removal }}')) {
                    return;
                }

                api(`/ajax/client-orders/${orderId}`, {
                    method: 'DELETE'
                })
                    .then(result => {
                        if (result.ok) {
                            showSnack(true, `{{ translations.order_removed_successfully }}`);
                            location.reload();
                        } else {
                            alert(result.message || '{{ translations.error_removing_order }}');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showSnack(false, `{{ translations.error_removing_order }}`);
                    });
            }
        });


        document.getElementById('productSelect').addEventListener('change', function () {
            const productId = parseInt(this.value);
            const product = productsData.find(p => p.id === productId);

            if (product) {
                const quantityInput = document.querySelector('.product-quantity');
                const priceInput = document.querySelector('.new-product-price');
                quantityInput.value = 1; // Reset quantity to 1
                priceInput.value = Number(product.portion_price).toFixed(2); // Set price from product data
            }
        });

        document.querySelectorAll('.edit-order-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const orderId = parseInt(this.dataset.orderId);
                currentEditingOrderId = orderId;
                openEditModal(orderId);
            });
        });

        document.querySelectorAll('.edit-client-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const orderId = parseInt(this.dataset.orderId);
                currentEditingOrderId = orderId;
                openEditClientModal(orderId);
            });
        });

        document.getElementById('editOrderModal').addEventListener('hidden.bs.modal', function () {
            clearProductsTable();

            document.getElementById('new-product-tbody').style.visibility = 'visible';
            currentEditingOrderId = null;
        });


        document.getElementById('editOrderClientModal').addEventListener('hidden.bs.modal', function () {
            currentEditingOrderId = null;
        });

        function openEditModal(orderId) {
            const orderData = ordersData[orderId];
            console.log(orderData)
            if (!orderData) return;

            document.getElementById('customerName').value = orderData.client.absolute_name;
            document.getElementById('customerPhone').value = orderData.client.phone;
            document.getElementById('deliveryDate').value = orderData.pick_up_datetime.replace(' ', 'T');
            document.getElementById('specialNotes').value = orderData.comment;
            document.getElementById('totalAmount').value = orderData.total_order_value.toFixed(2);

            let possibleToEdit = false;
            if (orderData.id_transaction == null) {
                possibleToEdit = true;
            }

            renderProducts(orderData.products, possibleToEdit);

            const modal = new bootstrap.Modal(document.getElementById('editOrderModal'));
            modal.show();
        }


        function openEditClientModal(orderId) {
            const orderData = ordersData[orderId];
            if (!orderData) return;

            document.getElementById('customerName').value = orderData.client.absolute_name;
            document.getElementById('customerPhone').value = orderData.client.phone;


            const modal = new bootstrap.Modal(document.getElementById('editOrderClientModal'));
            modal.show();
        }

        document.querySelector('.new-product-btn').addEventListener('click', function () {
            const productSelect = document.getElementById('productSelect');
            const selectedProductId = parseInt(productSelect.value);
            const quantityInput = document.querySelector('.new-product-quantity');
            const priceInput = document.querySelector('.new-product-price');

            if (!selectedProductId || !quantityInput.value || !priceInput.value) {
                alert('{{ translations.select_product_and_quantity }}');
                return;
            }

            const product = productsData.find(p => p.id === selectedProductId);
            if (!product) {
                alert('{{ translations.product_not_found }}');
                return;
            }

            const existingRows = document.querySelectorAll('.product-item');
            for (let row of existingRows) {
                const productName = row.querySelector('td').textContent.trim();
                if (productName === product.name) {
                    alert('{{ translations.product_already_in_order }}');
                    return;
                }
            }


            const quantity = parseFloat(quantityInput.value);
            const price = parseFloat(priceInput.value);

            if (quantity <= 0 || price < 0) {
                alert('{{ translations.invalid_quantity_or_price }}');
                return;
            }

            const newProduct = {
                id_product: selectedProductId,
                product_name: product.name,
                quantity: quantity,
                unit_gross_price: price.toFixed(2),
                total_gross_value_after_discount: (quantity * price).toFixed(2)
            };

            addProductToTable(newProduct);
            calculateTotalAmount();
        });

        function addProductToTable(product) {
            const tbody = document.getElementById('productsList');
            const row = document.createElement('tr');
            row.className = 'product-item';
            row.dataset.idProduct = product.id_product;

            row.innerHTML = `
                <td>${product.product_name}</td>
                <td>
                    <input type="number" class="form-control product-quantity" value="${parseInt(product.quantity)}" min="1">
                </td>
                <td>
                    <input type="number" class="form-control product-price" readonly value="${product.unit_gross_price}" step="0.01" min="0">
                </td>
                <td>
                    <input type="number" class="form-control total-price" readonly value="${product.total_gross_value_after_discount}" step="0.01" min="0">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-product float-end">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            `;

            tbody.appendChild(row);

            // Add event listeners for the new row
            row.querySelector('.remove-product').addEventListener('click', function () {
                this.closest('.product-item').remove();
                calculateTotalAmount();
            });

            row.querySelector('.product-quantity').addEventListener('input', calculateTotalAmount);
            row.querySelector('.product-quantity').addEventListener('input', calculateProductAmount);
            row.querySelector('.product-price').addEventListener('input', calculateTotalAmount);
        }

        function clearProductsTable() {
            const tbody = document.getElementById('productsList');
            tbody.innerHTML = '';
        }

        document.querySelectorAll('.new-product-quantity').forEach(input => {
            input.addEventListener('change', function () {
                if (this.value === '') return;

                this.value = Math.floor(parseFloat(this.value.toString().replace(',', '.')) || 0);
                calculateProductAmount.call(this); // ← PRZELICZ lokalną kwotę
                calculateTotalAmount();            // ← PRZELICZ SUMĘ
            });
        });

        function renderProducts(products, possibleToEdit) {
            const tbody = document.getElementById('productsList');
            tbody.innerHTML = '';

            products.forEach((product, index) => {
                const row = document.createElement('tr');
                row.className = 'product-item';
                row.dataset.index = index;
                row.dataset.idProduct = product.id_product;

                if (possibleToEdit) {
                    row.innerHTML = `
                    <td>${product.product_name}</td>
                    <td>
                        <input type="number" class="form-control product-quantity" value="${parseInt(product.quantity)}" min="1">
                    </td>
                    <td>
                        <input type="number" class="form-control product-price" readonly value="${product.unit_gross_price}" step="0.01" min="0">
                    </td>
                    <td>
                        <input type="number" class="form-control total-price" readonly value="${product.total_gross_value_after_discount}" step="0.01" min="0">
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-product float-end">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                `;
                } else {
                    row.innerHTML = `
                    <td>${product.product_name}</td>
                    <td>${product.quantity}</td>
                    <td>${product.unit_gross_price}</td>
                    <td>${product.total_gross_value_after_discount}</td>
                    <td></td>
                `;
                    document.getElementById('new-product-tbody').style.visibility = 'hidden';
                }


                tbody.appendChild(row);
            });

            // Add event listeners
            tbody.querySelectorAll('.remove-product').forEach(btn => {
                btn.addEventListener('click', function () {
                    this.closest('.product-item').remove();
                    calculateTotalAmount();
                });
            });

            tbody.querySelectorAll('.product-price, .product-quantity').forEach(input => {
                input.addEventListener('input', calculateTotalAmount);
                input.addEventListener('input', calculateProductAmount);
            });

            tbody.querySelectorAll('.product-quantity').forEach(input => {
                input.addEventListener('change', function () {
                    if (this.value === '') return;

                    this.value = Math.floor(parseFloat(this.value.toString().replace(',', '.')) || 0);
                    calculateProductAmount.call(this); // ← PRZELICZ lokalną kwotę
                    calculateTotalAmount();            // ← PRZELICZ SUMĘ
                });
            });
        }

        function calculateProductAmount() {
            const row = this.closest('tr');
            if (!row) return;

            const quantity = parseFloat(row.querySelector('.product-quantity')?.value || 0);
            const unitPrice = parseFloat(row.querySelector('.product-price')?.value || 0);
            const total = quantity * unitPrice;

            const totalCell = row.querySelector('.total-price');
            if (totalCell) {
                totalCell.value = total.toFixed(2);
            }
        }

        function calculateTotalAmount() {
            let total = 0;
            document.querySelectorAll('.product-item').forEach(item => {
                const quantity = parseFloat(item.querySelector('.product-quantity').value) || 0;
                const price = parseFloat(item.querySelector('.product-price').value) || 0;
                console.log(item)

                total += quantity * price;
            });

            document.getElementById('totalAmount').value = total.toFixed(2);
            console.log('[calculateTotalAmount] total:', total);
        }


        document.getElementById('saveOrderBtn').addEventListener('click', function () {
            let deliveryDateRaw = document.getElementById('deliveryDate').value;
            let deliveryDateObj = new Date(deliveryDateRaw);

            const specialNotes = document.getElementById('specialNotes').value.trim();
            const totalAmount = parseFloat(document.getElementById('totalAmount').value) || 0;

            let deliveryDate = deliveryDateObj.getFullYear() + '-' +
                (deliveryDateObj.getMonth() + 1).toString().padStart(2, '0') + '-' +
                deliveryDateObj.getDate().toString().padStart(2, '0') + ' ' +
                deliveryDateObj.getHours().toString().padStart(2, '0') + ':' +
                deliveryDateObj.getMinutes().toString().padStart(2, '0') + ':' +
                '00';

            if (!deliveryDate || new Date(deliveryDate) < new Date()) {
                alert('{{ translations.invalid_delivery_date }}');
                return;
            }

            let selectedOrder = ordersData[currentEditingOrderId];

            // Prepare data to send
            let orderData = {
                id: currentEditingOrderId,
                pick_up_datetime: deliveryDate,
                comment: specialNotes
            };

            if (selectedOrder.id_transaction === null) {
                const products = [];
                document.querySelectorAll('.product-item').forEach(item => {
                    const productName = item.querySelector('td')?.textContent.trim() || '';
                    const quantity = parseInt(item.querySelector('.product-quantity')?.value) || 0;
                    const unitPrice = parseFloat(item.querySelector('.product-price')?.value) || 0;
                    const totalPrice = parseFloat(item.querySelector('.total-price')?.value) || 0;

                    if (productName && quantity > 0 && unitPrice >= 0) {
                        products.push({
                            id_order: currentEditingOrderId,
                            id_product: item.dataset.idProduct,
                            name: productName,
                            quantity: quantity,
                            weight: 0,
                            unit_gross_price: unitPrice.toFixed(2),
                            item_tax_perc: productsData[item.dataset.idProduct]?.tax_perc || 0,
                            item_discount_value: 0,
                            total_gross_value_after_discount: totalPrice.toFixed(2)
                        });
                    }
                });

                if (products.length === 0) {
                    alert('{{ translations.add_at_least_one_product }}');
                    return;
                }

                orderData.products = products;
            }

            api(`/ajax/client-orders/${currentEditingOrderId}`, {
                method: 'PATCH',
                data: orderData
            })
                .then(result => {
                    if (result.ok) {
                        showSnack(true, `{{ translations.order_updated_successfully }}`);
                        location.reload();
                    } else {
                        alert(result.message || '{{ translations.error_updating_order }}');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showSnack(false, `{{ translations.error_updating_order }}`);
                });
        });

        document.getElementById("clearFilters").addEventListener("click", function () {
            const today = new Date().toISOString().split('T')[0]; // "YYYY-MM-DD"

            // Wyczyść wartości pól
            document.getElementById("customerSelect").value = "";
            document.getElementById("statusFilter").value = "";
            document.getElementById("dateFrom").value = today;
            document.getElementById("dateTo").value = today;


            // Jeśli Choices.js jest używany, zresetuj jego widok
            const customerSelect = document.getElementById("customerSelect");
            if (customerSelect.choices) {
                customerSelect.choices.removeActiveItems();
                customerSelect.choices.setChoiceByValue("");
            }

            // Przeładuj stronę bez parametrów
            const baseUrl = window.location.pathname;
            window.location.href = baseUrl;
        });


        document.querySelectorAll('.toggle-status-btn').forEach(button => {
            button.addEventListener('click', function () {
                const targetId = this.dataset.target;
                const target = document.querySelector(targetId);

                if (target.classList.contains('show')) {
                    target.classList.remove('show');
                    this.innerHTML = '<i class="bi bi-plus"></i>';
                } else {
                    target.classList.add('show');
                    this.innerHTML = '<i class="bi bi-dash"></i>';
                }
            });
        });

        // --- PO# modal ---
        let currentPoHashOrderId = null;

        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.edit-po-hash-btn');
            if (!btn) return;

            currentPoHashOrderId = parseInt(btn.dataset.orderId);
            const currentValue = btn.dataset.poHash || '';

            document.getElementById('poHashInput').value = currentValue;

            const modal = new bootstrap.Modal(document.getElementById('editPoHashModal'));
            modal.show();
        });

        document.getElementById('editPoHashModal').addEventListener('hidden.bs.modal', function () {
            currentPoHashOrderId = null;
            document.getElementById('poHashInput').value = '';
        });

        document.getElementById('savePoHashBtn').addEventListener('click', function () {
            if (!currentPoHashOrderId) return;

            const poHash = document.getElementById('poHashInput').value.trim();

            api(`/ajax/client-orders/${currentPoHashOrderId}`, {
                method: 'PATCH',
                data: { po_hash: poHash }
            })
                .then(result => {
                    if (result.ok) {
                        showSnack(true, 'PO# został zapisany.');
                        bootstrap.Modal.getInstance(document.getElementById('editPoHashModal')).hide();
                        location.reload();
                    } else {
                        alert(result.message || 'Błąd podczas zapisywania PO#.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showSnack(false, 'Błąd podczas zapisywania PO#.');
                });
        });

        // Enter w polu PO# zatwierdza zapis
        document.getElementById('poHashInput').addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('savePoHashBtn').click();
            }
        });

        document.querySelectorAll('.preview-order-btn').forEach(button => {            button.addEventListener('click', function () {
                const orderId = parseInt(this.dataset.orderId);
                const orderData = ordersData[orderId];

                if (!orderData) return;

                document.getElementById('previewCustomerName').value = orderData.client.absolute_name;
                document.getElementById('previewCustomerPhone').value = orderData.client.phone;
                document.getElementById('previewDeliveryDate').value = orderData.pick_up_datetime.replace(' ', 'T');
                document.getElementById('previewSpecialNotes').value = orderData.comment;
                document.getElementById('previewTotalAmount').value = orderData.total_order_value.toFixed(2);

                const previewProductsList = document.getElementById('previewProductsList');
                previewProductsList.innerHTML = '';

                orderData.products.forEach(product => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${product.product_name}</td>
                        <td>${product.quantity}</td>
                        <td>${product.unit_gross_price}</td>
                        <td>${product.total_gross_value_after_discount}</td>
                    `;
                    previewProductsList.appendChild(row);
                });

                const modal = new bootstrap.Modal(document.getElementById('previewOrderModal'));
                modal.show();
            });
        });


    </script>


{% endblock %}