@extends($theme.'.layouts.admin')
@section('content')
<section class="shop-single section-padding pt-0">
    <div class="container">
        <section class="p-3 mb-1 page-header">
            <div class="pl-3">
                <div class="row">
                    <div class="col-md-8 pl-0">

                        <a href="{{ URL::to('/') }}"><strong><span class="fa fa-home"></span> @lang('messages.Home')</strong></a>
                        @if(isset($product->main_category_id) && !empty($product->main_category_id))
                            <span class="fa fa-angle-right"></span> <a href="{{url('school-list') }}">{{ $product->main_category_name }}</a>
                        @endif
                        @if(isset($product->second_level_category_id) && !empty($product->second_level_category_id))
                            <span class="fa fa-angle-right"></span> <a href="{{ url('home?school_id='.$product->second_level_category_id) }}">{{ $product->second_level_category_name }}</a>
                        @endif
                        @if(isset($product->third_level_category_id) && !empty($product->third_level_category_id))
                              <span class="fa fa-angle-right"></span> <a href="{{ url('product-list/'.$product->third_level_category_id.'/3') }}">{{ $product->third_level_category_name }}</a>
                        @endif
                        @if(isset($product->fourth_level_category_id) && !empty($product->fourth_level_category_id))
                              <span class="fa fa-angle-right"></span> <a href="{{ url('product-list/'.$product->fourth_level_category_id.'/4') }}">{{ $product->fourth_level_category_name }}</a>
                        @endif 
                        <span class="fa fa-angle-right"></span> <a href="javascript:;">{{ $product->name_en}}</a>
                    </div>
                </div>
            </div>
        </section>
        <div class="col-lg-12">
            <div class="row prod-block bg-white">
                <div class="col-md-6">
                    <div class="shop-detail-left">
                        <div class="shop-detail-slider">

                            <div class="product-header">
                                @php
                                    $promotion_data = '';
                                    if ($product->promotion_product == 1) {
                                        $promotion_data = $product->promotion_product_label;
                                        if (!empty($product->discount_label)) {
                                            $promotion_data = ' & '.$promotion_data;
                                        }
                                    }
                                    @endphp
                                <span class="badge badge-success" id="badge-{{$product->warehouse_product_id}}">{{$product->discount_label.$promotion_data}}</span>
                                                                    <span class="non-veg text-danger mdi mdi-circle"></span>
                                                            </div>


                            <div id="sync3" class="owl-carousel">

                            {{--<div class="sp-wrap">--}}

                             @if(!empty($product->image1))
                                    <div class="item">
                                        <a href="{{$product->image1}}">
                                            <img alt="" src="{{$product->image1}}" id="img-fluid" class="img-fluid img-center">
                                        </a>
                                    </div>
                                @endif

                                @if(!empty($product->image2))
                                    <div class="item">
                                        <a href="{{$product->image2}}">
                                            <img alt="" src="{{$product->image2}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                @endif
                                @if(!empty($product->image3))
                                    <div class="item">
                                        <a href="{{$product->image3}}">
                                            <img alt="" src="{{$product->image3}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                @endif
                                @if(!empty($product->image4))
                                    <div class="item">
                                        <a href="{{$product->image4}}">
                                            <img alt="" src="{{$product->image4}}" class="img-fluid img-center">
                                        </a>
                                    </div>
                                @endif

                            {{--</div>--}}

                        </div>

                    </div>
                </div>
                </div>

                <div class="col-md-6">
                    <div class="shop-detail-right" data-name="{{ $product->name_en }}" data-img="{{ $product->image1 }}" data-warehouse-product="{{ $product->warehouse_product_id }}" data-price="{{ $product->price }}" data-variant-en="{{ $product->variant_en }}" data-variant_option_name1="{{ $product->variant_option_name1 }}" data-variant_option_name2="{{ $product->variant_option_name2 }}" data-variant_option_name3="{{ $product->variant_option_name3 }}" data-discounted-price="{{ $product->discounted_price }}" data-vendor="{{ $product->vendor_id }}" data-product="{{ $product->product_id }}" data-cgst="{{ $product->cgst_rate }}" data-igst="{{ $product->igst_rate }}" data-sgst="{{ $product->sgst_rate }}">

                        <h6 class="cat-name">
                            {{ $product->main_category_name }}
                        </h6>
                        <h2>
                            {{ $product->name_en }}
                        </h2> 
                        <h6 class="text-danger">
                            Estimated Delivery : {{ $deliveryTime }}
                        </h6>
                        <input type="hidden" name="customer_id" id="customer_id" value="{{ Session::get('CustomerId') }}">
                        <input type="hidden" name="product_id" id="product_id" value="{{$product->product_id}}">
                        <input type="hidden" name="warehouse_product_id" id="warehouse_product_id" value="{{$product->warehouse_product_id}}">
                        <input type="hidden" name="vendor_id" id="vendor_id" value="{{$product->vendor_id}}">

                        <h6 class="pt-3 mb-0">
                                                                 @foreach($product->group_variants as $variant)
                                                                    @endforeach

                                @if($count == 1)
                                    @foreach($product->group_variants as $variant)
                                        <p>{{$variant->value_en}}</p>
                                    @endforeach
                                @endif

                                @if($count > 1)
                                    <select required id="variant-{{$product->warehouse_product_id}}" data-warehouse-product="{{ $product->warehouse_product_id }}" class="variant">
                                        @foreach($product->group_variants as $variant)
                                            <option data-name="{{ $variant->name_en }}" data-url="{{ route('product-detail',['id' => $variant->id,'group_name_slug'=>$product->group_name_slug]) }}" data-parent-warehouse-product="{{ $product->warehouse_product_id }}" data-group-name-slug="{{$product->group_name_slug}}" data-warehouse-product="{{ $variant->id }}" data-price="{{ $variant->price }}" data-discounted-price="{{ $variant->discounted_price }}" data-image1="{{$variant->image1}}" data-label="{{$variant->discount_label}}" data-vendor="{{ $product->vendor_id }}" data-variant-en="{{$variant->value_en}}" data-product="{{ $variant->product_id }}" data-cgst="{{ $variant->cgst_rate }}" data-igst="{{ $variant->igst_rate }}" data-sgst="{{ $variant->sgst_rate }}" value="{{$variant->id}}" @if($product->warehouse_product_id == $variant->id) selected @endif>
                                            {{$variant->variant_option_name2}}({{$variant->variant_option_name1}}) - @lang('messages.Rs') {{$variant->discounted_price}}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                        </h6>

                        @php
                            $total_price = $product->price;
                            if($product->discount_type == 'amount'){
                                $total_price = $product->price - $product->discount_amount;
                            } else if($product->discount_type == 'percentage'){
                                $percenatge = ($product->price/100)*$product->discount_percentage;
                                $total_price = $product->price - $percenatge;
                            }
                        @endphp

                        @if($total_price != $product->price)
                            <h5 class="mrp">MRP :
                            <span class="regular-price" id="regular-price"><i class="mdi mdi-tag-outline"></i>@lang('messages.Rs') {{$product->price}}</span>
                            </h5>

                                <h5>Offer Price :
                            <span class="offer-price mb-0 pt-1" id="offer-price"><span class="">@lang('messages.Rs') {{ $total_price }}</span></span>
                        @else
                            <span class="offer-price mb-0 pt-1" id="offer-price"><span class="">@lang('messages.Rs') {{ $product->price }}</span></span>
                        @endif
                                </h5>
                        @php
                            $quantity = 0;
                            $product_id = $product->warehouse_product_id;
                        @endphp
                        @if(!empty($cart_list))
                            @foreach($cart_list as $cart)
                                @if($cart['warehouse_product_id'] == $product_id)
                                    @php $quantity = $cart['qty']; @endphp
                                @endif
                            @endforeach
                        @endif

                        @if($quantity > 0)
                            @php $style =""; $cart_style ="display:none"; @endphp
                        @else
                            @php $style ="display:none"; $cart_style ="border-radius: 100px !important;"; @endphp
                        @endif

                        <div class="quantity plus_minus"  data-warehouse-product="{{ $product->warehouse_product_id }}" data-product="{{ $product->product_id }}" style="{{ $style }}">
                            <span  class="minus" onclick="updateqty(this,'minus')"><i class="fa fa-minus"></i></span>
                            <input type="number" class="count_new qty" min="0" pattern="\d*"  onkeypress="restrictMinus(event);"  name="qty" value="{{ $quantity }}" data-product="{{ $product->product_id }}">
                            <span class="plus" onclick="updateqty(this,'plus')"><i class="fa fa-plus"></i></span>
                        </div>



                        <button type="button" style="{{$cart_style }}" data-warehouse-product="{{ $product->warehouse_product_id }}" data-img="{{ $product->image1 }}" data-name="{{ $product->name_en }}" data-price="{{ $product->price }}" data-variant-en="{{ $product->variant_en }}"
                        data-variant_option_name1="{{ $product->variant_option_name1 }}" data-main_category_name="{{$product->main_category_name}}" data-variant_option_name2="{{ $product->variant_option_name2 }}" data-variant_option_name3="{{ $product->variant_option_name3 }}"
                         data-discounted-price="{{ $product->discounted_price }}" data-vendor="{{ $product->vendor_id }}" data-product="{{ $product->product_id }}" data-cgst="{{ $product->cgst_rate }}" data-igst="{{ $product->igst_rate }}" data-sgst="{{ $product->sgst_rate }}" data-special="{{ $product->is_special }}" data-type="{{ $product->type }}" class="mr-4 btn btn-dark addToCart " id="addToCart" onclick=""><i class="icon-shopping-bag "></i> @lang('messages.Add To Cart')</button>


                    </div>
                </div>



                <div class="col-lg-12">

                <div class="short-description">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                            <h4>@lang('messages.Description')</h4>

                            <p class="p-2">{{ $product->description_en}}</p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="product_area product_style2 mt-50">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="section_title md-3">
                            <h3>Generic Products – Not School Specific <a class="text-primary" href="{{ url('product-list',['category_id'=>'products','level'=>'all']) }}">See All</a></h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 product_style2_ocntainer container pb-5 mb-5 wow slideInUp animated">

                        <div class="row product_carousel product2_column5  ">
                            @forelse($genric_products as $product)
                            <div class="item">
                                <div class="product_items">
                                    <article class="single_product">
                                        <figure>
                                            <div class="product_thumb">
                                                <a class="primary_img" href="{{ url('product-details/'.$product->warehouse_product_id.'/'.$product->group_name_slug) }}"><img src="{{ $product->image1 }}" alt=""></a>
                                                @if(!empty($product->discount_label))
                                                <div class="label_product">
                                                    <span class="label_sale">{{$product->discount_label}}</span>
                                                </div>
                                                @endif
                                            </div>
                                            <figcaption class="product_content">
                                            <h4 class="product_name"><a href="{{ url('product-details/'.$product->warehouse_product_id.'/'.$product->group_name_slug) }}" class="product-detail-{{$product->warehouse_product_id}}">{{ $product->name_en }}
                                            </a></h4>
                                            @if(!empty($product->discount_label))
                                            <div class="price_box">
                                                <span class="current_price">{{ env("CURRENCY_CODE") }} {{$product->discounted_price}}</span>
                                                <span class="old_price">{{ env("CURRENCY_CODE") }} {{$product->price}}</span>
                                            </div>
                                            @else
                                            <div class="price_box">
                                                <span class="current_price">{{ env("CURRENCY_CODE") }} {{$product->price}}</span>
                                            </div>
                                            @endif
                                            </figcaption>
                                            <div class="action_links text-center mt-3 ">
                                                <a href="{{ url('product-details/'.$product->warehouse_product_id.'/'.$product->group_name_slug) }}" class="mr-4 btn btn-dark" title="Add to cart "><i
                                                class="icon-shopping-bag "></i> Buy Now</a>
                                                                                                @if(!empty(Session::get('token')) && $product->is_favourite == 1)
                                                <i class="icon-heart select favProducts" data-vendor="{{ $product->vendor_id }}" data-product="{{ $product->product_id }}" data-warehouse-product="{{ $product->warehouse_product_id }}"  data-status="0"></i>
                                                @elseif(!empty(Session::get('token')) && $product->is_favourite == 0)
                                                <i class="icon-heart favProducts" data-vendor="{{ $product->vendor_id }}" data-product="{{ $product->product_id }}" data-warehouse-product="{{ $product->warehouse_product_id }}"  data-status="1"></i>
                                                @else
                                                <i class="icon-heart favProducts" ></i>
                                                @endif
                                            </div>
                                        </figure>
                                    </article>
                                </div>
                            </div>
                            @empty
                            <h4> products not available </h4>
                            @endforelse
                        </div>

                </div>
            </div>
        </div>
    </div>
</section>
<script src="{{ URL::asset('assets/js/vendor/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript">

var special_request = {!! json_encode($special_request_data) !!};

$('.variant').change(function() {
    var url = $('option:selected', this).attr('data-url');
    $(location).attr('href',url);
});

$(document).on("keyup touchend", ".count_new", function(e) {
    e.preventDefault();
    updated_qty = $(this).val();
    if(e.which != 8 && isNaN(String.fromCharCode(e.which)))
    {
        updateqty($(this),'',updated_qty);
    }
    return false;
});

$(document).on("focusout", ".count_new", function(e) {
    e.preventDefault();
    updated_qty = $(this).val();
    if(e.which != 8 && isNaN(String.fromCharCode(e.which)))
    {
        updateqty($(this),'',updated_qty);
    }
    return false;
});
    // for bulk quqntity
    function updateqty(qty, type = '', updated_qty = '') {

        qty_chnages = $(qty).parent().parent();
        shop_detail = qty_chnages.find('.shop-detail-right');
        qty_chnages.find(".minus").css("pointer-events", "none");
        qty_chnages.find(".plus").css("pointer-events", "none");
        var product_id = qty_chnages.attr('data-product');
        var warehouse_product_id = qty_chnages.attr('data-warehouse-product');
        var vendor_id = qty_chnages.attr('data-vendor');
        var price = qty_chnages.attr('data-price');
        var discounted_price = qty_chnages.attr('data-discounted-price');
        var name = qty_chnages.attr('data-name');
        var variant_en = qty_chnages.attr('data-variant-en');
        var variant_option_name1 = qty_chnages.attr('data-variant_option_name1'); 
        var variant_option_name2 = qty_chnages.attr(' data-variant_option_name2');
        var variant_option_name3 = qty_chnages.attr('data-variant_option_name3');
        var cgst = qty_chnages.attr('data-cgst');
        var igst = qty_chnages.attr('data-igst');
        var sgst = qty_chnages.attr('data-sgst');
        var img = qty_chnages.attr('data-img');
        var is_special = qty_chnages.attr('data-special');
        var current_qty = qty_chnages.find('.qty').val();
        if (type == 'plus') {
            updated_qty = parseInt(current_qty) + 1;
        } else if (type == 'minus') {
            updated_qty = parseInt(current_qty) - 1;
        } else {
            if (updated_qty == '') {
                updated_qty = 0;
            } else {
                updated_qty = parseInt(updated_qty);
            }
        }
        addCart(name, variant_en,variant_option_name1,variant_option_name2,variant_option_name3, type, vendor_id, product_id, warehouse_product_id, updated_qty, price, discounted_price, img, is_special, '', '', cgst,sgst,igst);

    }

    $(".addToCart").click(function(e){
          e.preventDefault();
          var product_id = $(this).attr('data-product');
          var warehouse_product_id = $(this).attr('data-warehouse-product');
          var vendor_id = $(this).attr('data-vendor');
          var price = $(this).attr('data-price');
          var discounted_price = $(this).attr('data-discounted-price');
          var name = $(this).attr('data-name');
          var variant_en = $(this).attr('data-variant-en');
          var variant_option_name1 =  $(this).attr('data-variant_option_name1'); 
          var variant_option_name2 =  $(this).attr('data-variant_option_name2');
          var variant_option_name3 =  $(this).attr('data-variant_option_name3');
          var cgst =  $(this).attr('data-cgst');
          var sgst =  $(this).attr('data-sgst');
          var igst =  $(this).attr('data-igst');
          var img = $(this).attr('data-img');
          var is_special = $(this).attr('data-special');
          var product_type = $(this).attr('data-type');
          var main_category_name = $(this).attr('data-main_category_name');
          $(".addToCart").css("pointer-events", "auto");
          $(".minus").css("pointer-events", "none");
          $(".plus").css("pointer-events", "none");
          addCart(name,variant_en,variant_option_name1,variant_option_name2,variant_option_name3,'add', vendor_id, product_id,warehouse_product_id, 1, price,discounted_price,img,is_special,product_type,main_category_name,cgst,sgst,igst);

    });


    function addCart(name,variant_en,variant_option_name1,variant_option_name2,variant_option_name3,action, vendor_id, product_id,warehouse_product_id, total_quantity, price,discounted_price,img,is_special,product_type,main_category_name,cgst,sgst,igst) {

            var token = $('meta[name="csrf-token"]').attr('content');
            var data = {'name':name,'variant_en':variant_en,'variant_option_name1':variant_option_name1,'variant_option_name2':variant_option_name2,'variant_option_name3':variant_option_name3,'img':img,'price':price,'discounted_price':discounted_price,'product_id':product_id,'warehouse_product_id':warehouse_product_id,'vendor_id':vendor_id,'action':action,'is_special':is_special,'type':product_type,'total_quantity':total_quantity,'main_category_name':main_category_name, 'cgst':cgst,'sgst':sgst,'igst':igst};
            var url = '{{url('update-cart')}}';
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                type: 'POST',
                datatype: 'json',
                success: function (resp) {
                    $(".minus").css("pointer-events", "auto");
                    $(".plus").css("pointer-events", "auto");
                    if (resp.http_code == 400) {
                        $(".minus").css("pointer-events", "auto");
                        $(".plus").css("pointer-events", "auto");
                        err_msg = resp.message.replace(/, \\n /g, '<br>');
                        toastr.error(err_msg);
                    } else if (resp.http_code == 200) {
                        addDynamicCart(resp.data,vendor_id, product_id, warehouse_product_id, total_quantity, price,discounted_price,main_category_name);
                        toastr.success(resp.message);
                    } else if (resp.http_code == 401) {
                        toastr.warning(resp.message);
                        var login = '{{ url('/')}}';
                        $(location).attr('href', login);
                    } else if (resp.http_code == 500) {
                        toastr.warning(resp.message);
                    }
                },
                error: function (err) {
                    $(".minus").css("pointer-events", "auto");
                    $(".plus").css("pointer-events", "auto");
                }
            });

    }


    function addDynamicCart(resp,vendor_id, product_id,warehouse_product_id, total_quantity, price,discounted_price,main_category_name)
    {
       if(resp.quantity > 0){
           var discount
             $(".order_subtotal").text("@lang('messages.Rs') "+resp.sub_total);
             $(".order_grandtotal").text("@lang('messages.Rs') "+resp.grand_total);
             $(".order_summary").text('');
            if(resp.delivery_charge > "0" && resp.discount > "0"){
              $('.order_summary').append($("<p>@lang('messages.Discount')<strong class='float-right text-danger order_discount'>- @lang('messages.Rs') "+resp.discount+"</strong></p> <p>@lang('messages.Delivery Charges')<strong class='float-right order_deliveryCharge'>+ @lang('messages.Rs') "+resp.delivery_charge+"</strong></p>"));
            }
            if(resp.discount > "0" && resp.delivery_charge <= "0"){
                $('.order_summary').append($("<p>@lang('messages.Discount')<strong class='float-right text-danger order_discount'>- @lang('messages.Rs') "+resp.discount+"</strong></p>"));
            }
            if(resp.delivery_charge > "0" && resp.discount <= "0"){
                $('.order_summary').append($("<p>@lang('messages.Delivery Charges')<strong class='float-right order_deliveryCharge'>+ @lang('messages.Rs') "+resp.delivery_charge+"</strong></p>"));
            }

          if(total_quantity > 0){
                $(".qty[data-product='"+product_id+"']").val(total_quantity);
          }
          var total = (total_quantity*price).toFixed(3);

            //Cart List Loading
            var li_count = resp.cart_list_count;
            $(".item_count").text(li_count);
            $(".cart_gallery").empty();
            var local = "{{app()->getLocale()}}";
            $.each(resp.cart_list, function (key, value) {
            var name, variant, regular_price, special;
            name = value['name'] == null ? "" : value['name'];
            variant = value['variant'] == null ? "" : value['variant'];
            special = 'name_en';
            if(parseInt(value['discounted_price']) == parseInt(value['price'])) {
                regular_price = '';
            } else {
                regular_price = "@lang('messages.Rs')" + value['price'];
            }
                $('.cart_gallery').append($("<div class='cart_item' data-cart-item='" + value['warehouse_product_id'] + "'><div class='cart_img'><a href='javascript:;'>  <img src='" + value['img'] + "'  alt='' ></a></div><div class='cart_info'> <a href='javascript:;'>" + name + "</a> <p>" + value['qty'] + " x @lang('messages.Rs.') " + value['discounted_price'] +"</p></div><a class='cart_remove remove_cart' data-cart-item='" + value['warehouse_product_id'] + "' href='javascript:;'><i class='icon-x'></i></a></div>"));
            });
       } else {
            //make Amount 0
            $(".order_subtotal").text("@lang('messages.Rs') 0.000");
            $(".order_grandtotal").text("@lang('messages.Rs') 0.000");
            //order_summary
            $(".order_summary").text('');
            var li_count = 0;
            $(".item_count").text(li_count);
            $(".cart_gallery").empty();
            $(".minus").css("pointer-events", "auto");
            $(".plus").css("pointer-events", "auto");
       }

        if (total_quantity == 1) {
        $(".addToCart[data-warehouse-product='" + warehouse_product_id + "']").hide();
        $(".plus_minus[data-warehouse-product='" + warehouse_product_id + "']").show();
    } else if (total_quantity == 0) {
        $(".plus_minus[data-warehouse-product='" + warehouse_product_id + "']").hide();
        $(".addToCart[data-warehouse-product='" + warehouse_product_id + "']").show();
    }
    }

    $(document).on('click', '.favProducts', function (e) {
        e.preventDefault();
        var customer_id = $('#customer_id').val();
        if (customer_id <= 0) {
            if (confirm('Please Login')) {
                window.location.replace("{{url('/')}}");
                return false;
            }
        } else {
            var token = $('meta[name="csrf-token"]').attr('content');
            var status = $(this).attr("data-status");
            var product_id = $(this).attr('data-product');
            var warehouse_product_id = $(this).attr('data-warehouse-product');
            var vendor_id = $(this).attr('data-vendor');
            //var vendor_id = '1';
            var data = {
                'product_id': product_id,
                'status': status,
                'warehouse_product_id': warehouse_product_id,
                'vendor_id': vendor_id
            };
            var url = '{{url('update-fav')}}';
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: data,
                type: 'POST',
                datatype: 'JSON',
                success: function (resp) {
                    if (resp.http_code == 400) {
                        toastr.warning(resp.message);
                    } else if (resp.http_code == 200) {
                        toastr.success(resp.message);
                        window.location.reload();
                    } else if (resp.http_code == 500) {
                        toastr.success(resp.message);
                    }
                }
            });
        }
    });
    function restrictMinus(e) {
        var inputKeyCode = e.keyCode ? e.keyCode : e.which;
        if (inputKeyCode != null) {
            if (inputKeyCode == 45) e.preventDefault();
        }
}

$(".owl-carousel").owlCarousel();

</script>

<style>

    #sync3.owl-carousel .owl-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 500px;
    }

    #sync3.owl-carousel .owl-item .item{
        display: flex;
        justify-content: center;
        align-content: center;
    }



    /*#sync1 .item img{
        min-width: 500px;
        max-width: 500px;
        margin: 0px auto;
        display: table;
    }*/

    /*remove arrow in number field*/
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }
</style>
@endsection