@extends('layouts/contentLayoutMaster')
@section('title', 'Add Billing Plans')
@section('vendor-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/pickadate/pickadate.css')) }}">
@endsection
@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/plugins/forms/validation/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/pages/app-user.css')) }}">
  <style type="text/css">
    #cpyfields button {
        display: none !important;
    }
  </style>
@endsection

@section('content')
<!-- billing-plans create start -->
<form  action="{{ url('billing-plans/store') }}" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
<div class="row">
  <div class="col-12 col-sm-3">
    <section class="users-edit">
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                <!-- billing-plans create account form start -->
                  <div class="form-group">
                    <div class="controls">
                      <label>Client Name <span style="color:red">*</span></label>
                      <input type="text" name="name" class="form-control" pattern="^[A-Za-z\s]+$" maxlength="50" placeholder="Name" />
                      @if($errors->has('name'))
                        <p class="text-danger">{{ $errors->first('name') }}</p>
                      @endif
                    </div>
                  </div>
                  
                    <div class="form-group">
                    <label>Package Name</label>
                        <select name="pkg_name" id="items" class="form-control" onchange="updatePriceField(this)">
                            <option value="" data-amt="0.00">Select Package</option>
                            <option value="Lynx-Basic" data-amt="1350">Lynx-Basic</option>
                            <option value="Lynx-Lite" data-amt="1750">Lynx-Lite</option>
                            <option value="Lynx-Pro" data-amt="2500">Lynx-Pro</option>
                            <option value="Lynx-Pro Max" data-amt="3000">Lynx-Pro Max</option>
                            <option value="Lynx-Advance" data-amt="3500">Lynx-Advance</option>
                            <option value="Lynx-Ala Carte" data-amt="AlaCarte">Lynx-Ala Carte</option>
                            <option value="Vendor Lynx Basic" data-amt="650">Vendor Lynx Basic</option>
                            <option value="Vendor Lynx Pro" data-amt="1000">Vendor Lynx Pro</option>
                            <option value="Worker Lynx Basic" data-amt="500">Worker Lynx Basic</option>
                            <option value="Worker Lynx Pro" data-amt="1000">Worker Lynx Pro</option>
                            <option value="Worker Lynx Advance" data-amt="1800">Worker Lynx Advance</option>
                            <option value="Tenant Lynx Basic" data-amt="150">Tenant Lynx Basic</option>
                            <option value="Tenant Lynx Pro" data-amt="750">Tenant Lynx Pro</option>
                            <option value="Tenant Lynx Advance" data-amt="1500">Tenant Lynx Advance</option>
                        </select>
                        <br>
                        <label for="priceField">Base Amount:</label>
                        <input type="text" class="form-control" name="base_amount" id="priceField" readonly>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>Discounted Amount <span style="color:red">*</span></label>
                      <input type="text" name="amount" class="form-control" pattern="^\d*\.?\d+$" maxlength="10" placeholder="Amount" />
                      <input type="hidden" name="interval" value="ot" />
                      @if($errors->has('amount'))
                        <p class="text-danger">{{ $errors->first('amount') }}</p>
                      @endif
                    </div>
                  </div>
                  <div class="form-group">
                    <label>Currency</label>
                    <select name="currency" id="currency" class="form-control">
                      <option value="inr">INR</option>
                      <option value="usd">USD</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>Status</label>
                    <select name="status" class="form-control">
                      <option value="A">Active</option>
                      <option value="I">Deactive</option>
                    </select>
                  </div>

                  <div class="form-group">
                    <div class="controls">
                      <label>Description</label>
                      <textarea name="description" class="form-control" pattern="[^+=@<>|-]+" maxlength="100" placeholder="Description"></textarea>
                      @if($errors->has('description'))
                        <p class="text-danger">{{ $errors->first('description') }}</p>
                      @endif
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-12 d-flex flex-sm-row flex-column mt-1">
                      <button type="submit" class="btn btn-primary glow mb-1 mb-sm-0 mr-0 mr-sm-1" style=" font-size: 11px;">Save</button>
                      <button type="reset" class="btn btn-outline-warning" style=" font-size: 11px;">Reset</button>
                    </div>
                  </div>
                
                <!-- billing-plans create account form ends -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- billing-plans create ends -->
  </div>
  <div class="col-12 col-sm-9">
    <section class="users-edit">
      <div class="card">
        <div class="card-content">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane active" id="account" aria-labelledby="account-tab" role="tabpanel">
                <input type="hidden" name="billing_verifications_ids" id="billing_verifications_ids" value="">
                @if($tasktypes)
                  <ul class="list-unstyled mb-0">
                    @foreach($tasktypes as $tasktype)
                    {{-- @dd($tasktype) --}}
                      <li class="row">
                        <div class="col-8 col-sm-8">
                          <fieldset>
                            <div class="vs-checkbox-con vs-checkbox-primary">
                              <input type="checkbox" class="billing_verifications_t" data-id="{{ $tasktype->id }}" id="verifications_{{ $tasktype->id }}" name="billing_verification_tasks[]" {{ $tasktype->is_default == 1 ? 'checked' : '' }} value="{{ $tasktype->task_type }}">
                              <span class="vs-checkbox">
                                <span class="vs-checkbox--check">
                                  <i class="vs-icon feather icon-check"></i>
                                </span>
                              </span>
                              <span class="" style="font-size: 0.85rem;"><b>{{ $tasktype->task_name }}</b> [{{ $tasktype->task_type }}]</span>
                            </div>
                          </fieldset>
                        </div>
                        <div class="col-2 col-sm-2">
                          <div class="form-group">
                            <div class="controls">
                              <input type="number" name="billing_verification_count[{{ $tasktype->task_type }}]" class="form-control" value="1" placeholder="Count" />
                            </div>
                          </div>
                        </div>
                        <div class="col-2 col-sm-2">
                          <div class="form-group">
                            <div class="controls">
                              <input type="text" name="billing_verification_amounts[]" class="form-control" placeholder="Amount" />
                            </div>
                          </div>
                        </div>
                        
                        
                        
                          <ul class="col-12 col-sm-12 list-unstyled mb-0">
                            @foreach($tasktype->verificationTypes as $verificationtype)
                              <li class="row">
                                <div class="col-10 col-sm-10">
                                  <fieldset class="pl-1">
                                    <div class="vs-checkbox-con vs-checkbox-primary">
                                      <input type="checkbox" id="verifications_{{ $verificationtype->id }}" name="billing_verifications[]" value="{{ $verificationtype->id }}">
                                      <span class="vs-checkbox">
                                        <span class="vs-checkbox--check">
                                          <i class="vs-icon feather icon-check"></i>
                                        </span>
                                      </span>
                                      <span class="" style="font-size: 0.85rem;"><b>{{ $verificationtype->internal_name }}</b> [{{ $verificationtype->name }}]</span>
                                    </div>
                                  </fieldset>
                                </div>
                                <div class="col-2 col-sm-2">
                                  <div class="form-group">
                                    <div class="controls">
                                      <input type="text" name="billing_verifications_amount[]" class="form-control" placeholder="Amount" />
                                    </div>
                                  </div>
                                </div>
                              </li>  
                            @endforeach
                          </ul>
                      </li>                        
                    @endforeach
                  </ul>
                @endif 
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
</form>
@endsection

@section('vendor-script')
  {{-- Vendor js files --}}
  <script src="{{ asset(mix('vendors/js/forms/validation/jqBootstrapValidation.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(mix('js/scripts/pages/app-user.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/navs/navs.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/forms/select/form-select2.js')) }}"></script>
  <script>
    $('.billing_verifications_t').change(function() {
      var vals = $('.billing_verifications_t:checked').map(function() {
        return $(this).data('id');
      }).get().join(',');
      $('#billing_verifications_ids').val(vals);
    })

    $('.billing_verifications_t').trigger('change');
  </script>
  
     <script>
        function updatePriceField(obj) {
            $('#priceField').val($("#items option:selected").data('amt'));
        }
    </script>
@endsection