@extends('super-designer.layouts.default')
@section('style')
    <style>
        .select-filter {
            background-color: #fff;
            background-clip: padding-box;
            border: 2px solid #dde2ec;
            text-transform: uppercase;
            color: #3E4B5B;
            font-size: 0.63rem !important;
            height: 30px;
        }

        .flash {
            position: absolute !important;
            top: 0;
            width: 90%;
        }
        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="content-i">
        <div class="content-box">
            <div class="element-wrapper">
                <div class="element-box">
                    <div class="pull-right">
                        <a href="{{ route('super-designer.fournisseurs.export') }}" class="btn btn-primary">Exporter</a>
                        <button class="btn btn-primary pull-right" data-target="#ajoutFournisseurModal" data-toggle="modal"
                            type="button">Ajouter un fournisseur</button>
                    </div>
                    @include('super-designer.partials.modals.ajoutFournisseur')
                    <h5 class="form-header">
                        Liste des fournisseurs
                    </h5>
                    <div class="table-responsive">
                        <table id="dataTable2" class="table table-striped table-lightfont" style="width: 100%">
                            <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 class="text-center font-weight-bold">Affiliation</th>
                                    <th class="text-center font-weight-bold">Conditions</th>
                                    <th class="text-center font-weight-bold">Remarques</th>
                                    <th id="piece" class="text-center font-weight-bold">Pièces</th>
                                    <th id="produits" class="text-center font-weight-bold">Produits</th>
                                    <th id="gamme" class="text-center font-weight-bold">Gamme prix</th>
                                    <th class="text-center font-weight-bold">Date d'ajout</th>
                                    <th class="text-center font-weight-bold">Action</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>cat</th>
                                    <th>red</th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th>piece</th>
                                    <th>produits</th>
                                    <th>gamme</th>
                                    <th></th>
                                    <th></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" style="overflow-wrap: anywhere;">
                                            @if ($f->aff_code)
                                                {{ $f->aff_code }}
                                            @else
                                                ---
                                            @endif
                                        </td>
                                        <td style="overflow-wrap: anywhere;">
                                            @if (strlen($f->conditions) > 0)
                                                {!! nl2br($f->conditions) !!}
                                            @else
                                                ---
                                            @endif
                                        </td>
                                        <td style="overflow-wrap: anywhere;">
                                            {!! nl2br($f->remarks) !!}
                                        </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 class="text-center">
                                            {{ $f->gammes }}
                                        </td>
                                        <td class="text-center">
                                            {{ $f->created_at->format('d-m-Y') }}
                                        </td>
                                        <td class="text-center">
                                            <div>
                                                <div class="btn btn-sm btn-primary"
                                                    data-target="#super-fournisseur-update{{ $f->id }}"
                                                    data-toggle="modal"><i class="fa fa-pencil"></i></div>
                                                @include('super-designer.partials.modals.updateFournisseur', $f)
                                                <br>
                                                <div style="margin-top: 5px; margin-bottom : 5px;"
                                                    class="btn btn-sm btn-danger"
                                                    data-target="#fournisseur-supp{{ $f->id }}"
                                                    data-toggle="modal"><i class="fa fa-trash"></i></div>
                                                <br>
                                                @include('super-designer.partials.modals.suppFournisseur', $f)
                                                <div>
                                                    @if ($f->status == 1)
                                                        <a href="{{ route('super-designer.fournisseurs.set_to_display', $f->id) }}"
                                                            class="btn m-0 btn-sm btn-danger"><i class="fa fa-lock"></i></a>
                                                    @else
                                                        <a href="{{ route('super-designer.fournisseurs.set_to_display', $f->id) }}"
                                                            class="btn m-0 btn-sm btn-success"><i
                                                                class="fa fa-unlock"></i></a>
                                                    @endif
                                                </div>
                                            </div>

                                        </td>
                                    </tr>
                                @endforeach
                            </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>
        $(document).ready(function() {
            $('.select-category').selectize({});
            $('.select-reduction').selectize({});
            $('.select-piece').selectize({});
            $('.select-produits').selectize({});

            var table = $('#dataTable2').DataTable({
                "pageLength": 100,
                //   "order": [[ 0, "asc" ]],
                "ordering": false,
                "autoWidth": false,
                "columnDefs": [{
                        "width": "5%",
                        "targets": 0
                    },
                    {
                        "width": "9%",
                        "targets": 1
                    },
                    {
                        "width": "7%",
                        "targets": 2
                    },
                    {
                        "width": "7%",
                        "targets": 3
                    },
                    {
                        "width": "14%",
                        "targets": 4
                    },
                    {
                        "width": "16%",
                        "targets": 5
                    },
                    {
                        "width": "13%",
                        "targets": 6
                    },
                    {
                        "width": "13%",
                        "targets": 7
                    },
                    {
                        "width": "4%",
                        "targets": 8
                    },
                    {
                        "width": "5%",
                        "targets": 9
                    },
                    {
                        "width": "4%",
                        "targets": 10
                    }
                ],
                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() !== '') {
                    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éd</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</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