@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <span class="breadcrumb-item active">Tiendas</span>
</nav>

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Tiendas</h4>
        <h6 class="card-subtitle">Información y estadísticas.</h6>

        <table class="table table-hover" id="datatable_ajax">
            <thead>
                <tr>
                    <th>TIENDAS</th>
                    <th>CIUDAD</th>
                    <th>GRUPOS</th>
                </tr>
                <tr>
                    <td class="filter-0">
                        <div class="select">
                            <select class="form-control select2">
                                <option value="">Todas</option>
                                @foreach($tiendas as $t)
                                <option value="{{ $t->nombre }}">{{ $t->nombre }}</option>
                                @endforeach
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td class="filter-1"></td>
                    <td class="filter-2">
                        <div class="select">
                            <select class="form-control select2">
                                <option value="">Todas</option>
                                @foreach($grupos as $g)
                                <option value="{{ $g->nombre }}">{{ $g->nombre }}</option>
                                @endforeach
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                @foreach($tiendas as $t)
                <tr>
                    <td>
                        <a href="{{ url("tiendas/detalle/$t->id") }}" data-nombre="{{ $t->nombre }}">
                            {{ $t->nombre }}
                        </a>
                    </td>
                    <td>{{ $t->comuna->nombre }}</td>
                    <td>
                        @if(count($t->grupos) > 0)
                            @php 
                                $aux = '';
                            @endphp
                            @foreach($t->grupos as $g)
                                {{ $aux.$g->nombre }}
                                @php 
                                    $aux = ', '
                                @endphp
                            @endforeach
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function() {
    $.extend( true, $.fn.dataTable.defaults, datatables_simple);
    var table = $('#datatable_ajax').DataTable();
    buildSelect(table);

    $('#datatable_ajax_filter').remove();

    $('#datatable_ajax select').on('select2:select', function(e){
        table
            .column($(this).closest('td').index())
            .search($(this).val())
            .draw();
    });
});

function buildSelect(table){
    table.columns().every(function(i){
        if(i == 1){
            var column = table.column(this,{search: 'applied'} );
            var select = $('<div class="select"><select class="form-control select2"><option value="">Todas</option></select></div>')
                .appendTo($('.filter-'+i).empty());

            $('.filter-'+i).find('select').select2({dropdownAutoWidth:true,width:"100%"})

            column.data().unique().sort().each(function(d,j){
                $('.filter-'+i).find('select').append('<option value="'+d+'">'+d+'</option>');
            });
        }
    });
}
</script>
@endpush