@extends('super-designer.layouts.default')
@section('style')
    <style>
        #loader {
            border: 8px solid #f6ded3;
            /* Light grey */
            border-top: 8px solid #0e6b8a;
            /* Blue */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <div class="content-i">
        <div class="content-box">
            <div class="element-wrapper">
                <div class="btn btn-xsm btn-primary text-white " id="btnAddProduct">Ajouter Produit</div>
                <div class="element-box d-none mt-4" id="add-product">
                    <form action="{{ route('super-designer.produit.add') }}" method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-4">
                                <label for="">Photo *</label>
                                <br>
                                <input type="file" name="photo" id="photo" required="" class="inputfile" />
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Nom *</label>
                                    <input type="text" class="form-control" required="" name="nom">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Marque *</label>
                                    <input type="text" class="form-control" required="" name="marque">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Référence *</label>
                                    <input type="text" class="form-control" required="" name="reference">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Source *</label>
                                    <input type="url" class="form-control" required="" name="source">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Prix affiché (€ TTC)</label>
                                    <input type="number" class="form-control" name="prix">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Largeur (cm)</label>
                                    <input type="text" class="form-control" name="largeur">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Hauteur (cm)</label>
                                    <input type="text" class="form-control" name="hauteur">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Profondeur (cm)</label>
                                    <input type="text" class="form-control" name="profondeur">
                                </div>
                            </div>
                            <div class="col-md-12 text-right">
                                <button class="btn btn-xsm btn-primary" type="submit">Ajouter</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="element-box">
                    <h5 class="form-header">
                        Liste des produits
                    </h5>
                    <div class="table-responsive">
                        <table id="dataTableProducts" class="table table-striped table-lightfont">
                            <thead>
                                <tr>
                                    <th width="25">Id</th>
                                    <th width="100">Photo</th>
                                    <th width="150">Nom</th>
                                    <th>Marque</th>
                                    <th>Fournisseur</th>
                                    <th>Référence</th>
                                    <th>Source</th>
                                    <th>Prix Public</th>
                                    <th>Prix Pipcke</th>
                                    <th width="30">L.</th>
                                    <th width="30">H.</th>
                                    <th width="30">P.</th>
                                    <th width="75">Date</th>
                                    <th width="75" class="nosort">Projet</th>
                                    <th width="100" class="nosort">Action</th>
                                </tr>
                            </thead>
                            <tbody style="font-size: 12px;">
                                {{-- @foreach ($produits as $produit)
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                    @include('super-designer.partials.modals.produit', $produit)
                                    @include('super-designer.partials.modals.deleteproduit', $produit)
                                </td>
                            </tr>
                            @endforeach --}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnAddProduct').click(function(event) {
                $('#add-product').toggleClass('d-none');
            });
            $('#dataTableProducts').DataTable({
                "order": [
                    [0, "desc"]
                ],
                'aoColumnDefs': [{
                    'bSortable': false,
                    'aTargets': ['nosort']
                }],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    "url": "{{ route('super-designer.produit.paginate') }}",
                    "type": "POST"
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'photo'
                    },
                    {
                        data: 'nom'
                    },
                    {
                        data: 'marque'
                    },
                    {
                        data: 'fournisseur'
                    },
                    {
                        data: 'reference'
                    },
                    {
                        data: 'source'
                    },
                    {
                        data: 'prix'
                    },
                    {
                        data: 'prix_pipcke'
                    },
                    {
                        data: 'largeur'
                    },
                    {
                        data: 'hauteur'
                    },
                    {
                        data: 'profondeur'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'projet'
                    },
                    {
                        data: 'action'
                    },
                ],
                language: {
                    "sProcessing": "<div id='loader'></div>",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                    },
                    "select": {
                        "rows": {
                            _: "%d lignes séléctionnées",
                            0: "Aucune ligne séléctionnée",
                            1: "1 ligne séléctionnée"
                        }
                    }
                }
            });
        });
    </script>
@endsection