@extends('layouts.main')
@section('title', 'Add New Invoice')
@section('content')
    @push('head')
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }

            .swal2-popup .select2{
                display: none!important;
            }
        </style>
    @endpush


    <div class="container-fluid">
        <x-breadcrumb :pageTitle="$pageTitle" :desc="$desc" :iconName="$iconName" />
        {{--  --}}
        <section class="content">
            <form role="form" id="addInvoice" action="{{route('addInvoiceNew')}}" method="post" role="form" onsubmit="valForm()">
                @csrf

                <div class="card">
                    <div class="card-header">
                        <h3 class="box-title">Enter Payer Details</h3>
                    </div>

                    <div class="card-body">
                        {{-- toogle button --}}
                        <div class="row">
                            <input type="hidden" value="{{old('is_corporate') ?? 0 }}" name="is_corporate" id="is_corporate" />
                            <div class="form-group col-md-6">
                                <label for="role">Corporate Body?</label>
                                <input type="checkbox" id="corp" name="corp" {{old('is_corporate')==0 ? '' : 'checked'}}  onclick="corpBody()">
                            </div>
                        </div>
                        {{--end of  toogle button --}}
                        {{--  --}}
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="formGroupExampleInput" class="font-change"> {{ env('APP_NAME_')}} (xxx-xxxx-xxxx) </label>
                                <input type="text" class="form-control color-change required" id="birs_id"
                                    value="{{ old('birs_id')}}"
                                    name="birs_id" placeholder="{{ env('APP_NAME_2')}}"
                                    pattern="\w{3,}-\d{3,}-\d{3,}" maxlength="15">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="formGroupExampleInput" class="font-change">TIN</label>
                                <input type="text" class="form-control color-change required" id="tin" name="tin"
                                    value="{{ old('tin')}}" placeholder="TIN" pattern="\d{10,15}" maxlength="15">
                            </div>
                        </div>
                        {{--  --}}
                        {{--coorp   --}}
                        <div class="row" id="fn">
                            <div class="fn form-group col-md-6">
                                <label class="font-change" for="first_name">First Name <span style="color:red">*</span></label>
                                <input type="text" placeholder="First Name"
                                        class="form-control color-change required auto-c @error('first_name') is-invalid @enderror"
                                        value="{{ old('first_name')}}" id="fname" name="first_name" maxlength="128" >
                                        @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                            </div>
                            <div class="fn form-group col-md-6">
                                <label class="font-change" for="last_name">Last Name <span style="color:red">*</span></label>
                                <input type="text" placeholder="Last Name"
                                    class="form-control color-change required auto-c @error('last_name') is-invalid @enderror"
                                    value="{{ old('last_name')}}" id="lname" name="last_name" maxlength="128">
                                    @error('last_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                            </div>
                        </div>
                        <div class="row" id="cn">
                            <div  class="cn form-group col-md-6" style="display:none">
                                <label class="font-change" for="company_name">Company Name <span style="color:red">*</span></label>
                                <input type="text" placeholder="Company Name"
                                    class="form-control color-change  @error('company_name') is-invalid @enderror"
                                    value="{{ old('company_name')}}" id="cmpname" name="company_name">
                                    @error('company_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                            </div>

                            <div class="col-md-6" id="companyRC" style="display: none">
                                <div class="form-group">
                                    <label for="formGroupExampleInput" class="font-change">RC Number</label>
                                    <input type="text" class="form-control color-change required" id="rc_number" name="rc_number"
                                    value="{{ old('rc_number') }}" placeholder="RC Number" maxlength="50">
                                </div>
                            </div>
                        </div>
                        {{-- end coorp --}}
                        {{--  --}}
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="font-change" for="mobile">
                                    Payer's Phone Number <span style="color:red">*</span>
                                </label>
                                <input type="text" placeholder="Payer's Phone"
                                    class="form-control color-change required digits @error('first_name') is-invalid @enderror"
                                    id="mobile" value="{{ old('phone_number') }}" name="phone_number" pattern="\d{11,}">
                                    @error('phone_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror

                            </div>
                            <div class="form-group col-md-6">
                                <label for="formGroupExampleInput" class="font-change"> Payer's Email </label>
                                <input type="email" placeholder="Payers Email" class="form-control color-change required email" id="email"
                                 value="{{ old('email') }}" name="email" maxlength="128">
                            </div>
                        </div>
                        {{--  --}}
                        {{--  --}}

                        {{--  --}}
                        {{--  --}}
                        <div class="row" id="customerID">
                            <div class="form-group col-md-6">
                                <label for="formGroupExampleInput" class="font-change">ID Type</label>
                                <select class="form-control color-change" name="customer_id_type" id="customer_id_type">
                                    <option disabled selected>Please Select...</option>
                                    <option value="National ID">National ID Card</option>
                                    <option value="Voters Card">Voters Card</option>
                                    <option value="Drivers Licence">Drivers Licence</option>
                                    <option value="Int'l Passport">International Passport</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="formGroupExampleInput" class="font-change">ID Number</label>
                                <input type="text" class="form-control color-change" id="customer_id_number" name="customer_id_number"
                                value="{{ old('customer_id_number') }}" placeholder="ID Number" maxlength="50">
                            </div>
                        </div>
                        {{--  --}}
                        <hr/>

                        
                        {{--  --}}
                        <div class="row">
                            <div class="col-md-12" id="split_rule_box" style="display:none">
                                <div class="form-group">
                                    <label for="">Select Split Rule</label>
                                    <select name="split_rule" id="split_rule" class="form-control color-change">
                                        <option value="" hidden disabled selected="">Select Split Rule</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12" id="draftbox" style="display:none">
                                <div class="form-group">
                                    <label class="font-change" for="role">Enter Contract Amount
                                        <span style="color:red">*</span></label>
                                    <input type="number" step=".01" placeholder="Contract Amount " class="form-control color-change required" value="" id="draft_amount"
                                    name="draft_amount" maxlength="128" oninput="calcDraft(this.value)">
                                </div>
                            </div>

                            <div class="col-md-12" id="contractbox" style="display:none">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-change" for="role">Select Transaction Type <span style="color:red">*</span></label>
                                            <input type="hidden" name="whttype" id="whttype"/>
                                            <select class="form-control color-change required" id="trantype"
                                                    onchange="setWHTType(this.value)">
                                                <option disabled selected hidden>Please Select...</option>
                                                                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="font-change" for="role">Enter Amount <span style="color:red">*</span></label>
                                            <input type="number" step=".01" placeholder="Rent / Dividend / Contract Amount / etc."
                                                   class="form-control color-change required"
                                                   value=""
                                                   id="contract_amount"
                                                   name="contract_amount"
                                                   maxlength="128" oninput="calcWHT(this.value)">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="row" style="display: none" id="propAddr">
                                    <div class="form-group col-md-8">
                                        <label class="font-change" for="role">Enter Property Address <span style="color:red">*</span></label>
                                        <textarea class="form-control color-change required" rows="2" id="propertyAddress" name="propertyAddress" placeholder="Property Address"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12" id="rangebox" style="display:none">
                                <div class="form-group">
                                    <label class="font-change" for="role">
                                        Select SubCategory / Range
                                        <span style="color:red">*</span>
                                    </label>
                                    <select class="form-control color-change required" id="range"
                                        name="range"
                                        onchange="setAmountByRange(this.value)"
                                        required>
                                        <option value="0" hidden disabled selected>Please Select</option>
                                    </select>
                                </div>
                            </div>

                        </div>

                        {{-- AMount --}}
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="formGroupExampleInput" class="font-change">Amount To Pay
                                    <span style="color:red">*</span>
                                </label>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="role">Click to set amount.</label>
                                <input type="checkbox" id="bulk" name="bulk" onclick="bulkPay()">
                                <input type="number" step=".01" placeholder="Amount to Pay"
                                class="form-control required color-change @error('amount') is-invalid @enderror " id="amount" name="amount"
                                oninput="handleCash(this.value)" required readonly>
                                @error('amount')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row" style="display: none" id="awardee">
                            <div class="form-group col-md-12">
                                <label class="" for="awardee">
                                    Awardee BIRS ID
                                    <!-- <span style="color:red">*</span> -->
                                </label>
                                <input type="text" placeholder="Awardeee BIRS ID" class="form-control" value="" id="awardeeID" name="awardeeID" pattern="\d{9,11}" maxlength="11">
                            </div>
                        </div>

                        <div class="row">
                           {{-- $role == "3" || $role == "5" cash --}}
                            <div class="form-group col-md-12">
                                <label for="formGroupExampleInput" class="font-change">Payment Method <span style="color:red">*</span> </label>
                                <select class="form-control color-change @error('payment_method') is-invalid @enderror"
                                    name="payment_method" id="paymethod">
                                    <option value="">Select Payment Method</option>
                                    @foreach (paymentChannels() as $key => $item)
                                        <option {{ old('payment_method') == $key ? "selected" : "" }} value="{{$key}}"> {{$item}} </option>
                                    @endforeach
                                </select>

                                @error('payment_method')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>
                        </div>

                        <!--description -->
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="formGroupExampleInput" class="font-change">Description (optional)</label>
                                <textarea class="form-control color-change required" rows="2" name="description" placeholder="Any other relevant information">