@extends('layouts.app')

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="/">Inicio</a></li>
        <li><a href="{{route('orders.index')}}">Órdenes</a></li>
        <li class="active">{{$order->name}}</li>
    </ol>
@endsection

@section('header')
    <div class="page-header mt-10">
        <h1><i class="fa fa-th-list" aria-hidden="true"></i> {{$order->name}}</h1>
    </div>

    <div class="row" ng-cloak>
        <div class="col-md-3">
            <div class="card">
                <h2>{% order.total %}</h2>
                <span class="description">Total de registros</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-interested">
                <h2>{% order.assigned %}</h2>
                <h3>{% (order.assigned / order.total * 100).toFixed(2) %} %</h3>
                <span class="description">Asignados</span>
            </div>
        </div>
        <div class="col-md-3" ng-if="(order.total - order.assigned) > 0">
            <div class="card card-not-interested">
                <h2>{% order.total - order.assigned %}</h2>
                <h3>{% ((order.total-order.assigned)/order.total*100).toFixed(2) %} %</h3>
                <span class="description">No asignados</span>
            </div>
        </div>
        <div class="col-md-3">
            <p class="alert alert-info" ng-if="(order.total - order.assigned) > 0">Aún no se puede envíar esta orden</p>
            <div ng-if="(order.total - order.assigned) == 0">
                <div ng-if="!order.sent">
                    <a ng-if="!order.sending" href="" class="btn btn-primary btn-block" ng-click="sendOrder()">Enviar orden</a>
                    <button ng-if="order.sending" type="button" class="btn btn-primary btn-block" disabled="disabled">Cargando...</button>
                </div>

                <div class="order-sent" ng-if="order.sent">
                    <i class="fa fa-check-circle-o" aria-hidden="true"></i>
                    <p>Orden enviada</p>
                </div>
            </div>
        </div>
        <div class="col-md-3" ng-if="(order.total - order.assigned) == 0">
            <a href="{{route('employees.report', ['id'=>$order->id])}}" class="btn btn-primary btn-block"><i class="fa fa-cloud-download" aria-hidden="true"></i> Exportar reporte en XLS</a>
        </div>
    </div>
    <hr>
@endsection

@section('content')
    <form action="{{route('employees.index', ['id'=>$order->id])}}" class="mb-10">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="worker_id">No. de Empleado</label>
                    <input name="worker_id" type="text" class="form-control" id="worker_id" value="{{old('worker_id')}}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="name">Nombre</label>
                    <input name="name" type="text" class="form-control" id="name" value="{{old('name')}}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="cc">CC</label>
                    <input name="cc" type="text" class="form-control" id="cc" value="{{old('cc')}}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="management">Gerencia</label>
                    <input name="management" type="text" class="form-control" id="management" value="{{old('management')}}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary btn-outline" type="submit"><i class="fa fa-filter" aria-hidden="true"></i> Filtrar empleados</button>
                @if(old('worker_id') || old('name') || old('cc') || old('management'))
                <a href="{{route('employees.index', ['id'=>$order->id])}}" class="btn btn-danger btn-outline"><i class="fa fa-times" aria-hidden="true"></i> Reiniciar filtros</a>
                @endif
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-md-12">
            @if($employees->count())
                <div class="table-responsive">
                    <table class="table table-condensed table-striped">
                        <thead>
                            <tr>
                              <th>No. de Empleado</th>
                              <th style="min-width: 250px;">Nombre</th>
                              <th>CC</th>
                              <th>Gerencia</th>
                              <th>Gestor</th>
                              <th style="min-width: 50px;"></th>
                              <th style="min-width: 450px;">Acciones</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr ng-repeat="employee in employees.data" ng-cloak>
                                <td>{% employee.worker_id %}</td>
                                <td class="uc-small">{% employee.name %}</td>
                                <td>{% employee.cc %}</td>
                                <td class="uc-small">{% employee.management %}</td>
                                <td ng-init="employee.gestor_edit = false">
                                    <span ng-show="!employee.gestor_edit">{% employee.gestor %}</span>
                                    <a ng-show="!employee.gestor_edit" ng-click="showGestorEdit(employee)" href="" class="btn btn-sm btn-default"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                                    <div ng-show="employee.gestor_edit">
                                        <div class="form">
                                          <div class="form-group">
                                            <input type="text" class="form-control" id="id" ng-model="employee.gestor_field">
                                          </div>
                                          <button ng-if="!employee['gestor_helper'].loading" type="submit" class="btn btn-default" ng-click="assignGestor(employee)">Asignar gestor</button>
                                          <button ng-if="employee['gestor_helper'].loading" type="button" class="btn btn-default" disabled="disabled">Cargando...</button>
                                        </div>
                                        <p class="error-message" ng-if="employee['gestor_helper'].show_message">{% employee['tablet_helper'].message %}</p>
                                    </div>
                                </td>
                                <td>
                                    <span ng-show="employee.tablet && employee.product_type == 'tablet'" class="label label-success"><i class="fa fa-check" aria-hidden="true"></i></span>
                                    <span ng-show="employee.hamster && employee.product_type == 'hamster'" class="label label-success"><i class="fa fa-check" aria-hidden="true"></i></span>
                                    <span ng-show="employee.hamster && employee.tablet && employee.product_type == 'bundle'" class="label label-success"><i class="fa fa-check" aria-hidden="true"></i></span>
                                </td>
                                <td>
                                    <div class="mb-10">
                                        <a class="btn btn-xs btn-default" href="/employees/{% employee.id %}/assign"><i class="fa fa-eye" aria-hidden="true"></i> Ver detalles</a>
                                    </div>
                                    <div ng-if="(employee.product_type == 'tablet' || employee.product_type == 'bundle') && !employee.tablet" class="mb-10">
                                        <div class="form-inline">
                                          <div class="form-group">
                                            <label for="id">Serie de producto:</label>
                                            <input type="text" class="form-control" id="id" ng-model="employee.tablet_series">
                                          </div>
                                          <button ng-if="!employee['tablet_helper'].loading" type="submit" class="btn btn-default" ng-click="assignProduct(employee, 'tablet')">Asignar tablet</button>
                                          <button ng-if="employee['tablet_helper'].loading" type="button" class="btn btn-default" disabled="disabled">Cargando...</button>
                                        </div>
                                        <p class="error-message" ng-if="employee['tablet_helper'].show_message">{% employee['tablet_helper'].message %}</p>
                                    </div>
                                    <div ng-if="(employee.product_type == 'hamster' || employee.product_type == 'bundle') && !employee.hamster">
                                        <div class="form-inline">
                                          <div class="form-group">
                                            <label for="id">Serie de producto:</label>
                                            <input type="text" class="form-control" id="id" ng-model="employee.hamster_series">
                                          </div>
                                          <button ng-if="!employee['hamster_helper'].loading" type="submit" class="btn btn-default" ng-click="assignProduct(employee, 'hamster')">Asignar hamster</button>
                                          <button ng-if="employee['hamster_helper'].loading" type="button" class="btn btn-default" disabled="disabled">Cargando...</button>
                                        </div>
                                        <p class="error-message" ng-if="employee['hamster_helper'].show_message">{% employee['hamster_helper'].message %}</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-sm-12 text-center">
                        {!! $employees->render() !!}
                    </div>
                </div>
            @else
                <p class="text-center alert alert-info">No hay registros de empleados en esta orden</p>
            @endif

        </div>
    </div>

@endsection

@section('js')
    {{ Html::script('https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js') }}

    <script type="text/javascript">
    inventario = angular.module("inventario", []);

    inventario.config(function($interpolateProvider, $locationProvider) {
        $interpolateProvider.startSymbol('{%');
        $interpolateProvider.endSymbol('%}');
    });

    inventario.controller('EmployeeController', ['$scope', '$http', function($scope, $http) {
        $scope.order = {!!json_encode($order)!!};
        $scope.employees = {!!json_encode($employees)!!};

        $scope.assignProduct = function(employee, type) {
            if(!employee[type + '_helper']){
                employee[type + '_helper'] = {};
            }

            employee[type + '_helper'].show_message = false;
            employee[type + '_helper'].message = "";
            employee[type + '_helper'].loading = true;

            var product_series = (type == 'tablet'?employee.tablet_series:employee.hamster_series);

            console.log(product_series, type);

            $http.post('/employees/'+employee.id+'/assignApi', {
                'product_series': product_series,
                'type': type
            }).then(function success(response){
                console.log(response);
                console.log(type);

                if(response.data.status == 'error') {
                    employee[type + '_helper'].show_message = true;
                    employee[type + '_helper'].message = response.data.message;
                    employee[type + '_helper'].loading = false;
                } else {
                    employee[type] = true;
                    $scope.order.assigned++;
                }
            }, function (error){
                console.log(error);
            });
        }

        $scope.showGestorEdit = function(employee) {
            employee.gestor_field = employee.gestor;
            employee.gestor_edit = true;
        }

        $scope.assignGestor = function(employee) {
            if(!employee['gestor_helper']) {
                employee['gestor_helper'] = {};
            }

            employee['gestor_helper'].show_message = false;
            employee['gestor_helper'].message = "";
            employee['gestor_helper'].loading = true;

            employee.gestor = employee.gestor_field;
            employee.gestor_edit = false;

            $http.post('/employees/'+employee.id+'/assignGestor', {
                'gestor': employee.gestor_field,
            }).then(function success(response){
                console.log(response);
                if(response.data.status == 'error') {
                    employee['gestor_helper'].show_message = true;
                    employee['gestor_helper'].message = response.data.message;
                    employee['gestor_helper'].loading = false;
                } else {
                    employee.gestor = employee.gestor_field;
                    employee['gestor_helper'].loading = false;
                    employee.gestor_edit = false;
                }
            }, function (error){
                console.log(error);
            });
        }

        $scope.sendOrder = function() {
            $scope.order.sending = true;
            $http.post('/orders/'+$scope.order.id+'/send', {}).then(function success(response){
                console.log(response);
                if(response.data.status == 'error') {
                    $scope.order.sending = false;
                } else {
                    $scope.order.sent = true;
                }
            }, function (error){
                console.log(error);
                $scope.order.sending = false;
            });
        }
    }]);
    </script>
@endsection