@extends('includes.master')

@section('content')
    <form action="{{route("ghazkm.store")}}" method="post">
        @csrf
        @if($errors->any())
            @foreach($errors->all() as $error)
                <p>{{$error}}</p>
                @endforeach
            @endif
        <input type="hidden" name="user" value="{{auth('profile')->user()}}">
        <div class="control">
            <a href="{{url('/')}}"><img style="width: 20px;margin-top: -3px;" src="{{url('/assets/images/img/icon/rightarrow.png')}}" class="hom"></a>
            <h1 class="nameintheamidd">خدمة غازكم</h1>
            <a onclick="openNav()" ><img style="margin-top: -27px;" src="{{url('/assets/images/img/icon/menu.png')}}"  class="set"></a>
        </div>
        <div>

    <ul class="nav nav-tabs" role="tablist" style="width: 98%;margin-left: 1%;">
        <li onclick="document.getElementById('id01').style.display='block'" onclick="document.getElementById('id02').style.display='none'" role="presentation" ><a style="height: 86px;" aria-controls="home" role="tab" data-toggle="tab"><img src="{{url('/assets/images/img/icon/gas.svg')}}" class="ghazimg12"></a><h1 class="ghaztitle">دبة غاز بلاستك</h1></li>
        <li onclick="document.getElementById('id02').style.display='block'" onclick="document.getElementById('id01').style.display='none'"role="presentation" ><a style="height: 86px;" aria-controls="profile" role="tab" data-toggle="tab"><img src="{{url('/assets/images/img/icon/gasoline.svg')}}" class="ghazimg12"></a><h1 class="ghaztitle">دبة غاز حديد</h1></li>
    </ul>
    </div>

        <h1 style="text-align: center;font-family: psfont;font-size: 20px;color: #24c9d6;margin-top: 40px;">الكمية</h1>

        <div class="quantghazkm">
    <p>
      </p><div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quantity" style="outline: none;border-radius: 6px 0px 0px 6px;border: 1px solid #19b5c2;color: #19b5c2;">
                  <span class="glyphicon glyphicon-minus"></span>
              </button>
          </span>
          <input type="number" name="quantity" class="form-control input-number" style="margin-left: -1%;height: 34px;padding: 13px 0px 0px;font-size: 18px;text-align: center;" value="1" min="1" max="99">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" style="outline: none;border-radius: 0px 6px 6px 0px;border: 1px solid #19b5c2;color: #19b5c2;" data-type="plus" data-field="quantity">
                  <span class="glyphicon glyphicon-plus"></span>
              </button>
          </span>
      </div>
      </div>

<select class="form-control buttghaz" name="order_type">
            <option>نوع الطلب</option>
            <option value="change">تبديل</option>
            <option value="new">جديد</option>
        </select>
</br>

        <h1 class="shippdetiil">معلومات التوصيل</h1>


        @if(!auth('profile')->check())
        <div class="form-group">
            <input type="text" class="form-control buttghaz" name="name" value="" placeholder="الأسم الكامل" required>
        </div>
        <div class="form-group">
            <input type="text" class="form-control buttghaz" name="phone" value="" placeholder="رقم الهاتف" required>
        </div>
        <div class="form-group">
            <input type="text" class="form-control buttghaz" name="address" value="" placeholder="المحافطة" required>
        </div>
        <div class="form-group">
            <input type="text" class="form-control buttghaz" name="city" value="" placeholder="العنوان" required>
        </div>
        <div class="form-group">
            <input type="text" class="form-control butt1w" name="notes" value="" placeholder="ملاحظات لمندوب التوصيل">
        </div>
        @endif

        <div class="selecttime1">
            <h1 class="selecttimeh1">وقت التوصيل</h1>
            <input class="selecttimeh21 booking" type="radio" name="booking" value="now"> <h1 class="bookdatetext1">اسرع وقت</h1><br>
            <input class="selecttimeh22 booking" type="radio" name="booking" value="later"><input class="selectdateinputu" name="booking_date" type="text" id="txtbox" placeholder="تحديد"> <h1 class="bookdatetext2">وقت لاحق</h1><br>
        </div>
        <script>
  var dtt = document.getElementById('txtbox')
  dtt.onfocus = function (event) {
      this.type = 'datetime-local';
      this.focus();
  }
</script>
        <div class="form-group" style="margin-top: 19px;">
            <input type="text" class="form-control buttghaz" name="zip" value="" placeholder="بروموكود" ><h1 style="font-family: psfont;font-size: 12px;margin-top: -20px;margin-left: 16px;width: 70px;">تطبيق</h1>
        </div>
        <div class="carttabekghazkm"><a class="header-top-entry open-cart-popup" id="notify" style="width: 100%;"><div class="title" style="text-align: right;font-size: 17px;color: #fe3232;"><span style="font-size: 15px;color: #fff;font-family: psfont;">     :    مجموع السعر    <span style="float: left;margin-top: 6px;margin-left: 20px;"><b id="carttotal">0.00</b><span style="font-size: 18px;"> د.ع  <span></div></a>
            <button type="submit" class="buttoncheackouttghaz" >تثبيت الطلب</button>
        </div>
</br>
</br></br>


<div id="id01" class="w3-modal modalnonee">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div>
        <select name="material_type" class="form-control">
            <option value="plastic" selected>دبة بلاستك</option>
            <option  value="metal">دبة حديد</option>
        </select>
        </div>
      </div>
    </div>
  </div>

  <div id="id02" class="w3-modal modalnonee">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div>
        <select name="material_type" class="form-control">
            <option  value="metal" selected>دبة حديد</option>
            <option value="plastic">دبة بلاستك</option>

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

    </form>

<script>
    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

    <script>
@endsection