@extends('layouts.backend')
@section('extraCss')  
 <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
 <style>
table.TableAddDelete{
    width: 100%;
    border-collapse: collapse;
    margin-top:20px;
}
table.TableAddDelete th, table.TableAddDelete td{
    border: 1px solid #cdcdcd;
    padding: 7px;
}
</style>
@endsection
@php $challenType = ['1'=>'Return','2'=>'Non Return']; @endphp
@section('mainContentArea')

<div class="card card-default">
    <div class="card-header">
        <h4>
            Add Challan            
        </h4>
    </div>

    @if (count($errors) > 0)
   <div class = "alert alert-danger">
      <ul>
         @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
         @endforeach
      </ul>
   </div>
   @endif
    <div class="card-body">
       
        <form   method="POST" enctype="multipart/form-data" action="{{ route('challan.issued.save') }}" >
        @csrf
        
        <div class="row"> 

            <div class="col-md-4 form-group">
                <label for="challenType">Challen Type</label>
                <select name="challenType" id="challenType" class="form-control select2" required>
                    <option value="">Select Option</option>
                    @foreach($challenType as $key => $statusv)
                    <option value="{{ $key }}" {{ old('challenType') == $key ? 'selected' : '' }}>{{ $statusv }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4 form-group">
                <label for="order_number">Order Number</label>
                <input name="order_number" id="order_number" class="form-control"  value="{{old('order_number')}}">
            </div>
            

            <div class="col-md-4 form-group">
                <label for="reason">Reason </label>
                <textarea name="reason" id="reason" class="form-control" >
                    {{old('reason')}}
                </textarea>
            </div>     
          
          
          </div>

           <div class="row">

                <div class="col-md-4 form-group">
                    <label for="Style">Style </label>
                    <input type="text" class="form-control txtTeamAddDelete"  required>
                </div> 

                <div class="col-md-4 form-group">
                    <label for="Quantity">Quantity</label>
                    <input type="number" class="form-control txtCricketerAddDelete" min='0' required>
                </div> 

                <div class="col-md-4 form-group">
                    <label for="user_name">Issued To Name</label>
                    <input type="text" class="form-control txtScoreAddDelete" required >
                </div> 

                <button type="button" class="btnrowAddDelete">Add New Row</button>   

            </div>

            <div class="row">

            <table class="TableAddDelete">
                <thead>
                    <tr>                                  
                        <th>Style</th>
                        <th>Quantitye</th>
                        <th>Issued To Name</th> 
                        <th>Delete</th>                                                                       
                    </tr>                                   
                </thead>    
                <tbody>                                   
                </tbody>
            </table>

            </div>
           
            <div class="col-md-12 text-Center" style="margin:20px;">
                <button type="submit" class="btn btn-success" ><i class="fa fas fa-save"></i> Submit</button>
                
            </div>
        
    </form>

    </div>
</div>
@endsection

@section('extraJs')
<script>
$(document).ready(function(){
    $('.btnrowAddDelete').click(function(){
        var txtTeamAddDelete = $('.txtTeamAddDelete').val();
        var txtCricketerAddDelete = $('.txtCricketerAddDelete').val();
        var txtScoreAddDelete = $('.txtScoreAddDelete').val();
        $('.TableAddDelete tbody').append("<tr><td><input name='style[]' id='article' class='form-control' value="+txtTeamAddDelete+"  ></td><td><input name='quantity[]' id='qty' class='form-control' value="+txtCricketerAddDelete+" ></td><td><input name='user_name[]' id='user' class='form-control' value="+txtScoreAddDelete+" ></td><td><button type='button' class='btndeleterowadded btn'>x</button></td></tr>");
       
    });
    $(document).on('click', 'button.btndeleterowadded', function(){
        $(this).closest('tr').remove();
        return false;
    });
});
</script>
@endsection