@extends('layout')

@section('starplugin')
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        
        <!-- END PAGE LEVEL PLUGINS -->
@endsection

@section('content')
<!-- ---------------------------------------------------------- -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <!-- BEGIN PAGE BAR -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="#">Inicio</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Comercios</span>
                    </li>
                </ul>
            </div>
            <!-- END PAGE BAR -->
            <!-- BEGIN PAGE TITLE-->
            <h1 class="page-title"> Comercios
                <small>Lista de todas los Comercios</small>
            </h1>

            <div class="row">
                <div class="col-md-7 col-sm-12">
                    <div class="portlet box blue ">
                        <div class="portlet-title">
                            <div class="caption" style="font-size: 22px;">
                                <i class="fas fa-user-tie"></i> Comercios
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="row margin-bottom">
                            </div>
                            <div class="table-container">
                                <table class="table table-striped table-bordered table-hover" id="comercio_lista">
                                    <thead>
                                        <tr role="row" class="heading">
                                            <th width="20%">Nombre</th>
                                            <th width="25%">Ubicacion</th>
                                            <th width="25%">link</th>
                                            <th width="15%">Estado</th>
                                            <th width="15%">Accion</th>
                                        </tr>
                                    </thead>
                                    <tbody> 
                                        @foreach ($datos['comercios'] as $comercio)                               
                                        <tr>
                                            <td>{{ $comercio['nombre'] }}</td>
                                            <td>{{ $comercio['ubicacion'] }}</td>
                                            <td><a href="{{ $url.'/comercio/'.$comercio['link'] }}" target="_blank">Ver</a></td>
                                            <td>
                                                <a href="{{ $comercio['estado']==1?'':route('comercio_alta',['id' => $comercio['id'] ]) }}" class="btn btn-xs {{ $comercio['estado']==1?'green':'grey-salsa' }}">Activo</a> 
                                                <a href="{{ $comercio['estado']==0?'':route('comercio_baja',['id' => $comercio['id'] ]) }}" class="btn btn-xs {{ $comercio['estado']==0?'red':'grey-salsa' }}">De baja</a>
                                            </td>
                                            <td><a onClick='modificar{{ "(".json_encode($comercio).")";}}' class="btn btn-xs grey-salsa"><i class="fa fa-pen"></i> Modificar</a></td>
                                        </tr>
                                        @endforeach  
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END MOVILES -->
                <!-- FORM AGREGAR MOVIL -->
                <div class="col-md-5 col-sm-12" id="conteiner_add" style="display: block;">
                    <div class="portlet box blue-hoki">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fas fa-plus-square"></i> Cargar nuevo comercio
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <form class="form-horizontal" role="form" id="guardar_comercio" name="guardar_comercio" method="GET" action="{{ route('comercio_guardar') }}" autocomplete="off">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Nombre</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value=""  id="nombre_add" name="nombre">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Ubicacion</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value=""  id="ubicacion_add" name="ubicacion">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Estado</label>
                                        <div class="col-md-9">
                                            <select class="form-control" name="estado" id="estado_add">
                                                <option>Seleccione uno</option>
                                                <option value="1">Activo</option>
                                                <option value="0">De baja</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions right1">
                                    <button type="submit" class="btn green">AGREGAR</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <!-- END FORM AGREGAR MOVIL -->

                <!-- FORM MODIFICAR MOVILES -->
                <div class="col-md-5 col-sm-12" id="conteiner_edit" style="display: none;">
                    <div class="portlet box green">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fas fa-plus-square"></i> Modificar Comercio
                            </div>
                        </div>
                        <div class="portlet-body form">
                            <form class="form-horizontal" role="form" id="modificar_comercio" name="modificar_comercio" method="GET" action="{{ route('comercio_modificar') }}" autocomplete="off">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Nombre</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value=""  id="nombre" name="nombre">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Ubicacion</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value=""  id="ubicacion" name="ubicacion">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Estado</label>
                                        <div class="col-md-9">
                                            <select class="form-control" name="estado" id="estado">
                                                <option>Seleccione uno</option>
                                                <option value="1">Activo</option>
                                                <option value="0">De baja</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                    <input type="hidden" class="form-control" value=""  id="id" name="id">
                                <div class="form-actions right1">
                                    <button type="submit" class="btn green">GUARDAR CAMBIOS</button>
                                    <button onClick="cancelar()" type="reset" value="Reset" class="btn red">Cancelar</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                <!-- END FORM MODIFICAR VUELOS -->
            </div>

            <!-- END PAGE CONTENT-->
        </div>
        <!-- END CONTENT BODY -->
    </div>
<!-- END CONTENT -->       
@endsection

@section('endplugin')
        <!-- BEGIN CORE PLUGINS -->
        <script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->

        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <!-- END PAGE LEVEL PLUGINS -->

        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="{{ asset('assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->

        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="{{ asset('assets/layouts/layout/scripts/layout.min.js') }}" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->

        <script>
            $(document).ready(function(){

            });
            
            function modificar(data){		
                $("#conteiner_add").css("display", "none");
                $("#conteiner_edit").css("display", "block");
                $("#id").val(data.id);
                $("#nombre").val(data.nombre);
                $("#ubicacion").val(data.ubicacion);
                $("#estado").val(data.estado);
            };

            function cancelar(){		
                $("#conteiner_add").css("display", "block");
                $("#conteiner_edit").css("display", "none");
            };
        </script>
@endsection