@extends('layout')

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

<header class="content__title">
    <h1>Reporte de Retiros</h1>
    <small>Retiros realizados en tiendas</small>
    <div class="actions">
        <a href="#" class="actions__item zmdi zmdi-download descargar-excel"></a>
        <a href="/reporte-retiros" class="actions__item zmdi zmdi-refresh-alt"></a>
    </div>
</header>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group mb-0">
                    <label>Grupo</label>
                    <div class="select">
                        <select id="grupo" class="form-control select2">
                            <option value="">Todos</option>
                            @foreach($grupos as $g)
                            <option value="{{ $g->id }}">{{ $g->nombre }}</option>
                            @endforeach
                        </select>
                        <i class="form-group__bar"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group mb-0">
                    <label>Rango de fechas ventas</label><br>
                    <div class="input-group mb-0">
                        <input type="text" class="form-control form-filter fecha-rango pl-1" placeholder="" autocomplete="off" data-fi="{{ $fecha_inicio }}" data-ft="{{ $fecha_termino }}">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
                        </div>
                    </div>
                    <i class="form-group__bar"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Resumen de tiendas</h4>
                <h6 class="card-subtitle">Consolidado de ventas</h6>
            </div>
            <div class="card-body">
                <table class="table table-hover table-sm mb-0">
                    <thead>
                    <tr class="thead-light">
                        <th>TIENDAS</th>
                        <th class="text-right">MONTO</th>
                    </tr>
                    </thead>
                    <tbody>
                        @php
                            $total = 0
                        @endphp
                        @foreach($tiendas as $t)
                        @php
                            $total += $t->total
                        @endphp
                        <tr>
                            <td>{{ $t->nombre }}</td>
                            <td class="text-right">${{ number_format($t->total,0,'.','.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <thead>
                        <tr>
                            <th>TOTAL</th>
                            <th class="text-right text-cyan font-weight-bold lead">${{ number_format($total,0,'.','.') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    {{-- <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Estadísticas retiros</h4>
                <h6 class="card-subtitle">Últimos 12 meses </h6>
            </div>
            <div class="card-body">
                <div class="flot-chart flot-line"></div>
                <div class="flot-chart-legends flot-chart-legends--line"></div>
            </div>
        </div>
    </div> --}}
    
</div>
@endsection

@push('scripts')
<script type="text/javascript">
$(function() {
    var parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo={{$grupo}}";

    $('.fecha-rango').change(function(){
        var fecha_inicio = $(this).data('daterangepicker').startDate.format('DD/MM/YYYY');
        var fecha_termino = $(this).data('daterangepicker').endDate.format('DD/MM/YYYY');
        parametros_url = "fi="+fecha_inicio+"&ft="+fecha_termino+"&grupo={{$grupo}}";
        window.location.href = '/reporte-retiros?' + parametros_url;
    });

    @if($grupo)
    if($('#grupo option[value="'+{{ $grupo }}+'"]')[0])
        $('#grupo').val({{ $grupo }}).trigger('change');
    @endif

    $('#grupo').on('select2:select', function(){
        parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo="+$(this).val();
        window.location.href = '/reporte-retiros?' + parametros_url;
    });

    $('.descargar-excel').click(function(e){
        e.preventDefault();
        window.location.href = '/excel-retiros?' + parametros_url;
    });
});
</script>
@endpush