@extends('layouts.designer')
@php $page_title = 'Les Founisseurs Pipcke'; @endphp
@section('meta-title', 'Espace designers')
@section('meta-keywords', '')
@section('meta-description', '')
@section('style')

    <style>
        .dataTables_filter {
            float: right;
        }

        .dataTables_filter label input {
            margin-left: 10px;
        }

        .dataTables_info {
            float: left;
        }

        .dataTables_paginate {
            float: right;
        }

        .table th,
        .table td {
            vertical-align: middle !important;
        }

                table {
            margin: 0;
            width: 100%;
            table-layout: fixed;
            word-wrap: break-word;
        }

        .hover-content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="element-box">
                <div class="pull-right pb-20">
                    <button class="btn btn15 pull-right" data-target="#addFournisseurModalDes" data-toggle="modal"
                        type="button">Ajouter un fournisseur</button>
                </div>
                @include('front.designer.partials.addFournisseur')
                <div class="panel table-responsive">
                    <table id="dataTable2" class="table table-striped table-lightfont">
                        <thead>
                            <tr>
                                <th class="text-center font-weight-bold">Fournisseur</th>
                                <th id="cat" class="text-center font-weight-bold">Catégorie</th>
                                <th id="red" class="text-center font-weight-bold">Réduction</th>
                                <th id="gamme" class="text-center font-weight-bold">Gamme prix</th>
                                <th class="text-center font-weight-bold">Conditions</th>
                                <th id="piece" class="text-center font-weight-bold">Pièces</th>
                                <th id="produits" class="text-center font-weight-bold">Produits</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th>cat</th>
                                <th>red</th>
                                <th>gamme</th>
                                <th></th>
                                <th>piece</th>
                                <th>produits</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            @foreach ($fournisseurs as $f)
                                <tr>
                                    <td class="text-center">
                                        <a target="_blank" href="{{ $f->website }}" class="">{{ $f->name }}</a>
                                    </td>
                                    <td class="text-center">
                                        {{ $f->category }}
                                    </td>
                                    <td class="text-center">
                                        @if ($f->reduction)
                                            Oui
                                        @else
                                            Non
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        {{ $f->gammes }}
                                    </td>
                                    <td>
                                        @if (strlen($f->conditions) > 0)
                                            {!! nl2br($f->conditions) !!}
                                        @else
                                            ---
                                        @endif
                                    </td>
                                    @php
                                        $content_pieces = '';
                                        if (isset($f->piece) && is_array($f->piece)) {
                                            foreach ($f->piece as $key => $p) {
                                                if ($key != 0) {
                                                    $content_pieces .= ' - ';
                                                }
                                                $content_pieces .= trim($p);
                                            }
                                        }
                                    @endphp
                                    <td class="text-center hover-content" title="{{ $content_pieces }}">
                                        @if (isset($f->piece) && is_array($f->piece))
                                            @foreach ($f->piece as $key => $p)
                                                {{ trim($p) }}
                                            @endforeach
                                        @endif
                                    </td>
                                    @php
                                        $content_produits = '';
                                        if (isset($f->produits) && is_array($f->produits)) {
                                            foreach ($f->produits as $key => $p) {
                                                if ($key != 0) {
                                                    $content_produits .= ' - ';
                                                }
                                                $content_produits .= trim($p);
                                            }
                                        }
                                    @endphp
                                    <td class="text-center hover-content" title="{{ $content_produits }}">
                                        @if (isset($f->produits) && is_array($f->produits))
                                            @foreach ($f->produits as $key => $p)
                                                {{ trim($p) }}
                                            @endforeach
                                        @endif
                                    </td>
                                    {{-- <td align="center">
                                        <div>
                                            <div style="cursor: pointer;display: inline-block;"
                                                data-target="#des-fournisseur-update{{ $f->id }}"
                                                data-toggle="modal">
                                                <i class="fa fa-pencil"></i>
                                            </div>
                                            @include('front.designer.partials.updateFournisseur', $f)
                                            @if ($f->added_by == auth()->id())
                                                <div style="cursor: pointer; float:right;display: inline-block;padding-left: 15px;"
                                                    data-target="#des-fournisseur-delete{{ $f->id }}"
                                                    data-toggle="modal">
                                                    <i class="fa fa-trash"></i>
                                                </div>
                                                @include('front.designer.partials.deleteFournisseur', $f)
                                            @endif

                                        </div>
                                    </td> --}}
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection
@section('script')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    {{-- <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> --}}
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var side_menu = $('#side-menu');
            side_menu.animate({
                'margin-left': '-' + side_menu.css('width')
            }).addClass('out');
            $.ajax({
                url: '/api/side-menu/0'
            });

            var table = $('#dataTable2').DataTable({
                //   "order": [[ 0, "asc" ]],
                "pageLength": 100,
                "ordering": false,
                "autoWidth": false,
                "columnDefs": [{
                        "width": "10%",
                        "targets": 0
                    },
                    {
                        "width": "10%",
                        "targets": 1
                    },
                    {
                        "width": "8%",
                        "targets": 2
                    },
                    {
                        "width": "8%",
                        "targets": 3
                    },
                    {
                        "width": "22%",
                        "targets": 4
                    },
                    {
                        "width": "22%",
                        "targets": 5
                    },
                    {
                        "width": "20%",
                        "targets": 6
                    },
                ],
                language: {
                    "sProcessing": "Traitement en cours...",
                    "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"
                        }
                    }
                }
            });

            // $("#dataTable2 tfoot th").each(function(i) {

            //     if ($(this).text() !== '') {
            //         var isStatusColumn = (($(this).text() == 'Status') ? true : false);

            //         if ($(this).text() == 'cat') {
            //             var select = $(
            //                     '<select class="select-filter form-control text-center font-weight-bold" style="min-width: 125px;"><option value="">Catégorie</option></select>'
            //                 )
            //                 .appendTo($("#cat").empty())
            //                 .on('change', function() {
            //                     var val = $(this).val();
            //                     table.column(i)
            //                         .search(val ? '^' + $(this).val() + '$' : val, true, false)
            //                         .draw();
            //                 });
            //         } else {
            //             var select = $(
            //                     '<select class="select-filter form-control text-center font-weight-bold" style="min-width: 125px;"><option value="">Réduction</option></select>'
            //                 )
            //                 .appendTo($("#red").empty())
            //                 .on('change', function() {
            //                     var val = $(this).val();
            //                     table.column(i)
            //                         .search(val ? '^' + $(this).val() + '$' : val, true, false)
            //                         .draw();
            //                 });
            //         }
            //         $(this).empty();
            //         table.column(i).data().unique().sort().each(function(d, j) {
            //             select.append('<option value="' + d + '">' + d + '</option>');
            //         });

            //     }
            // });

            $("#dataTable2 tfoot th").each(function(i) {
                if ($(this).text() !== '') {
                    if ($(this).text() == 'piece' || $(this).text() == 'produits') {

                        if ($(this).text() == 'piece') {
                            var select = $(
                                    '<select class="select-filter form-control text-center font-weight-bold" ><option value="">Pièces</option></select>'
                                )
                                .appendTo($("#piece").empty())
                                .on('change', function() {
                                    var val = $(this).val();
                                    table.column(i)
                                        .search(val)
                                        .draw();
                                });
                        } else {
                            var select = $(
                                    '<select class="select-filter form-control text-center font-weight-bold" ><option value="">Produits</option></select>'
                                )
                                .appendTo($("#produits").empty())
                                .on('change', function() {
                                    var val = $(this).val();
                                    table.column(i)
                                        .search(val)
                                        .draw();
                                });
                        }
                        $(this).empty();
                        table.column(i).data().unique().sort().each(function(d, j) {
                            if (d) {
                                if (d.indexOf("\n") >= 0) {
                                    const myArray = d.split("\n");
                                    $.each(myArray, function(i, obj) {
                                        if (obj.indexOf("<br>") < 0) {
                                            select.append(
                                                '<option class="text-center" value="' +
                                                obj.replace('<br>,', '').trim() + '">' +
                                                obj
                                                .replace('<br>,', '').trim() +
                                                '</option>');
                                        }
                                    });
                                } else {
                                    select.append('<option class="text-center" value="' + d + '">' +
                                        d + '</option>');
                                }
                            }
                        });
                        var optionValues =[];
                        $('.select-filter:last option').each(function() {
                            if($.inArray(this.value, optionValues) >-1){
                                $(this).remove();
                            } else {
                                optionValues.push(this.value);
                            }
                        });
                    } else {
                        if ($(this).text() == 'cat') {
                            var select = $(
                                    '<select class="select-filter form-control text-center font-weight-bold" ><option value="">Catégorie</option></select>'
                                )
                                .appendTo($("#cat").empty())
                                .on('change', function() {
                                    var val = $(this).val();
                                    table.column(i)
                                        .search(val ? '^' + $(this).val() + '$' : val, true, false)
                                        .draw();
                                });
                        } else if ($(this).text() == 'red') {
                            var select = $(
                                    '<select class="select-filter form-control text-center font-weight-bold" ><option value="">Réduction</option></select>'
                                )
                                .appendTo($("#red").empty())
                                .on('change', function() {
                                    var val = $(this).val();
                                    table.column(i)
                                        .search(val ? '^' + $(this).val() + '$' : val, true, false)
                                        .draw();
                                });
                        } else {
                            var select = $(
                                    '<select class="select-filter form-control text-center font-weight-bold" ><option value="">Gamme prix</option></select>'
                                )
                                .appendTo($("#gamme").empty())
                                .on('change', function() {
                                    var val = $(this).val();
                                    table.column(i)
                                        .search(val ? '^' + $(this).val() + '$' : val, true, false)
                                        .draw();
                                });
                        }
                        $(this).empty();
                        table.column(i).data().unique().sort().each(function(d, j) {
                            select.append('<option class="text-center" value="' + d + '">' + d +
                                '</option>');
                        });

                    }
                }
            });
        });
    </script>
@endsection