@extends('admin.layouts.container')

@section('content')
<div class="search_filter_form">


    <div class="body-content">
        <div class="body-content">
            <div class="contacts">
                <div class="contacts-box">
                    <div class="contacts-body">
                        <div class="contacts-box">
                            <div class="contact-row p-0 border-0">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th style="text-align:right">{{ __('orders.id') }}</th>
                                            <th style="text-align:right">{{ __('orders.user_name') }}</th>
                                            <th style="text-align:right">{{ __('orders.user_email') }}</th>
                                            <th style="text-align:right">{{ __('orders.user_phone') }}</th>
                                            <th style="text-align:right">{{ __('orders.type_order') }}</th>
                                            <th style="text-align:right">{{ __('orders.branch') }}</th>
                                            <th style="text-align:right">{{ __('orders.status') }}</th>
                                            <th colspan="2" style="text-align:right">{{ __('dashboard.created_at') }}</th>
                                            <th style="text-align:right"></th>
                                        </tr>
                                        <tr class="search-tr">
                                            <td>
                                                <input type="hidden" name="orderBy" id="orderBy" value='{{ $request->orderBy ? json_encode($request->orderBy) : '{"key":"id","value":"DESC"}' }}'>
                                                <input type="text" name="id" value="{{ $request->id ?? '' }}" class="form-control" placeholder="{{ __('orders.id') }}">
                                            </td>
                                            <td>
                                                <input type="text" name="user_name" value="{{ $request->user_name ?? '' }}" class="form-control" placeholder="{{ __('orders.user_name') }}">
                                            </td>
                                            <td>
                                                <input type="text" name="user_email" value="{{ $request->user_email ?? '' }}" class="form-control" placeholder="{{ __('orders.user_email') }}">
                                            </td>
                                            <td>
                                                <input type="text" name="user_phone" value="{{ $request->user_phone ?? '' }}" class="form-control" placeholder="{{ __('orders.user_phone') }}">
                                            </td>
                                            <td>
                                                <select name="type_order" class="form-control form-select">
                                                    <option value="">{{ __('dashboard.all') }}</option>
                                                    <option value="1" {{ ($request->type_order ?? '') === '1' ? 'selected' : '' }}>{{ __('orders.type_order_1') }}</option>
                                                    <option value="2" {{ ($request->type_order ?? '') === '2' ? 'selected' : '' }}>{{ __('orders.type_order_2') }}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select name="branch_id" class="form-control form-select">
                                                    <option value="">{{ __('dashboard.all') }}</option>
                                                    @foreach($branches as $branch)
                                                        <option value="{{ $branch->id }}" {{ (string)($request->branch_id ?? '') === (string)$branch->id ? 'selected' : '' }}>{{ $branch->currentDescription?->title ?? '-' }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select name="typeStatus" class="form-control form-select">
                                                    <option value="">{{ __('dashboard.all') }}</option>
                                                    @foreach($statuses as $status)
                                                        <option value="{{ $status->value }}" {{ (string)($request->status ?? '') === (string)$status->value ? 'selected' : '' }}>{{ __('orders.statuses.'.$status->value) }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" placeholder="{{ __('dashboard.date_from') }}" name="date_from" value="{{ $request->date_from ?? '' }}" class="date_from form-control">
                                            </td>
                                            <td>
                                                <input type="text" placeholder="{{ __('dashboard.date_to') }}" name="date_to" value="{{ $request->date_to ?? '' }}" class="date_to form-control">
                                            </td>
                                            <td>
                                                <button class="search-btn search"> <i class="fal fa-search"></i> </button>
                                            </td>
                                        </tr>
                                        </thead>
                                        <tbody class="response"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
var dataTable={
    route: '{{ route("orders.grid") }}'
}

function applyOrdersPaginationColspan() {
    const response = document.querySelector('.response');
    const table = response ? response.closest('table') : null;
    const headerRow = table ? table.querySelector('thead tr:first-child') : null;

    if (!table || !headerRow) {
        return;
    }

    const columns = Array.from(headerRow.cells).reduce((total, cell) => total + (cell.colSpan || 1), 0);

    table.querySelectorAll('td[data-auto-colspan]').forEach((cell) => {
        cell.colSpan = columns;
    });
}

function observeOrdersGrid() {
    const response = document.querySelector('.response');

    if (!response) {
        return;
    }

    applyOrdersPaginationColspan();

    new MutationObserver(() => {
        applyOrdersPaginationColspan();
    }).observe(response, { childList: true });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', observeOrdersGrid);
} else {
    observeOrdersGrid();
}

function showOrderStatusErrors(data) {
    data = data || {};
    let message = data.message || 'Request Error';

    if (data.errors) {
        if (Array.isArray(data.errors)) {
            message = data.errors.join('<br>');
        } else if (typeof data.errors === 'object') {
            message = Object.values(data.errors).flat().join('<br>');
        } else {
            message = data.errors;
        }
    }

    $('.ajaxErrorResponse').html(message || 'Request Error').fadeIn(500);

    setTimeout(() => {
        $('.ajaxErrorResponse').fadeOut(500);
    }, 1000);
}

function applyOrderStatusColor(select, pill, color) {
    pill.css({
        'background-color': color.bg,
        'border-color': color.border,
    });
    pill.find('.order-status-dot').css('background-color', color.text);
    pill.find('.fa-chevron-down').css('color', color.text);
    select.css('color', color.text);
}

async function updateOrderStatus(elem) {
    const select = $(elem);
    const previousStatus = select.data('current-status');
    const getOptionColor = (option) => {
        const selectedOption = $(option);

        return {
            bg: selectedOption.data('bg') || '#f8f9fa',
            text: selectedOption.data('border') || selectedOption.data('text') || 'black',
            border: selectedOption.data('border') || '#dee2e6',
        };
    };
    const nextStatus = select.val();
    const nextColor = getOptionColor(select.find('option:selected'));
    const pill = select.closest('.order-status-pill');

    applyOrderStatusColor(select, pill, nextColor);
    select.prop('disabled', true);

    try {
        $('.loading').show();
        const response = await axios({
            url: select.data('url'),
            method: 'put',
            data: {
                status: nextStatus
            }
        });
        $('.loading').hide();
        select.prop('disabled', false);

        if (response && response.data && response.data.message) {
            select.data('current-status', nextStatus);
            select.data('current-bg', nextColor.bg);
            select.data('current-text', nextColor.text);
            select.data('current-border', nextColor.border);
            toasterSuccess(response.data.message);

            if (typeof getData === 'function') {
                getData();
            }

            return;
        }
    } catch (error) {
        $('.loading').hide();
        showOrderStatusErrors(error.response && error.response.data ? error.response.data : {});
    } finally {
        select.prop('disabled', false);
    }

    select.val(previousStatus);
    const previousColor = {
        bg: select.data('current-bg') || '#f8f9fa',
        text: select.data('current-text') || 'black',
        border: select.data('current-border') || '#dee2e6',
    };
    applyOrderStatusColor(select, pill, previousColor);
}
</script>