@extends('layouts.main')

@section('title', 'Customer view')

@section('css')
  <link rel="stylesheet" href="/star_admin/css/feather.css">
  <link rel="stylesheet" href="/star_admin/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="/star_admin/css/themify-icons.css">
  <link rel="stylesheet" href="/star_admin/css/typicons.css">
  <link rel="stylesheet" href="/star_admin/css/simple-line-icons.css">
  <link rel="stylesheet" href="/star_admin/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="/star_admin/css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <link
      href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />
    <style>
.form-group label {
    font-size: 14px;
    font-weight: normal;
}
</style>
    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load jquery UI ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  @endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')


           
            <div class="col-md-6 grid-margin stretch-card" style="margin-left: 5%;">
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Add deal</h4>

                  <form class="forms-sample" method="POST" action="/create-deal">
                    <div class="form-group row">
                      <label for="exampleInputUsername2" class="col-sm-3 col-form-label">Property</label>
                      <div class="col-sm-9">
                        <select name="property_id" id="" class="form-control" >
                            @foreach($properties as $property)
                                <option value="{{$property->id}}">{{$property->name}}</option>
                            @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="deal_name" class="col-sm-3 col-form-label">Deal</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" required id="deal_name" placeholder="Name of deal" name="deal_name">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="deal_type" class="col-sm-3 col-form-label">Deal Type</label>
                      <div class="col-sm-9">
                        <select name="deal_type" id="" class="form-control" >
                            <option value="Real">Real</option>
                            <option value="Jackup">Jackup</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row" style="display:none">
                      <label for="datepicker6" class="col-sm-3 col-form-label">Start date</label>
                      <div class="col-sm-9">
                      <input type="text" class="form-control" id="datepicker6" name="deal_start" required/>
                                    </div>
                    </div>
                    <div class="form-group row" style="display:none">
                      <label for="datepicker7" class="col-sm-3 col-form-label">End date</label>
                      <div class="col-sm-9">
                      <input type="text" class="form-control" id="datepicker7"  name="deal_end" required/>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="deal_status" class="col-sm-3 col-form-label">Deal Status</label>
                      <div class="col-sm-9">
                        <select name="deal_status" id="" class="form-control" >
                            <option value="Active">Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="coupon_id" class="col-sm-3 col-form-label">Coupon</label>
                      <div class="col-sm-9">
                        <select name="coupon_id" id="coupon_id" class="form-control" >
                            @foreach($coupons as $coupon)
                                <option value="{{$coupon->id}}" val="{{$coupon->value}}" 
                                start="{{$coupon->date_time_from}}" end="{{$coupon->date_time_to}}">{{$coupon->name}}</option>
                            @endforeach
                        </select>
                      </div>
                    </div>
                    {{csrf_field()}}
                    <input type="hidden" name="deal_rate" id="deal_rate" value=""/>
                    <button type="submit" class="btn btn-success me-2 pull-right">Add</button>
                  </form>
                </div>
              </div>
               <div class="col-md-6 grid-margin stretch-card">
              
            </div>


                
@endsection

@section('scripts')
<script type="text/javascript">
   $(function () {
       $('#datepicker6').datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function(dateText) {
            var selectedDate = new Date(dateText);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay)
                $('#datepicker7').datepicker( "option", "minDate", endDate );
            }
       });
       $('#datepicker7').datepicker({
   useCurrent: false,
   dateFormat: 'yy-mm-dd',
   onSelect: function(dateText) {
            var selectedDate = new Date(dateText);
            var msecsInADay = 86400000;
            var endDate = new Date(selectedDate.getTime() + msecsInADay)
                $('#datepicker6').datepicker( "option", "maxDate", endDate );
            }
   });
   $("#deal_rate").val($("#coupon_id option:selected").attr('val'));
   $("#datepicker6").val($("#coupon_id option:selected").attr('start'));
   $("#datepicker7").val($("#coupon_id option:selected").attr('end'));
   $("#coupon_id").change(function(){
    $("#deal_rate").val($("option:selected", this).attr('val'));
    $("#datepicker6").val($("#coupon_id option:selected").attr('start'));
    $("#datepicker7").val($("#coupon_id option:selected").attr('end'));
   });
   });
</script>


@endsection