@extends('admin.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="element-box">
                    <div class="pull-right">
                        <a href="{{ route('admin.produit.export') }}" class="btn btn-primary">Exporter</a>
                    </div>
                    <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('admin.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>
                <div class="element-box">
                    <div class="row">
                        <div class="col-md-9"></div>
                        <div class="col-md-3">
                            <select class="form-control" id="selectProjectProducts" required="" name="selected_project">
                                <option value="">Sélectionnez un projet dans la liste</option>
                                {{-- <option value="0">---</option> --}}
                                @foreach ($projets as $p)
                                    <option value="{{ $p->id }}">
                                        {{ $p->id }} - {{ $p->nom ?? $p->espace }} -- ({{ $p->user->prenom ?? '' }}
                                        {{ $p->user->nom ?? '' }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <h5 class="form-header pt-0">
                        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('admin.partials.modals.produit', $produit)
                                    @include('admin.partials.modals.deleteproduit', $produit)
                                </td>
                            </tr>
                            @endforeach --}}
                            </tbody>
                        </table>
                    </div>
                    <div id="partialDataTable_container" class="table-responsive d-none">
                        <table id="partialDataTable" 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;">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
        integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
        integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
    <script type="text/javascript">
        $(document).ready(function() {
            function fnLoadDataTableInstance(dataSource) {
                $("#partialDataTable").dataTable().fnDestroy();
                $('#partialDataTable').DataTable({
                    "order": [
                        [0, "desc"]
                    ],
                    'aoColumnDefs': [{
                        'bSortable': false,
                        'aTargets': ['nosort']
                    }],
                    data: dataSource,
                    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"
                            }
                        }
                    }
                });

            }

            $('#selectProjectProducts').selectize({});

            $('#selectProjectProducts').on('change', function() {
                if (this.value) {
                    let data = {
                        id: this.value
                    };
                    $.ajax({
                        url: "/admin/produit/byproject",
                        type: "GET",
                        data: data,
                        success: function(data) {
                            if (data.success) {
                                $('#dataTableProducts_wrapper').addClass('d-none');
                                $('#partialDataTable_container').removeClass('d-none');
                                fnLoadDataTableInstance(data.products ?? []);
                            }
                        }
                    });
                } else {
                    $('#dataTableProducts_wrapper').removeClass('d-none');
                    $('#partialDataTable_container').addClass('d-none');
                }
            });


            $('#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('admin.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