@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 
 $months = ['January' => 'January','February' => 'February','March' => 'March','April' => 'April','May' => 'May','June' => 'June','July'=> 'July',
 'August' => 'August','September' => 'September','October' => 'October','November' => 'November','December' => 'December'];
@endphp
@section('mainContentArea')

<div class="card card-default">
    <div class="card-header">
        <h4>
            Add MTD      
            <a href="{{ route('pos-target') }}" class="btn btn-info float-right btn-sm"> Back</a>      
        </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('pos-target.store') }}" >
        @csrf

        <div class="row"><h5> POS Target </h5><hr/></div>
        
        <div class="row"> 

            <div class="col-md-4 form-group">
                <label for="challenType">POS</label>
                    <select name="store" id="store" class="form-control select2" >
                        <option value="">Select Pos</option>
                        @foreach($ALL_POS as $warehouse)
                        <option value="{{ $warehouse->id }}" {{ request('warehouse_id') == $warehouse->id ? 'selected' : '' }}>{{ $warehouse->warehouse_code . ' ('.$warehouse->name.')' }}</option>
                        @endforeach
                    </select>
            </div>

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

            <div class="col-md-4 form-group">
                <label for="target">Target Amount </label>
                <input type='number' name="target" id="target" class="form-control" required value="{{old('target')}}" min =0>                
            </div>  

            <div class="col-md-4 form-group">
                <label for="upt">Target UPT </label>
                <input type='text' name="uptpos" id="upt" class="form-control" required value="{{old('upt')}}" min =0>                
            </div>

            <div class="col-md-4 form-group">
                <label for="abp">Target ABV </label>
                <input type='text' name="abppos" id="abp" class="form-control" required value="{{old('abp')}}" min =0 >                
            </div>   
            <div class="col-md-4 form-group">
                <label for="abp">Target SPS </label>
                <input type='text' name="sps" id="sps" class="form-control" required value="{{old('sps')}}" min =0 >                
            </div>
          
          
          </div>

           <div class="row"><h5> Biller Target </h5><hr/></div>

           <div class="row">

                <div class="col-md-4 form-group">
                    <label for="Style">Biller </label>
                    
                    <select  id="colormodel" class="form-control txtTeamAddDelete" >
                  
                  </select> 
                </div> 

                <div class="col-md-4 form-group">
                    <label for="Quantity">Month</label>
                    <input type="text" class="form-control txtCricketerAddDelete"  required readonly>
                </div> 

                <div class="col-md-4 form-group">
                    <label for="user_name">Target Amount</label>
                    <input type="number" class="form-control txtScoreAddDelete" required >
                </div> 

                <div class="col-md-4 form-group">
                    <label for="upt"> UPT </label>
                    <input type='text' name="upt" id="upt" class="form-control uptAddDelete" required value="{{old('upt')}}" >                
                </div>

                <div class="col-md-4 form-group">
                    <label for="abp"> ABV </label>
                    <input type='text' name="abp" id="abp" class="form-control abpAddDelete" required value="{{old('abp')}}" >                
                </div>
                <div class="col-md-4 form-group">
                <button type="button" class="btnrowAddDelete">Add Biller Target</button> 
                </div>  

            </div>

            <div class="row">

            <table class="TableAddDelete">
                <thead>
                    <tr>                                  
                        <th>Biller</th>
                        <th>Month</th>
                        <th>Target Amount</th> 
                        <th>UPT</th> 
                        <th>ABV</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 billerAddDelete = $('.txtTeamAddDelete').val();
        var monthAddDelete = $('.txtCricketerAddDelete').val();
        var amountAddDelete = $('.txtScoreAddDelete').val();
        var uptAddDelete = $('.uptAddDelete').val();
        var abpAddDelete = $('.abpAddDelete').val();
        $('.TableAddDelete tbody').append("<tr><td><input name='biller[]' id='biller' class='form-control' value="+billerAddDelete+"  ></td><td><input name='month[]' id='month' class='form-control' value="+monthAddDelete+" ></td><td><input name='amount[]' id='amount' class='form-control' value="+amountAddDelete+" ></td><td><input name='uptbiller[]' id='upt' class='form-control' value="+uptAddDelete+"  ></td><td><input name='abpbiller[]' id='abp' class='form-control' value="+abpAddDelete+"  ></td><td><button type='button' class='btndeleterowadded btn'>x</button></td></tr>");
       
    });
    $(document).on('click', 'button.btndeleterowadded', function(){
        $(this).closest('tr').remove();
        return false;
    });

    $('#months').on('change',function()
    {
        var month =  $('#months').val();
        $('.txtCricketerAddDelete').val(month);
    });

    $('#store').on('change',function()
    {
            var _token   = $('meta[name="csrf-token"]').attr('content');
            var pos = $('#store').val();
            $.ajax({
            url:"{{ route('pos-target.posBiller') }}",
            method:"get",
            data:{pos: pos, _token:_token},
            success:function(res)
            { 

              if(res){ console.log(res);
                $("#colormodel").empty();
                
                $.each(res,function(key,value){ console.log(value);
                  $("#colormodel").append('<option value="'+value+'">'+value+'</option>');
                });
              
              }else{
                $("#colormodel").empty();
              }
            }

           })
    });
});
</script>
@endsection