@extends('layouts.base')
@push('css')
<!-- Switchery -->
<link href="{{URL::to('vendors/switchery/dist/switchery.min.css')}}" rel="stylesheet">
<!-- Datatables -->
<link href="{{URL::to('vendors/datatables.net-bs/css/dataTables.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css')}}" rel="stylesheet">
<link href="{{URL::to('vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css')}}" rel="stylesheet">
<style>
    .productPhotos img {
        width: 30%;
        margin: 10px;
    }
</style>
@endpush
@section('content')
    <div class="x_panel" style="display: none !important;">
        <div class="x_content">
            <br/>
            <form action="{{route('products.store')}}" method="post" id="form-create" data-parsley-validate class="form-horizontal form-label-left input_mask">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('name')) has-error @endif">
                        <input type="text" class="form-control" id="name"
                               placeholder="Nombre" name="name" required value="{{old('name')}}">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('description')) has-error @endif">
                        <textarea name="description" id="description" class="form-control" placeholder="Descripción" cols="6" rows="5">{{old('description')}}</textarea>
                        {{--<input type="text" class="form-control" id="description"
                               placeholder="Descripción" name="description" required value="{{old('description')}}">--}}
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group center @if($errors->get('active')) has-error @endif">
                        <label>
                            <input type="checkbox" class="js-switch" name="active" /> Activo
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('price')) has-error @endif">
                        <input type="text" class="form-control" id="price"
                               placeholder="Precio" name="price" required value="{{old('price')}}">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('brand')) has-error @endif">
                        <input type="text" class="form-control" id="brand"
                               placeholder="Brand" name="brand" required value="{{old('brand')}}">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group center @if($errors->get('is_new')) has-error @endif">
                        <label>
                            <input type="checkbox" class="js-switch" name="is_new" /> Nuevo
                        </label>
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('price')) has-error @endif">
                        <label for="user_id">Usuario</label>
                        <select name="user_id" id="user_id" class="form-control">
                            <option value="">Seleccione Usuario</option>
                            @foreach($users as $user)
                                <option value="{{$user->id}}">{{$user->first_name}} {{$user->last_name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group">
                        <label for="user_id">Categoría</label>
                        <select name="parent_category" id="parent_category" class="form-control">
                            <option value="">Seleccione Categoría</option>
                            @foreach($parents as $category)
                                <option value="{{$category->id}}">{{$category->category}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('category_id')) has-error @endif">
                        <label for="user_id">Subcategoría</label>
                        <select name="category_id" id="category_id" class="form-control" disabled>
                            <option value="">Seleccione Subcategoría</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group center @if($errors->get('featured')) has-error @endif">
                        <br>
                        <label>
                            <input type="checkbox" class="js-switch" name="featured" /> Destacado
                        </label>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group @if($errors->get('stock')) has-error @endif">
                        <input type="number" min="0" class="form-control" id="stock"
                               placeholder="Stock" name="stock" value="{{old('stock')}}">
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group center @if($errors->get('service')) has-error @endif">
                        <br>
                        <label>
                            <input type="checkbox" class="js-switch" name="service" /> Servicio
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-12 form-group center @if($errors->get('negotiable')) has-error @endif">
                        <br>
                        <label>
                            <input type="checkbox" class="js-switch" name="negotiable" /> Negociable
                        </label>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-5 col-sm-9 col-xs-12 col-md-offset-5">
                        <button id="create" type="submit" class="btn btn-success">Submit</button>
                    </div>
                </div>
                <input type="hidden" name="_token" value="{{csrf_token()}}">

            </form>
        </div>
    </div>
    <div class="x_panel">
        <div class="x_content">
            <div class="dropdown dropup docs-options">
                <button type="button" class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" data-toggle="dropdown" aria-expanded="true">
                    Mostrar/Esconder Columnas
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="toggleOptions" role="menu">
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="0">Nombre
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="1">Descripción
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="2">Activa
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="3">Precio
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="4">Brand
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="5">Categoría
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="6">Nuevo
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="7">Servicio
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="8">Stock
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="9">Destacado
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" data-column="10">Negociable
                        </label>
                    </li>
                    <li role="presentation">
                        <label class="checkbox-inline">
                            <input class="show" type="checkbox" checked data-column="11">Usuario
                        </label>
                    </li>
                </ul>
            </div><!-- /.dropdown -->
            <table id="users" width="100%" class="table table-stripped table-hovered">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Descripción</th>
                    <th>Activa</th>
                    <th>Precio</th>
                    <th>Brand</th>
                    <th>Categoría</th>
                    <th>Nuevo</th>
                    <th>Servicio</th>
                    <th>Stock</th>
                    <th>Destacado</th>
                    <th>Negociable</th>
                    <th>Usuario</th>
                    <th style="max-width: 30%">Acciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach($products as $product)
                    <tr>
                        <td>{{$product->name}}</td>
                        <td>{{\Illuminate\Support\Str::limit($product->description, 50)}}</td>
                        <td>{{($product->active==1)?'Si':'No'}}</td>
                        <td>{{$product->price}}</td>
                        <td>{{$product->brand}}</td>
                        <td>
                            <ul>
                            @foreach($product->categories as $category)
                                <li>{{$category->category->category}}</li>
                            @endforeach
                            </ul>
                        </td>
                        <td>{{($product->is_new==1)?'Si':'No'}}</td>
                        <td>{{($product->service==1)?'Si':'No'}}</td>
                        <td>{{$product->stock}}</td>
                        <td>{{($product->featured==1)?'Si':'No'}}</td>
                        <td>{{($product->negotiable==1)?'Si':'No'}}</td>
                        <td>{{($product->user)?$product->user->first_name.' '.$product->user->last_name:'N/A'}}</td>
                        <td>
                            <form action="{{ route('products.destroy', ['id'=>$product->id]) }}" method="POST">
                                <input type="hidden" name="_method" value="DELETE">
                                <input type="hidden" name="_token" value="{{csrf_token()}}">
                                <div class="btn-group">
                                    <a class="edit btn btn-info" href="{{ route('products.edit', ['id'=>$product->id]) }}">Editar</a>
                                    <a class="photos btn btn-success" data-photos="{{ $product->photos }}">Fotos</a>
                                    <a class="comments btn btn-success" href="{{ route('products.comments', ['id'=>$product->id]) }}">Comentarios</a>
                                    <a class="delete btn btn-danger" href="javascript:void(0)">Eliminar</a>
                                </div>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="productPhotos" tabindex="-1" role="dialog" aria-labelledby="details">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Fotos del Producto</h4>
                </div>
                <div class="modal-body" id="ppBody">
                    <div class="productPhotos center">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<!-- Parsley -->
<script src="{{URL::to('vendors/parsleyjs/dist/parsley.min.js')}}"></script>
<!-- Switchery -->
<script src="{{URL::to('vendors/switchery/dist/switchery.min.js')}}"></script>
<!-- Datatables -->
<script src="{{URL::to('vendors/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.flash.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-keytable/js/dataTables.keyTable.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js')}}"></script>
<script src="{{URL::to('vendors/datatables.net-scroller/js/dataTables.scroller.min.js')}}"></script>
<script>
    var table = {};
    $(document).ready(function () {
        table = $("#users").DataTable({
            responsive:true
        });
        $(".show").trigger('change');
    });
    $(".show").on("change", function (e) {
        e.preventDefault();
        var column = table.column($(this).attr('data-column'))
        column.visible($(this).is(':checked'));
    });
    $('#form-create').parsley().on('field:validated', function() {
        var ok = $('.parsley-error').length === 0;
        $('.bs-callout-info').toggleClass('hidden', !ok);
        $('.bs-callout-warning').toggleClass('hidden', ok);
    });
    $(document).on("click", "#create", function (e) {
        if (!confirm('¿Está seguro de crear el registro?')) {
            e.preventDefault();
            return;
        }
        $(this).closest('form').submit();
    });
    $(document).on("click", ".photos", function () {
        var photos = $(this).data('photos');
        console.log(photos);
        var count = 0;
        if(photos && photos.length>0){
            var strPhotos = '';
            photos.forEach(function (v, k) {
                if(count===3){
                    strPhotos+="<br>";
                    count = 0;
                }
                strPhotos+="<img class='image-circle' src='"+v.file+"'>";
                count++;
            });
            $(".productPhotos").html(strPhotos);
            $("#productPhotos").modal();
        }else{
            alert('Éste producto no posee fotos asociadas.');
        }
    });
    $(document).on("change", '#parent_category', function () {
        var cat_id = $(this).val();
        var route = '{{url('api/v1/categories/')}}/'+cat_id;
        console.log(route);
        if(!cat_id || cat_id === ""){
            strOptions = "<option value=''>Seleccione Subcategoría</option>";
            $("#category_id").html(strOptions);
            $("#category_id").val("").trigger('change');
            $("#category_id").attr('disabled', true);
        }else{
            $.ajax({
                url: route,
                method:'GET'
            }).done(function (resp) {
                console.log(resp);
                if(resp.categories && resp.categories.length<1){
                    alert("La categoría seleccionada no posee subcategorías, intente con otra.");
                    strOptions = "<option value=''>Seleccione Subcategoría</option>";
                    $("#category_id").val("").trigger('change');
                    $("#category_id").attr('disabled', true);
                }
                else{
                    strOptions = "<option value=''>Seleccione Subcategoría</option>";
                    resp.categories.forEach(function (v, k) {
                        strOptions+="<option value='"+v.id+"'>"+v.category+"</option>";
                    });
                    $("#category_id").html(strOptions);
                    $("#category_id").attr('disabled', false);
                }
            }).error(function (resp) {
                console.log(resp);
                alert("Error al obtener subcategorías, intenta nuevamente o comuníquese con el administrador.");
            });
        }
    });
    $(document).on("click", ".delete", function (e) {
        if (!confirm('¿Está seguro de eliminar éste registro?')) {
            e.preventDefault();
            return;
        }
        $(this).closest('form').submit();
    });
</script>
@endpush