@extends('layouts.index')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.css') }}">
@endsection
@section("contents")
<div class="row justify-content-center">
    <div class="col-12">
        <h2 class="h5 page-title"> Les commandes éffectuées </h2>
        <p class="text-muted"> La liste des commandes éffectuées </p>

        <div class="card shadow">
            <div class="card-body">
                <div class="row mb-4 items-align-center">
                    <div class="col-md">
                        <ul class="nav nav-pills justify-content-start">
                            <li class="nav-item">
                                <a class="btn btn-primary active pl-0 m-2 p-2 byStatus" data-status="All" href="#">Tous </a>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-warning active pl-0 m-2 p-2 byStatus" data-status="En attente" href="#">En attente </a>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-info active pl-0 m-2 p-2 byStatus" data-status="En traitement" href="#">En cours de traitement </a>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-success active pl-0 m-2 p-2 byStatus" data-status="Traitée" href="#">Traitée </a>
                            </li>
                            <li class="nav-item">
                                <a class="btn btn-danger active pl-0 m-2 p-2 byStatus" data-status="Annulée" href="#">Annulé</a>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="table-responsive pt-3">
                    <table class="table table-striped table-bordered " id="orderDataTable">
                        <thead>
                            <tr>
                                <th><strong> N° </strong></th>
                                <th><strong> Code Commande </strong></th>
                                <th><strong>Date Commande</strong></th>
                                <th><strong>Client</strong></th>
                                <th><strong>Total</strong></th>
                                <th><strong>Total Payer</strong></th>
                                <th><strong>Status</strong></th>
                                <th><strong>Action</strong></th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<!-- plugin js for this page -->
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/js/modules/order.js') }}"></script>
@endsection()