@extends('adminlte::page')

@section('title', 'Orders')

@section('content_header')
    <x-adminlte-alert theme="success" title="Success" class="success-alert" style="display: none" dismissable>
        <p class="success"></p>
    </x-adminlte-alert>
    <x-adminlte-alert theme="danger" title="Error" class="error-alert" style="display: none" dismissable>
        <p class="error"></p>
    </x-adminlte-alert>
@if (isset($isNotOldOrder) && $isNotOldOrder == false)
<x-adminlte-alert theme="danger" title="Error" class="error-alert" dismissable>
        <p class="error">Orders older than 60 days are no longer accessible.</p>
    </x-adminlte-alert>

@endif

    <div id="overlay_main" class="overlay_main"
        style="display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;z-index: 9999;">
        <svg id="loader" width="100" height="100" version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100"
            enable-background="new 0 0 100 100" xml:space="preserve">
            <circle fill="none" stroke="#0f0f0f" stroke-width="6" stroke-miterlimit="15"
                stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 50 50"
                    to="360 50 50" repeatCount="indefinite" />
            </circle>
            <circle fill="none" stroke="#0f0f0f" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10"
                cx="50" cy="50" r="39">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 50 50"
                    to="-360 50 50" repeatCount="indefinite" />
            </circle>
            <g fill="#0f0f0f">
                <rect x="30" y="35" width="5" height="30">
                    <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite" begin="0.1" />
                </rect>
                <rect x="40" y="35" width="5" height="30">
                    <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite" begin="0.2" />
                </rect>
                <rect x="50" y="35" width="5" height="30">
                    <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite" begin="0.3" />
                </rect>
                <rect x="60" y="35" width="5" height="30">
                    <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite" begin="0.4" />
                </rect>
                <rect x="70" y="35" width="5" height="30">
                    <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5"
                        repeatCount="indefinite" begin="0.5" />
                </rect>
            </g>
        </svg>
    </div>
    @include('order')
@stop

@section('content')

    <button id="bulkActionButton" onclick="performBulkAction()" class="btn btn-primary" style="display:none;">Cancel
        Selected Deliveries</button>
@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugin', true)
<x-adminlte-card theme="lime" theme-mode="outline" class="col-sm-12" id="tapuzForm">

    <x-adminlte-datatable id="table2" :heads="$heads" :config="$config" hoverable with-buttons />

</x-adminlte-card>
@stop

@section('adminlte_css_pre')
<meta name="shopify-api-key" content="{{ config('shopify-app.api_key') }}" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
@stop

@section('css')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<!-- Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
@stop

@section('js')
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<!-- Buttons JS -->
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script>
    var shop = "";
</script>
<script src="{{ asset('js/tapuz.js') }}?v={{ time() }}"></script>

@stop