@extends('apex-layouts.main')

@section('title',$shop->title. "-Pos")
@section('header-right')
    <b class="mr-1 mb-1"><i class="fa fa-phone"></i>&nbsp;{{ $shop->phone }}</b>
@endsection
@section('content')
    <section>
        <div class="card p-4 overflow-scroll" style="height: 500px">
            <div class="card-body">
                <div class="row">
                    @foreach($meals as $meal)
                        <div class="col-lg-2 col-md-3 col-sm-6 mb-2 mb-md-0  mb-35">
                            <div class="card card-inverse bg-white text-center">
                                <div class="card-content" style="height: 210px;">
                                    <div class="card-img">
                                        <a class="image-show" data-title="{!! $meal->title !!}">
                                            <img alt="Standard Egg"
                                                 class="img-thumbnail img-xl"
                                                 data-src="{{($meal->logo)?env("IMAGE_BASE_URL")."/".$meal->logo:URL::asset(config("params")['images']["avatar"])}}"
                                                 width="180" height="180"
                                                 src="#">
                                        </a>
                                    </div>
                                    <div class="card-body text-muted my-3">
                                        <h6 class="card-title text-muted">{!! $meal->title !!}</h6>
                                        <p class="card-text font-small-1 text-muted mb-0">
                                                <span class="badge badge-light"><strong
                                                        class="text-muted">Kcal: {!! $meal->totalCalories !!}</strong></span>&nbsp;
                                            G :{!! $meal->totalGrams !!}
                                        </p>
                                        <p class="amount"><b>Rs: {{$meal->perOrderAmount}}</b></p>
                                    </div>

                                </div>
                            </div>
                            <div class="center">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                      <button type="button" class="btn btn-danger btn-number" data-type="minus"
                                              amount="{{$meal->perOrderAmount}}" data-fild-id="count-{{$meal->id}}"
                                              data-field="quant-{{$meal->id}}">
                                        <span class="fa fa-minus-square"></span>
                                      </button>
                                    </span>
                                    <input type="text" disabled name="quant-{{$meal->id}}" meal-id="{{$meal->id}}"
                                           id="count-{{$meal->id}}" amount="{{$meal->perOrderAmount}}"
                                           class="form-control input-number" value="0" min="0" max="100">
                                    <input type="hidden" name="type-{{$meal->id}}" id="type-{{$meal->id}}"
                                           amount="{{$meal->perOrderAmount}}">
                                    <span class="input-group-btn">
                                      <button type="button" class="btn btn-success btn-number"
                                              amount="{{$meal->perOrderAmount}}" data-fild-id="count-{{$meal->id}}"
                                              data-type="plus" data-field="quant-{{$meal->id}}">
                                          <span class="fa fa-plus-square"></span>
                                      </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <form method="post" class="form" id="posForm"
          action="{{route('pos.placeorder',$shop->id)}}">
        @csrf

        <section>
            <div class="px-3">
                <h4 class="">Consumer information</h4>
                <hr/>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="hidden" name="mealData" id="mealData">
                            <input type="hidden" name="totalAmount" id="totalAmount">
                            <input type="hidden" name="coupon_id" id="coupon_id">
                            <input type="hidden" name="couponDiscountAmount" id="couponDiscountAmount">
                            <input type="phone" id="phone"
                                   oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
                                   pattern="[0-9]{4}[0-9]{3}[0-9]{4}"
                                   maxlength="11"
                                   class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}"
                                   value="{{ (old('phone'))? old('phone'): $lead->phone }}"
                                   placeholder="phone"
                                   name="phone" autofocus>
                            @if ($errors->has('phone'))
                                <span class="invalid-feedback"
                                      role="alert"><strong>{{ $errors->first('phone') }}</strong></span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="_name">Name</label>
                            <input type="text" id="members_name"
                                   class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                   value="{{ (old('name'))? old('name'): $lead->name }}"
                                   placeholder=" name"
                                   name="name" autofocus>

                            @if ($errors->has('name'))
                                <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('name') }}</strong>
                                                    </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="members_email"
                                   class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                   value="{{ (old('email'))? old('email'): $lead->email }}"
                                   placeholder="email"
                                   name="email" autofocus>

                            @if ($errors->has('email'))
                                <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('email') }}</strong>
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="address">Address</label>
                            <input type="text"
                                   class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}"
                                   placeholder="Address"
                                   value="{{ (old('address'))? old('address'): $lead->address }}"
                                   id="members_address"
                                   name="address">
                            @if ($errors->has('address'))
                                <span class="invalid-feedback"
                                      role="alert"><strong>{{ $errors->first('address') }}</strong></span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="pickup_time">Order Type</label>
                        <ul class="list-unstyled mb-0">
                            <li class="d-inline-block mr-2">
                                <div class="radio radio-primary">
                                    <input type="radio" name="orderType" id="orderType-1" value="DINNING" checked="">
                                    <label for="orderType-1" class="font-medium-1">Dinning</label>
                                </div>
                            </li>
                            <li class="d-inline-block mr-2">
                                <div class="radio radio-secondary">
                                    <input type="radio" name="orderType" value="TAKEAWAY" id="orderType-2">
                                    <label for="orderType-2" class="font-medium-1">Take Away</label>
                                </div>
                            </li>
                            <li class="d-inline-block mr-2">
                                <div class="radio radio-success">
                                    <input type="radio" name="orderType" value="DELIVERY" id="orderType-3">
                                    <label for="orderType-3" class="font-medium-1">Delivery</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="source">Sources</label>
                            <select id="source" name="source" class="form-control">