@extends('layouts.app')
@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<div class="row">
				<div class="col-12">
					<div class="page-title-box">
						<h4 class="page-title">Settings</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{route('dashboard')}}">Dashboard</a>
							</li>
							<li class="breadcrumb-item active">
							  Web Settings
							</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- end page title -->

			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="table-responsive">
								<table class="table mb-0 table-bordered " >
									<thead class="thead-dark">
										<tr>
											<th>Name</th>
											<th>Value</th>
											<th class="text-center">Action</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>Slot Limit</td>
											<td>{{ $support->slot_limit }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->slot_limit }}" data-name="slot_limit" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Oja Margin</td>
											<td>{{ $support->oja_margin ?? '0' }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->oja_margin ?? '0' }}" data-name="oja_margin" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Service Charges</td>
											<td>{{ $support->service_charges }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->service_charges }}" data-name="service_charges" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Maximum Delivery Miles</td>
											<td>{{ $support->max_delivery_miles }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->max_delivery_miles }}" data-name="max_delivery_miles" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Next Day Delivery Miles</td>
											<td>{{ $support->next_day_delivery_miles }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->next_day_delivery_miles }}" data-name="next_day_delivery_miles" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Order Cut Off Time</td>
											<td>{{ $support->order_cut_off_time }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editTimeWebSetting" data-value="{{ $support->order_cut_off_time }}" data-name="order_cut_off_time" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
										<tr>
											<td>Minimum Order Amount</td>
											<td>{{ $support->minimum_order_amount }}</td>
											<td style="width:120px;">
												<a class="btn btn-sm btn-warning waves-effect waves-light editWebSetting" data-value="{{ $support->minimum_order_amount }}" data-name="minimum_order_amount" data-toggle="tootip" title="Edit">
													<i class="fa fa-edit"></i>
												</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<!-- end card-body-->
					</div>
					<!-- end card-->
				</div>
				<!-- end col -->

			</div>

		</div>
		<!-- container -->

	</div>
	<!-- content -->

</div>

<div class="modal" tabindex="-1" id="editModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title field_name"></h5>
        <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ route('updateWebSettings') }}" method="post">
          <div class="modal-body">
            	@csrf
            	<input type="hidden" class="form-control" required value="" id="field_name" name="field_name">
            	<input type="hidden" class="form-control" required value="" id="readable_field_name" name="readable_field_name">
            	<input type="text" class="form-control" required value="" id="field_value" name="field_value">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit time for order cut off -->
<div class="modal" tabindex="-1" id="editTimeModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title time_field_name"></h5>
        <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ route('updateWebSettings') }}" method="post">
          <div class="modal-body">
            	@csrf
            	<input type="hidden" class="form-control" required value="" id="time_field_name" name="field_name">
            	<input type="hidden" class="form-control" required value="" id="time_readable_field_name" name="readable_field_name">
            	<input type="time" class="form-control" required value="" id="time_field_value" name="field_value">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary closeModal" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
      </form>
    </div>
  </div>
</div>


<script>

	 $(".editWebSetting").click(function(){
	 
	 	var thisVal = $(this).data('value');
	 	var thisName = $(this).data('name');
	 	$('#field_value').val(thisVal);
	 	$('#field_name').val(thisName);
	 	
	 	//Set readable field name on modal
	 	var fieldName = readableFieldName(thisName);
	 	$('.field_name').html("Edit " + fieldName);
	 	$('#readable_field_name').val(fieldName);
	 	
	 	$('#editModal').show();
	 	
    }); 
    
    //Script to edit order cut off time
    $(".editTimeWebSetting").click(function(){
	 
	 	var thisVal = $(this).data('value');
	 	var thisName = $(this).data('name');
	 	$('#time_field_value').val(thisVal);
	 	$('#time_field_name').val(thisName);
	 	
	 	//Set readable field name on modal
	 	var fieldName = readableFieldName(thisName);
	 	$('.time_field_name').html("Edit " + fieldName);
	 	$('#time_readable_field_name').val(fieldName);
	 	
	 	$('#editTimeModal').show();
	 	
    });
    
    //function to set a string in readable form
    function readableFieldName(str) {
      var i, frags = str.split('_');
      for (i=0; i<frags.length; i++) {
        frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
      }
      return frags.join(' ');
    }
    
    $(".closeModal").click(function(){
    	$('#editModal').hide();
    });

</script>

@endsection