@extends('layouts.base')

@section('title', 'Commande client')


@section('content')

    <div class="container-fluid">

        <div class="row">
            <!-- Column -->
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-row">
                            <div
                                class="round round-lg text-white d-inline-block text-center rounded-circle bg-indigo-500">
                                <i class="ti-shopping-cart"></i>
                            </div>
                            <div class="ml-2 align-self-center">
                                <h3 class="mb-0 font-weight-light">{{ $element->quantity }}</h3>
                                <h5 class="text-muted mb-0">Quantité commandé</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-row">
                            <div
                                class="round round-lg text-white d-inline-block text-center rounded-circle bg-warning">
                                <i class="ti-shopping-cart-full"></i></div>
                            <div class="ml-2 align-self-center">
                                <h3 class="mb-0 font-weight-light">{{ optional($element->stock)->quantity ?? 0 }}</h3>
                                <h5 class="text-muted mb-0">Quantité en stock</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-row">
                            <div
                                class="round round-lg text-white d-inline-block text-center rounded-circle bg-success">
                                <i class="ti-hummer"></i></div>
                            <div class="ml-2 align-self-center">
                                <h3 class="mb-0 font-weight-light">{{ (optional($element->stock)->quantity ?? 0) - $element->quantity }}</h3>
                                <h5 class="text-muted mb-0">Reste a produire</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex flex-row">
                            <div
                                class="round round-lg text-white d-inline-block text-center rounded-circle bg-primary">
                                <i class="ti-calendar"></i></div>
                            <div class="ml-2 align-self-center">
                                <h3 class="mb-0 font-weight-light">{{ $element->date->format('d M Y') }}</h3>
                                <h5 class="text-muted mb-0">Date de commande</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
        </div>

        <!-- Row -->
        <div class="row">
            <div class="col-12 col-md-12">
                <div class="card">
                    <div class="card-header bg-success">
                        <h4 class="mb-0 text-white text-uppercase text-center font-weight-bold">Produits commandé</h4></div>
                    <div class="card-body">
                        {{ $element->product->name }}
                    </div>
                </div>
            </div>
            <!-- Column -->
            <div class="col-12 col-md-8">
                <div class="card">
                    <div class="card-header bg-success">
                        <h4 class="mb-0 text-white text-uppercase text-center font-weight-bold">Production</h4></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table" class="display nowrap table table-hover table-striped table-bordered"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                   <th>Date</th>
                                   <th>Produit</th>
                                   <th>Prevu</th>
                                   <th>Réalisé</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>Date</th>
                                    <th>Produit</th>
                                    <th>Prevu</th>
                                    <th>Réalisé</th>
                                </tr>
                                </tfoot>
                                <tbody>
                                @foreach($element->productions as $production)
                                    <tr>
                                        <td>{{ $production->product_at->format('d M Y') }}</td>
                                        <td>{{ $production->product->name }}</td>
                                        <td>{{ $production->planned }}</td>
                                        <td>{{ $production->achieve }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card">
                    <div class="card-header bg-success">
                        <h4 class="mb-0 text-white text-uppercase text-center font-weight-bold">Clients</h4></div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table" class="display nowrap table table-hover table-striped table-bordered"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th>Nom</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>Nom</th>
                                </tr>
                                </tfoot>
                                <tbody>
                                @foreach($element->customers as $customer)
                                    <tr>
                                        <td>{{ $customer->name }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Row -->
    </div>

@endsection

@section('javascripts')

    <!-- This is data table -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <!-- end - This is for export functionality only -->
    <script>
        $('#table').DataTable({
            dom: 'Bfrtip',
            "columnDefs": $('#table > thead > tr > th').map((i, el) => {
                return { "searchable": !$(el).hasClass('not-export'), "targets": i };
            }),
            buttons: [
                // 'copy', 'csv', 'excel', 'pdf', 'print'
            ].map((button) => {
                return {
                    extend: button,
                    exportOptions: {
                        columns: ':not(.not-export)'
                    }
                };
            }),
            @if (app()->getLocale() != 'en')
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
            @endif
        });
    </script>

    <!-- Magnific popup JavaScript -->
    <script src="{{ asset('assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js') }}"></script>

@endsection