@extends('adminlte::page')

@section('title', 'Banners')

@section('content_header')
    @component('components.breadcrumb', [
        'links' => [
            'Listado' => url('special_prices')
        ],
        'current' => 'Crear'
    ])
    @endcomponent
@stop

@section('content')
    @includeIf('alerts.errors')    
        <div id="accordion">
            <div class="card animated bounceInDown">
                <div class="card-header">
                    <h5 class="mb-0">
                        <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Información
                        </a>
                    </h5>
                </div>

                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <form method="POST" action="{{ route('special_prices.store') }}">
                            @csrf
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="id_concepto">Concepto</label>
                                    <select class="form-control" name="id_concepto" id="id_concepto" required>
                                        <option value="" selected disabled>Opciones</option>
                                        @foreach ($prices as $price)
                                            <option value="{{ $price->Id_ConceptoCosto }}">{{ $price->Descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <div class="form-row">
                                        <label class="form-check-label ml-1">*Tipo:</label>
                                    </div>
                                    <div class="form-group col-6">
                                          <div class="form-check form-check-inline">                                            
                                            <input class="form-check-input" type="radio" name="type" value="P" onclick="typeOfPrice(this.value)">
                                            <label class="form-check-label" for="inlineRadio1">Porcentaje</label>
                                          </div>
                                          <div class="form-check form-check-inline">                                            
                                            <input class="form-check-input" type="radio" name="type" value="M" onclick="typeOfPrice(this.value)">
                                            <label class="form-check-label" for="inlineRadio2">Monto</label>
                                          </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6 offset-6 d-none" id="percentaje-group">
                                    <div class="form-group col-12">
                                        <label for="percentaje">Porcentaje</label>
                                        <input type="number" name="percentaje" id="percentaje" value="{{ old('percentaje') }}" min="0" max="100" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group col-6 offset-6 d-none" id="amount-group">
                                    <div class="form-group col-12">
                                        <label for="amount">Monto</label>
                                        <input type="number" name="amount" id="amount" value="{{ old('amount') }}" min="0" class="form-control">
                                    </div>
                                </div>
                            </div>                                                    
                            <div class="form-row mt-3">
                                <div class="form-group col-3">
                                    <label for="family">Familia</label>
                                    <select class="form-control" name="family" id="family" required onchange="_index.runQuery()">
                                        <option value="0" selected>Todos</option>
                                        @foreach ($families as $family)
                                            <option value="{{ $family->Id_Familia }}">{{ $family->Familia }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-3">
                                    <label for="brand">Marca</label>
                                    <select class="form-control" name="brand" id="brand" required onchange="_index.runQuery()">
                                        <option value="0" selected>Todos</option>
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->Id_Marca }}">{{ $brand->Marca }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-3">
                                    <label for="category">Categoría</label>
                                    <select class="form-control" name="category" id="category" required onchange="_index.runQuery()">
                                        <option value="0" selected>Todos</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->Id_Categoria }}">{{ $category->Categoria }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-3">
                                    <label for="especiality">Especialidad</label>
                                    <select class="form-control" name="especiality" id="especiality" required onchange="_index.runQuery()">
                                        <option value="0" selected>Todos</option>
                                        @foreach ($especialities as $especiality)
                                            <option value="{{ $especiality->Id_EspMed }}">{{ $especiality->Especialidad }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label for="array_products">Productos añadidos:</label>
                                    <input type="text" name="array_products" id="array_products" value="" class="form-control">
                                </div>
                            </div>
                            <div class="card-body table-responsive">
                                <table class="table" id="myTable">
                                    <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            
                            <div class="btn-group mt-5" role="group">
                                <button type="submit" class="btn btn-success m-2">
                                    <i class="fas fa-save"></i> Guardar
                                </button>
                                <a type="button" class="btn btn-danger m-2" href="{{ url()->previous() }}">
                                    <i class="fas fa-ban"></i> Cancelar
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@stop

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/3.21.5/tagify.min.css"/>
    <style>
        .tagify{
            overflow-x: auto;
            overflow-y: hidden;
            flex-wrap: unset;
            height: 5rem;
        }
        .tagify__input{
            display: none !important;
        }
    </style>
@endpush

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/3.21.5/tagify.min.js"></script>
    <script>
        
        const products = document.getElementById('array_products');
        const productsTagify = new Tagify(products, {
            delimiters: '\n',
            editTags: false,
        });

        $(function () {
            _index.datatable();
        });

        /**
        * Shows and hides the input corresponding to percentage and amount
        * @author daniel.cruz@losfra.dev
        * @created 2020-12-30
        * @param  string  input
        * @return void
        */
        function typeOfPrice(input) {
            var percentajeInput = document.getElementById('percentaje');
            var amountInput = document.getElementById('amount');
            var amountGroup = document.getElementById('amount-group');
            var percentajeGroup = document.getElementById('percentaje-group');

            if (input === 'P') {
                amountInput.value = ''; 
                percentajeInput.setAttribute('required', ''); 
                percentajeGroup.classList.replace("d-none","d-block");   
                amountGroup.classList.replace("d-block","d-none");
                amountInput.removeAttribute('required'); 
            } else if (input === 'M') {
                percentajeInput.value = ''; 
                amountInput.setAttribute('required', ''); 
                amountGroup.classList.replace("d-none","d-block");
                percentajeGroup.classList.replace("d-block","d-none");
                percentajeInput.removeAttribute('required'); 
            }
        }
        
        const _index = {
            $mdl: $('#show-modal'),
            datatable: function () {
                $('#myTable').DataTable({
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    deferRender: true,
                    language:{
                        url: "{{ asset('/js/Spanish.json') }}"
                    },
                    ajax: {
                        url: "{{ route('special_prices.search') }}",
                        data: {
                            family: function() { return $('#family').val() },
                            brand: function() { return $('#brand').val() },
                            especiality: function() { return $('#especiality').val() },
                            category: function() { return $('#category').val() },
                            "_token": "{{ csrf_token() }}",
                        },
                        type: 'POST'
                    },
                    columns: [
                        { data: 'Descrip1', name: 'Nombre' },
                        { data: 'check', name: 'check' },
                    ],
                    select: true,
                });
            },
            fillMdl: function (that) {
                this.$mdl.find('label').html('');
                let data = JSON.parse(that.dataset['banner']);
                $.each(data, (idx, val) => {
                    if(idx == 'image'){
                        document.getElementById("show_img").src= `/storage/${val}`;
                    } else {
                        this.$mdl.find(`#${idx}`).html(val);
                    }
                });
            },
            runQuery: function () {
                $('#myTable').DataTable().ajax.reload();      
            },
            addItem: function(that) {
                productsTagify.addTags([{value: that.name, name: that.value}])

            }
        }
    </script>
@endpush