@extends('layouts.admin')
@section('main')
<div class="container pt-4">
    <div class="page-header">
        <h3 class="page-title">
            <span class="page-title-icon bg-gradient-primary text-white mr-2">
                <i class="mdi mdi-account"></i>
            </span>
            {{ !$form_edit?"Nuevo paquetería":"Actualización de paquetería" }}
        </h3>
    </div>
    @if ($form_edit)
        <div class="alert alert-warning w-100">
            Advertencia: Los pesos deben ser en gramos.
            El rango de pesos más pequeños se tomará como el costo extra en caso de que el peso del pedido exceda el rango de pesos más grande.
        </div>    
    @endif
    <form action="{{ $form_edit ? route('adm.actualizar_paqueteria',$paqueteria->id) : route('adm.guardar_paqueteria') }}" method="POST" class="form">
        @csrf
        <div class="form-group">
            <label for="nombre">Nombre</label>
            <input type="text" class="form-control form-control-lg" name="nombre" id="nombre" value="{{ $form_edit ? $paqueteria->nombre : "" }}">
            <span class="invalid-feedback"></span>
        </div>
        <div class="form-group">
            <label for="descripcion">Descripción</label>
            <textarea name="descripcion" id="descripcion" cols="30" rows="5" class="form-control">
                {{ $form_edit ? $paqueteria->descripcion : "" }}
            </textarea>
            <span class="invalid-feedback"></span>
        </div>
        @if ($form_edit)
        <label>Rango de pesos y precios</label>
        <div id="contenedor_precios" class="row">
            @foreach ($precios as $item)
            <div class="input-group col-8 my-2 mx-auto">
                <div class="input-group-prepend">
                    <span class="input-group-text">Peso mínimo</span>
                </div>
                <input type="text" aria-label="peso_minimo" class="form-control" id="peso_minimo" name="peso_precio[$item->id]['peso_minimo']" value="{{ $item->peso_minimo }}">
                <div class="input-group-prepend">
                    <span class="input-group-text">Peso Máximo</span>
                </div>
                <input type="text" aria-label="peso_maximo" class="form-control" id="peso_maximo" name="peso_precio[$item->id]['peso_maximo']" value="{{ $item->peso_maximo }}">
                <div class="input-group-prepend">
                    <span class="input-group-text">Precio</span>
                </div>
                <input type="text" aria-label="precio" class="form-control" id="precio" name="peso_precio[$item->id]['precio']" value="{{ $item->precio }}">
                <div class="input-group-append">
                    <button class="btn btn-danger" type="button"><i class="fa fa-trash-o"></i>Eliminar</button>
                </div>
            </div> 
            @endforeach
        </div>    
        @endif        
        <div class="form-group text-center">
            @if ($form_edit)
            <button type="button" class="btn btn-info" id="nuevo_precio">Agregar nuevo precio y peso</button>    
            @endif
            <button type="submit" class="btn btn-success">{{ $form_edit ? "Actualizar" : "Guardar" }}</button>            
            <a type="button" class="btn btn-danger" href="{{ route('adm.paqueterias') }}">Cancelar</a>
        </div>
    </form>
</div>
@endsection

@section('scripts')
    @parent
    <script>
        var contador=1;
        $("#nuevo_precio").click(function(){
            $("#contenedor_precios").append(`
            <div class="input-group col-8 my-2 mx-auto">
                <div class="input-group-prepend">
                    <span class="input-group-text">Peso Mímino</span>
                </div>
                <input type="text" aria-label="peso_minimo" class="form-control" id="peso_minimo${contador}" name="array['peso_minimo']">
                <div class="input-group-prepend">
                    <span class="input-group-text">Peso Máximo</span>
                </div>
                <input type="text" aria-label="peso_maximo" class="form-control" id="peso_maximo${contador}" name="array['peso_maximo']">
                <div class="input-group-prepend">
                    <span class="input-group-text">Precio</span>
                </div>
                <input type="text" aria-label="precio" class="form-control" id="precio${contador}" name="precio[]">
                <div class="input-group-append">
                    <button class="btn btn-danger new_element" type="button"><i class="fa fa-trash-o"></i>Eliminar</button>
                </div>
            </div>
            `);
            contador++;
        });   
        $("body").on("click",".new_element",function(){
            var $this = $(this);
            $this.parents(".input-group").remove();
        });
    </script>    
@endsection