@php
    use App\Enums\OrderStatus;
@endphp
@extends('layouts.admin', ['pageType' => 'orders'])
@section('content')
    @include('widgets/admin-error-handling')

    {{-- Are u sure popup modal delete --}}
    <div class="modal" tabindex="-1" role="dialog" id="areUSureModalDelete">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Biztos törölni szeretné a következő megrendelést:<br><span name="order"></span>
                    </h5>
                </div>
                <form action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-footer">
                        <button type="button" class="btn submit-button secondary" data-dismiss="modal">Mégse</button>
                        <button type="submit" class="btn submit-button">Töröl</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="custom-width mx-auto table-container">
        <div class="top-content">
            <div class="form-group selectpicker-container">
                <label for="status">Státusz:</label>
                <select id="status" name="status" class="selectpicker">
                    <option value="">Összes státusz</option>
                    @foreach (OrderStatus::options() as $val => $label)
                        <option value="{{ $val }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <table id="map-table" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Azonosító</th>
                    <th>Felhasználó</th>
                    <th>Státusz</th>
                    <th>Fizetett összeg (Ft)</th>
                    <th>Szállítási költség (Ft)</th>
                    <th>Műveletek</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript">
        var table;

        function deleteModel(element) {
            var id = element.getAttribute('data-id');
            var name = element.getAttribute('data-name');
            var url = "orders/" + id;
            $('#areUSureModalDelete form').attr('action', url);
            $('#areUSureModalDelete span[name="order"]').html(name);
        };

        $(document).ready(function() {
            $.fn.dataTableExt.oStdClasses.sWrapper = "dataTables_wrapper dt-bootstrap4 no-footer col";
            table = $('#map-table').DataTable({
                "dom": "<'row justify-content-between'<'col'l>r<'d-none d-xl-block'p><'col'f>><'row justify-content-center d-flex d-xl-none'p>t<'row justify-content-between'<'col'i>p<'col'>>",
                processing: true,
                serverSide: true,
                deferRender: true,
                ajax: 'orders/table',
                columns: [{
                        data: 'id',
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'user.name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'paid_price',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'shipping_price',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                "language": {
                    "lengthMenu": "Elemek száma oldalonként _MENU_",
                    "emptyTable": "A táblázat üres",
                    "zeroRecords": "Nincs találat",
                    "info": "Oldalszám: _PAGE_ / _PAGES_",
                    "search": "Keresés",
                    "infoEmpty": "Nincs megjelenítendő információ",
                    "paginate": {
                        "first": "Első",
                        "last": "Utolsó",
                        "next": "Következő",
                        "previous": "Előző"
                    },
                    "infoFiltered": "(Szűrve _MAX_ elem kozül)",
                },
                "order": [
                    [0, 'asc']
                ]
            });
        });

        $('#status').on('change', function() {
            var val = $(this).val();
            table.column(2).search(val).draw();
        });
    </script>
@endsection