@extends('admin.layouts.master')
@section('title') Aramian Brother`s Jewelry @endsection

@section('content')
@include('admin.layouts.topbar')
@include('admin.layouts.sidebar')
<script type='text/javascript'>

    (function()
    {
      if( window.localStorage )
      {
        if( !localStorage.getItem('firstLoad') )
        {
          localStorage['firstLoad'] = true;
          window.location.reload();
        }  
        else
          localStorage.removeItem('firstLoad');
      }
    })();
    
</script>
{{-- <div id="app"> --}}
                    
    {{-- <style type="text/css"></style> --}}
<main id="main" class="p-4">
    <section class="content-header clearfix">
        <h1>Orders <small>List</small></h1>

        <!-- breadcrumb start -->
        <nav aria-label="breadcrumb" class="breadcrumb-nav">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('adminpanel.home')}}"><i class="icon-home"></i>Home</a></li>
                <li class="breadcrumb-item">
                    <a href="{{route('adminpanel.orders.index')}}">
                        Orders
                    </a>
                </li>
            </ol>
        </nav>
    </section>
    
    <section class="content">
        <div class="row"><div class="col-md-12"><div class="card p-0">
            <div class="with-border collapse  filter-box" id="filter-box">
                <form action="http://aramyanbrothers.loc/admin/orders" class="form pt-0 form-horizontal has-ajax-handler" pjax-container="" method="get" autocomplete="off">
                    <div class="row mb-0">
                        <div class="col-md-12">
                            <div class="card-body">
                                <div class="fields-group">
                                    <div class="form-group row">
                                        <label class="col-sm-2 form-label"> ID</label>
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <div class="input-group-text with-icon">
                                                    <i class="icon-pencil-alt"></i>
                                                </div>
                                                <input type="text" class="form-control id" placeholder="ID" name="id" value="">
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="btn-group pull-left">
                                            <button class="btn btn-primary submit btn-sm"><i class="icon-search"></i>&nbsp;&nbsp;Search</button>
                                        </div>
                                        <div class="btn-group pull-left " style="margin-left: 10px;">
                                            <a href="{{route('adminpanel.orders.index')}}" class="btn btn-light btn-sm"><i class="icon-undo"></i>&nbsp;&nbsp;Reset</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="table-responsive" autocomplete="off">
                <table class="table grid-table table-sm table-hover select-table" id="grid-table66e4a62e5a02b">
                    <thead>
                        <tr>
                            {{-- <th class="column-__row_selector__"> <input type="checkbox" class="grid-select-all form-check-input" onchange="admin.grid.select_all(event,this)" id="grid-select-all">&nbsp;</th> --}}
                            <th class="column-serial">N<u>o</u></th>
                            <th class="column-status">Status</th>
                            <th class="column-created_at">Created at</th>
                            <th class="column-full_name">Full Name</th>
                            <th class="column-address">Address</th>
                            <th class="column-country">Country</th>
                            <th class="column-state">State</th>
                            <th class="column-__actions__">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($checkout as $checkoutData)
                            <tr data-key="{{$checkoutData->id}}" class="row-{{$checkoutData->id}}">
                                <td class="column-serial">{{$loop->iteration}}</td>
                                <td class="column-status">{{$checkoutData->delivery_status}}</td>
                                <td class="column-created_at">{{$checkoutData->created_at}}</td>
                                <td class="column-full_name">{{$checkoutData->full_name}}</td>
                                <td class="column-address">{{$checkoutData->address}}</td>
                                <td class="column-country">{{$checkoutData->country->name}}</td>
                                <td class="column-country">{{$checkoutData->state->name}}</td>
                                <td class="column-__actions__">
                                    <div class="__actions__div" style="padding-right:5.75rem !important; margin-top: -1rem">
                                        <a href="{{route('adminpanel.orders.show', $checkoutData->id)}}" class="" >
                                            <i class="icon-eye"></i><span class="label">Show</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- @include('admin.layouts.footer') --}}

            <footer class="navbar navbar-light bg-white py-3 px-4 shadow fixed-bottom ">
                <div class="flex-grow-1">Showing <b>1</b> to <b>1</b> of <b>1</b> entries</div>
                <div class="pe-2">
                    <label class="form-group pull-right d-flex align-items-center" style="margin-right: 10px; font-weight: 100;">
                        <small>Show</small>&nbsp;
                        <select class="form-select form-select-sm grid-per-pager" name="per-page">
                            <option value="http://aramyanbrothers.loc/admin/orders?per_page=10">10</option>
                            <option value="http://aramyanbrothers.loc/admin/orders?per_page=20" selected="">20</option>
                            <option value="http://aramyanbrothers.loc/admin/orders?per_page=30">30</option>
                            <option value="http://aramyanbrothers.loc/admin/orders?per_page=50">50</option>
                            <option value="http://aramyanbrothers.loc/admin/orders?per_page=100">100</option>
                        </select>
                        &nbsp;<small>entries</small>
                    </label>
                </div>
                <div>
                    <ul class="pagination pagination-sm no-margin pull-right">
                            <!-- Previous Page Link -->
                        <li class="page-item disabled"><span class="page-link">«</span></li>
                            <!-- Pagination Elements -->
                            <!-- "Three Dots" Separator -->

                            <!-- Array Of Links -->
                        <li class="page-item active"><span class="page-link">1</span></li>
                            <!-- Next Page Link -->
                        <li class="page-item disabled"><span class="page-link">»</span></li>
                    </ul>
                </div>
            </footer>
        </div>
        <!-- /.box-body -->
        {{-- </div></div> --}}
    </section>
</main>
{{-- </div> --}}