@extends('master', ['activePage' => 'refacciones'])
@section('styles')

@endsection

@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1>Refacciones</h1>
              </div>
              <div class="col-sm-6 text-right">
                <a class="btn btn-info" href="{{ url('refaccion/crear') }}"><i class="fa fa-plus-circle"></i> Crear Refacción </a>
              </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-secondary">
                        <div class="card-header">
                            <h3 class="card-title">Listado de Refacciones</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="repairs" class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        
                                        <th>ID</th>
                                        <th>Pieza</th>
                                        <th># Pieza</th>
                                        <th>Costo</th>
                                        <th>Inventario</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($repairs as $repair)
                                    <tr class="{{ Request::get('id') == $repair->id ? 'bg-info' : '' }} {{$repair->stock <= $repair->warning ? 'bg-warning' : '' }} {{$repair->stock == 0 ? 'bg-danger' : '' }}">
                                        <td>{{ $repair->id }}</td>
                                        <td>{{ $repair->piece  }}</td>
                                        <td>{{ $repair->number }}</td>
                                        <td>{{ $repair->cost }}</td>
                                        <td>{{ $repair->stock }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                  Acciones
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                    <a 
                                                        class="dropdown-item edit-repair" 
                                                        href="#"
                                                        data-toggle="modal" 
                                                        data-target="#edit-repair"
                                                        data-id="{{ $repair->id }}"
                                                        data-name="{{ $repair->piece }}"
                                                        data-number="{{ $repair->number }}"
                                                        data-cost="{{ $repair->cost }}"
                                                        data-stock="{{ $repair->stock }}"
                                                        data-warning="{{ $repair->warning }}"
                                                    ><i class="fa fa-edit"></i> Editar</a>
                                                </div>
                                              </div>

                                        </td>
                                        
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    <!-- /.card-body -->
                    </div>
                </div>
            <!-- /.col -->
            </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>

    {{-- Editar --}}
    <div class="modal fade" id="edit-repair">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 clss="modal-title">Editar refacción</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ url('repair/update') }}" method="POST">
                        @csrf
                        <input type="hidden" name="id_repair" id="id-repair">
                        <div class="form-group">
                            <label>Nombre de la refacción</label>
                            <input type="text" name="name" value="" class="form-control" id="edit-repair-name">
                        </div>
                        <div class="form-group">
                            <label># de la refacción</label>
                            <input type="text" name="number" value="" class="form-control" id="edit-repair-number">
                        </div>
                        <div class="form-group">
                            <label>Costo</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">$</span>
                                </div>
                                <input type="text" name="cost" value="" class="form-control" id="edit-repair-cost">
                            </div>
                        </div>
                        <div class="form-grpoup">
                            <label>Inventario</label>
                            <input type="text" name="stock" value="" class="form-control" id="edit-repair-stock">
                        </div>
                        <div class="form-grpoup">
                            <label>Aviso de inventario escaso:</label>
                            <input type="text" name="warning" value="" class="form-control" id="edit-repair-warning">
                        </div>
                </div>
                <div class="modal-footer justify-content-between">
                        <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>
        $(function(){
           
            $('#repairs').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });

            //  Editar refaccion
            $('.edit-repair').on('click', function(){
                var id = $(this).data('id');
                var name = $(this).data('name');
                var number = $(this).data('number');
                var cost = $(this).data('cost');
                var stock = $(this).data('stock');
                var warning = $(this).data('warning');
                
                $('#id-repair').val(id);
                $('#edit-repair-name').val(name);
                $('#edit-repair-number').val(number);
                $('#edit-repair-cost').val(cost);
                $('#edit-repair-stock').val(stock);
                $('#edit-repair-warning').val(warning);
            });

        });
    </script>
@endsection