@extends('layouts.master')
@section('content')
<h3>Form add new order service</h3>
@if(Session::has('message'))       
<p class="alert alert-success" align="center"> {{Session::get('message')}}</p>
@endif
<div class="row clearfix">
    <div class="col-lg-12">
        <div class="card">
            <div class="body">
                <h5><strong>Order ID: </strong> <mark>--------</mark></h5>
                <div class="row">                                
                    <div class="col-md-6 col-sm-6">
                        <address>
                            <strong>Client name : ----------</strong><br>
                            <abbr title="Phone">Client Email : </abbr> -----------
                        </address>
                    </div>
                    <div class="col-md-6 col-sm-6 text-right">
                        <p class="mb-0"><strong>Order Date : </strong> --------------------</p>
                                                        
                    </div>
                </div>
            </div> 
            <hr>
            <div class="">
            <a href="/order_details" class="btn btn-secondary"> Return to order details list</a>
        </div>
        <div class="container">    
     <br />
     <h3 align="center">Add new order service</h3>
     <br />
   <div class="table-responsive">
                <form method="post" id="dynamic_form" action="/save_order_details">
                 <span id="result"></span>
                 <table class="table table-bordered table-striped" id="user_table">
               <thead>
                <tr>
                    <th width="35%">Plate</th>
                    <th width="35%">Service</th>
                    <th width="30%">Date</th>
                </tr>
               </thead>
               <tbody>
               </tbody>
               <tfoot>
                <tr>
                    <td colspan="4" align="right">&nbsp;</td>
                    <td>
                  @csrf
                  <input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
                 </td>
                </tr>
               </tfoot>
           </table>
                </form>
   </div>
  </div>
 </div>
 </div>
</div>
@endsection
@section('page-script')
<script>
$(document).ready(function(){
 var count = 1;
 dynamic_field(count);
 function dynamic_field(number)
 {
  html = '<tr>';
        html += '<td><select name="id_vehi[]" class="form-control show-tick ms select2" data-placeholder="Select plate" required><option value="">Select plate</option>@foreach($all_auto as $auto)<option value="{{$auto->id_vehicule}}">- {{$auto->num_immatriculation}}</option>@endforeach</select></td>';
        html += '<td><select name="id_serv[]" class="form-control show-tick ms select2 id_serv" data-placeholder="Select service" required><option value="">Select service</option>@foreach($sub_serv as $sub)<option value="{{$sub->id_sous_serv}}">- {{$sub->name_sous_serv}} ({{$sub->price_sous_service}}FBU)</option>@endforeach</select></td>';
        html += '<td><input type="date" name="date[]" class="form-control" required /></td>';
        html += '<td><input type="hidden" name="order_id[]" class="form-control" value="{{$recent_order->id_order}}" required></td>';
        html += '<td><input type="hidden" name="fait_par[]" class="form-control" value="{{Auth::user()->id}}" required></td>';

        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {   
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').html(html);
        }
 }
 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
 });
 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });
});
</script>


@stop