@extends('layouts.master')

@section('title', 'Pre Orders')

@yield('navbar')

@yield('alerts')

@section('content')

<style>
    .panel{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 15px;


}




.btn-primary{
    background: #3a5795!important;
    color:white;
}
.panel-heading{
     background: #3a5795!important;
    color:white;
}.panel-heading h3,.form-group label {
     /*background: #3a5795!important;*/
    color:white;
}

input{
    border-radius: 15px!important;
}

select{
    border-radius: 15px!important;
}
.form-group{
    padding: 10px;
}.form-group label{
    padding: 8px;

}
  #DataTables_Table_1_previous a{
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

#DataTables_Table_1_next a{
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}
</style>

<div class="container">

    {!! Form::open(['url' => ['preorder/store'], 'method' => 'POST']) !!}
	<div class="row">
        <div class="panel panel-default">

            <div class="panel-heading">
                                <h3>Pre order </h3>


               
<div class="form-inline">
    <div class="form-group">
         <label for="">Select the date: </label>
                    <input type="date" value="2026-01-28" min='2026-01-27' name="order_date" class="form-control">
                        <input type="hidden" id="deli_time_input" name="delivery_time" value="">


    </div>


     <div class="form-group">
       
                         <label for="">Select delivery time: </label>
                        <select id="deli_time" class="form-control">
                            <option >--Select a delivery time--</option>
                            <option v  alue="morning">Morning</option>
                            <option value="after noon">After noon</option>
                            <option value="evening">Evening</option>
                        </select>

    </div>
 
<di class="form-group">



                
 <label for="">Select Item:</label>
                        <select id="additem" class="form-control">
                            <option>--select item here--</option>
                            @foreach($items as $item)
                                <option value="{{ $item->item_store_id }}" >{{ $item->item->name }}</option>
                            @endforeach
                        </select>




</div>



      
            </div>

            <div class="panel-body">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <th>Item</th>
                    <th>Delivery time</th>
                    <th>Qty</th>
                    </thead>
                    <tbody id="itemtable">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="panel-footer">
                <button id="btn-order" disabled class="btn btn-primary" type="submit">Order</button>
            </div>

        </div>
	</div>
	{!! Form::close() !!}
<div class="container">

	<div class="panel panel-info">
		<div class="panel-heading"><h3>Your pre orders</h3></div>
		<div class="panel-body">
		<table class="table table-hover">
			<thead>
				<th>Item</th>
				<th>Qty</th>
				<th>Date</th>
				<th>Action</th>
			</thead>
				<tbody>
					@foreach($preorders as $preorder)
					{!! Form::open(['url' => ['preorder/delete', $preorder->preorder_id], 'method' => 'DELETE']) !!}
						<tr>
							<td>{{ $preorder->item_store->item->name }}</td>
							<td>{{ $preorder->qty }}</td>
							<td>{{ $preorder->date }}</td>
							<td><button type="submit" class="btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button></td>
						</tr>
					{!! Form::close() !!}
					@endforeach
				</tbody>
			</table>
		</div>
		<div class="panel-footer">
			
		</div>

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




@endsection



@section('scripts')  
    <script>
    $(document).ready(function(){
    	$('#additem').on('change', function(){
    		var item = $(this).find(":selected").text();
            var deli_time = $('#deli_time').find(":selected").text();
    		var id = $(this).find(":selected").val();
    		if(item != '--select item here--'){
                if(deli_time != '--Select a delivery time--') {
                    $('#itemtable').append(
                            '<tr><td>' + item + '</td><td>' + deli_time + '</td><td><input class="form-control" min="0.5" step="0.1"  id="qty" name="qty[' + id + ']" type="number" value="1"></td></tr>'
                    );
                    $('#itemtable').append('<input type="hidden" name="item_Store[' + id + ']" value="' + id + '">');
                    $('#itemtable').append('<input type="hidden" name="id[' + id + ']" value="' + id + '">');
                    $(this).find(":selected").remove();
                    $('#btn-order').removeAttr("disabled");
                    $('#deli_time_input').val($('#deli_time').val());
                    $('#deli_time').attr('disabled', 'true');
                }

    		}
    	});

swal(" You Can Book Your Orders Now", "Price will be applicable on delivery date", "success");
        
    });
    </script>
@endsection