@extends('layouts.dashboard.dashboard')
@push('css')
    <link href="{{asset('vendor/datatables/dataTables.bootstrap4.min.css')}}" rel="stylesheet">
@endpush
@push('js')
    <script src="{{asset('vendor/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('vendor/datatables/dataTables.bootstrap4.min.js')}}"></script>
    <script>
        $(document).ready(function() {
            $('#tableorder').DataTable({});
        });
    </script>
@endpush
@section('content')

   @component('card-component',['title'=>'orders'])
       @component('components.data-table',['tableID'=>"tableorder"])
           @slot('thead')
               <tr>
                   <th>@lang('main.id') </th>
                   <th>@lang('main.name')</th>
                   <th>@lang('main.email')</th>
                   <th>@lang('main.tattoo')</th>
                   <th>@lang('main.message')</th>
                   <th>@lang('main.status')</th>
               </tr>
           @endslot
           @slot('tbody')
               @foreach ($orders as $order)
                   <tr>
                       <td>{{$order->id}}</td>
                       <td>{{$order->name}}</td>
                       <td>{{$order->email}}</td>
                       <td><a href="{{route('shop_single_full',$order->tattoo)}}">{{$order->tattoo->name}}</a></td>
                       <td>{{$order->message}}</td>
                       <td>
                           @if (!$order->is_read)
                               <form name="toggleStatus{{$loop->index}}" action="{{route('dashboard.order.toggleStatus',$order)}}" method="post">@csrf</form>
                               <button onclick="confirm(' @lang('main.change_status') ')?toggleStatus{{$loop->index}}.submit():''" class="btn btn-sm  btn-danger ">{{__('main.mark_as_read')}}</button>
                           @else
                               <button type="button" class="btn-sm btn btn-success disabled">@lang('main.order_read')</button>
                           @endif
                       </td>
                   </tr>
               @endforeach
           @endslot

       @endcomponent
    @endcomponent


@stop