@extends('layouts.site')

@section('meta_title', __('Catalog::theme.order.heading'))

@section('css')
    @parent
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
@endsection

@section('content_header')
    @include('partials._components._heading', ['heading' => __('Catalog::theme.order.heading')])
@endsection

@section('content')
    @php
        $statusMap = [
            'Delivered' => 'orders-badge orders-badge--delivered',
            'Shipped' => 'orders-badge orders-badge--shipped',
            'Processing' => 'orders-badge orders-badge--processing',
            'Cancelled' => 'orders-badge orders-badge--cancelled',
        ];
    @endphp

    <section class="site-main-section">
        <div class="site-container">
            <div class="account-shell mx-auto max-w-6xl">
                <div class="account-shell__aside min-w-0">
                @include('partials._components._user-menu')
                </div>

                <div class="account-shell__content min-w-0">
                    <header>
                        <h1 class="text-3xl font-bold text-slate-900">{{ __('Catalog::theme.order.heading') }}</h1>
                        <p class="mt-2 text-xl text-slate-500">View and track your redemption orders.</p>
                    </header>

                    <div class="orders-dashboard mt-8">
                        <div class="orders-toolbar">
                            <label class="orders-search" for="ordersSearch">
                                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                                <input type="search" id="ordersSearch" placeholder="Search orders">
                            </label>
                            <select id="ordersLength" class="orders-select" aria-label="Show records" data-native-select>
                                <option value="10">Show 10</option>
                                <option value="25">Show 25</option>
                                <option value="50">Show 50</option>
                            </select>
                        </div>

                        <section class="orders-table-shell overflow-x-auto">
                            <table class="table mb-0 w-full" id="ordersTable" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Order Number</th>
                                            <th>Quantity</th>
                                            <th>Points</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @forelse($orders as $order)
                                        @php
                                            $statusLabel = $order->isCancelled() ? 'Cancelled' : ($order->isProcessed() ? 'Delivered' : 'Processing');
                                        @endphp
                                        <tr>
                                            <td><strong>{{ $order->number }}</strong></td>
                                            <td>{{ $order->totalQuantity() }}</td>
                                            <td>{{ $order->totalPoints() }}</td>
                                            <td><span class="{{ $statusMap[$statusLabel] }}">{{ $statusLabel }}</span></td>
                                            <td class="orders-date">
                                                {{ $order->created_at->format('M d, Y') }}
                                                <small>{{ $order->created_at->format('g:i A') }}</small>
                                            </td>
                                            <td>
                                                <a href="{{ route('catalog.order.show', $order->number) }}" class="orders-view">
                                                    View
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="py-8 text-center text-slate-500">{{ __('Catalog::theme.order.table.empty') }}</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    @parent
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            var ordersTable = $('#ordersTable').DataTable({
                paging: true,
                ordering: false,
                info: false,
                searching: true,
                lengthChange: false,
                pageLength: 10,
                autoWidth: false,
                responsive: false,
                dom: 'tp'
            });

            $('#ordersTable_filter').hide();

            var $wrapper = $('#ordersTable_wrapper');
            var $paginate = $wrapper.find('.dataTables_paginate');
            var $footer = $('<div class="orders-table-footer"></div>');
            var $summary = $('<div class="orders-table-footer__summary"></div>');

            $paginate.before($summary);
            $paginate.addClass('orders-table-footer__pagination');
            $paginate.add($summary).wrapAll($footer);

            $('#ordersSearch').on('input', function () {
                ordersTable.search(this.value).draw();
            });

            $('#ordersLength').on('change', function () {
                ordersTable.page.len(parseInt(this.value, 10)).draw();
            });

            function updateOrdersSummary() {
                var info = ordersTable.page.info();
                var start = info.recordsDisplay ? info.start + 1 : 0;
                var end = info.end;
                var total = info.recordsTotal;
                $summary.text('Showing ' + start + ' to ' + end + ' of ' + total + ' orders');
            }

            ordersTable.on('draw', updateOrdersSummary);
            ordersTable.columns.adjust().draw(false);
            updateOrdersSummary();
        });
    </script>
@endsection
