@extends('layouts.merchant')

@section('content')
<div class="container">
  <div class="content">
    <div class="card">
      <div class="card-header">
        <h6 class="card-title">@lang('keyword.create')ការ@lang('keyword.laundry')</h6>
      </div>
      <div class="card-body">
        <form class="" action="{{ route('merchant.storeLaundry')}}" method="post">
          @csrf
          <div class="form-group row">
  		     	<label class="col-form-label col-lg-2">@lang('keyword.customer')</label>
  		        <div class="col-lg-10">
  			          <select class="custom-select" name="customer_id">
                    @foreach ($customers as $customer)
                      <option value="{{ $customer->id }}">{{$customer->name}}</option>
                    @endforeach
  			          </select>
  		        </div>
  		    </div>
          <div class="form-group row">
          	<label class="col-form-label col-lg-2">@lang('keyword.merchant')</label>
         	    <div class="col-lg-10">
                <select class="custom-select" name="merchant">
                    <option value="{{$merchant->id}}">{{$merchant->brand_name}}</option>
                </select>
              </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.code')</label>
            <div class="col-lg-10">
    						<input type="text" name="code" class="form-control" placeholder="001" value="{{ $code }}">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.receiver')</label>
            <div class="col-lg-10">
    						<input type="text" name="receiver" class="form-control" id="receiver_name"  value="">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.weight')</label>
            <div class="col-lg-10">
    						<input type="number" name="weight" class="form-control" placeholder="0.00" min="0" step="0.01">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.price') ($)</label>
            <div class="col-lg-10">
    						<input type="number" name="priceUS" class="form-control" placeholder="0.00" min="0" step="0.01">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.price') (@lang('keyword.khr'))</label>
            <div class="col-lg-10">
    						<input type="number" name="priceKH" class="form-control" placeholder="10000" min="0" step="100">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.comment')(មិនចាំបាច់)</label>
            <div class="col-lg-10">
    						<input type="text" name="comment" class="form-control" placeholder="@lang('keyword.comment')">
    				</div>
          </div>
          @include('admin.laundry.detail')
          <div class="row mb-3">
            <label class="col-form-label col-lg-2">លក្ខណះនៃការបោក</label>
            <div class="row justify-content-between m-0 col-lg-10 row">
                <div claas="form-group row">
                  <input type="checkbox" name="wash" value="1">
                  <label>នៅសើម</label>
                </div>
                <div claas="form-group row">
                  <input type="checkbox" name="hang" value="1">
                  <label>ព្យួរ</label>
                </div>
                <div claas="form-group row">
                  <input type="checkbox" name="dry-c" value="1">
                  <label>បោករួច</label>
                </div>
                <div claas="form-group row">
                  <input type="checkbox" name="iron" value="1">
                  <label>អ៊ុត</label>
                </div>
                <div claas="form-group row">
                  <input type="checkbox" name="stain" value="1">
                  <label>ដិតស្នាម</label>
                </div>
              </div>
          </div>
          <div class="row">
            <label class="col-form-label col-lg-2">@lang('keyword.option')</label>
            <div class="row justify-content-between m-0 col-lg-10">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="custom_checkbox_stacked_unchecked" name="paid" value="1" checked="">
                <label class="custom-control-label" for="custom_checkbox_stacked_unchecked">@lang('keyword.paid')</label>
              </div>
              <div class="form-group row">

                  <div class="">
                      <select class="custom-select" name="status">
                        <option value="1">@lang('keyword.pending')</option>
                        <option value="2">@lang('keyword.ready')</option>
                        <option value="3">@lang('keyword.complete')</option>
                      </select>
                  </div>
              </div>
              <div class="">
                <input type="submit" name="" class="btn btn-primary" value="@lang('keyword.create')">
              </div>
            </div>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {


    $('#receiver_name').keyup(function(){
      var merchant_id = $('select[name="merchant"]').val();
      var receiver = $(this).val();
            $.ajax({
                url: "{{route('receiver.query')}}",
                data: {'_token': '{{ csrf_token() }}','merchant': merchant_id,'receiver': receiver},
                dataType: "json",
                type: "POST",
                success: function (data) {
                  // console.log(data[0].name);
                  $('#receiver_name').autocomplete({
                  source: data
                });
                }
          });
      });
    });
</script>
@endsection