@extends('master', ['activePage' => 'movimientos'])
@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{asset('css/filter_multi_select.css')}}" />
@endsection

@section('content')

    <section class="content-header">
        <div class="contianer-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1>Movimientos</h1>
              </div>
              <div class="col-sm-6 text-right">
                <a class="btn btn-info" href="{{ url('contenedor/crear-movimiento') }}"><i class="fa fa-plus-circle"></i> Crear Movimiento </a>
              </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="contianer-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-secondary">
                        <div class="card-header">
                            <h3 class="card-title">Registro de movimientos</h3>
                        </div>
                        <!-- /.card-header -->
                        
                        <div class="card-body">

                            {{-- Filtros --}}
                            <form action="{{url('contenedores/movimientos')}}">
                                <div class="row filters">
                                    <div class="col">
                                        <input type="text" class="form-control" id="daterange" value="{{$start.' - '. $end}}" />
                                        <input type="hidden" name="start" value="{{$start}}">
                                        <input type="hidden" name="end" value="{{$end}}">
                                    </div>
                                    <div class="col">
                                        <select multiple name="clients[]" id="clients" class="form-control">
                                            @foreach($clients as $client)   
                                                <option value="{{$client->id}}" {{$client->selected ? 'selected' : '' }}>{{$client->client}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <input type="submit" value="Filtrar" class="btn btn-success">
                                    </div>
                                </div>
                            </form>
                            <hr>

                            <table id="movements" class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Movimiento</th>
                                        <th>Cliente</th>
                                        <th>Contenedor</th>
                                        <th>Direccion</th>
                                        <th>Locación</th>
                                        <th>Material</th>
                                        <th>Fecha</th>
                                        <th>Días sin movimientos</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($movements as $movement)
                                    <tr class="{{ Request::get('id') == $movement->id ? 'bg-info' : '' }}">
                                        <td>{{ $movement->id }}</td>
                                        <td>
                                            @if($movement->movement_type == 'Entrada')
                                                <span class="badge badge-primary">{{$movement->movement_type}}</span>
                                            @else
                                                <span class="badge badge-success">{{$movement->movement_type}}</span>
                                            @endif
                                        </td>
                                        <td>{{ $movement->client  }}</td>
                                        <td>{{ $movement->name.' ('.$movement->number.')' }}</td>
                                        <td>{{ $movement->address }}</td>
                                        <td>En {{ $movement->type }}</td>
                                        <td>En {{ $movement->material }}</td>
                                        <td>{{ $movement->created_at }}</td>
                                        <td><b>{{ Carbon\Carbon::parse($movement->created_at)->diffForHumans() }}</b></td>
                                        <td>
                                            <a class="{{ Request::get('id') == $movement->id ? 'text-white' : '' }}" href="{{ url('/contenedor/ver-movimiento/'.$movement->id) }}"><i class="fa fa-edit"></i> Ver movimiento</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    <!-- /.card-body -->
                    </div>
                </div>
            <!-- /.col -->
            </div>
        <!-- /.row -->
      </div>
      <!-- /.contianer-fluid -->
    </section>

    {{-- Desactivar --}}
    <div class="modal fade" id="deactivate-movement">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 clss="modal-title">Desactivar contenedor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Deseas desactivar al contenedor <b><span id="movement-name"></span></b>?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <form action="{{ url('movement/deactivate') }}" method="POST">
                        @csrf
                        <input type="hidden" name="id_deactivate" id="id_deactivate">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-danger">Aceptar</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    {{-- Activar --}}
    <div class="modal fade" id="activate-movement">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 clss="modal-title">Activar contenedor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Deseas activar al contenedor <b><span id="activate-movement-name"></span></b>?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <form action="{{ url('movement/activate') }}" method="POST">
                        @csrf
                        <input type="hidden" name="id_activate" id="id_activate">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-danger">Aceptar</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
@endsection

@section('scripts')
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="{{asset('js/filter-multi-select-bundle.min.js')}}"></script>
    <script>
        $(function(){
            
            $('#daterange').daterangepicker(
                {
                    // opens: 'left'
                    "locale": {
                        "format": "DD-MM-YYYY",
                        "separator": " - ",
                        "applyLabel": "Aplicar",
                        "cancelLabel": "Cancelar",
                        "fromLabel": "Del",
                        "toLabel": "Al",
                        "customRangeLabel": "Custom",
                        "daysOfWeek": [
                            "D",
                            "L",
                            "M",
                            "X",
                            "J",
                            "V",
                            "S"
                        ],
                        "monthNames": [
                            "Enero",
                            "Febrero",
                            "Marzo",
                            "Abril",
                            "Mayo",
                            "Junio",
                            "Julio",
                            "Agosto",
                            "Septiembre",
                            "Octubre",
                            "Noviembre",
                            "Diciembre"
                        ],
                        "firstDay": 1
                    }
                }, 
                function(start, end, label) {
                    $('input[name="start"]').val(start.format('DD-MM-YYYY'));
                    $('input[name="end"]').val(end.format('DD-MM-YYYY'));
                }
            );

            clients = $('#clients').filterMultiSelect({
                // displayed when no options are selected
                placeholderText: "Selecciona al menos un cliente",
                // placeholder for search field
                filterText: "Buscar",
                // Select All text
                selectAllText: "Seleccionar Todos",

                // determine if is case sensitive
                caseSensitive: false,

                // allows the user to disable and enable options programmatically
                allowEnablingAndDisabling: true
            });




            $('#movements').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "responsive": true,
            });

            //  Deshabilitar contenedor
            $('.deactivate-movement').on('click', function(){
                var id = $(this).data('id');
                var name = $(this).data('name');
                $('#id_deactivate').val(id);
                $('#movement-name').text(name);
            });

            //  Habilitar contenedor
            $('.activate-movement').on('click', function(){
                var id = $(this).data('id');
                var name = $(this).data('name');
                $('#id_activate').val(id);
                $('#activate-movement-name').text(name);
            });

        });
    </script>
@endsection