@extends('front-desk.frontdeskpanel')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Create Invoice</h1> <strong style="display:flex; color:red;font-style: italic;">(This is a Demo account and cannot generate actual invoices)</strong>
                </div>
                <!-- <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Create Invoice</li>
                    </ol>
                </div> -->
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                            <div class="col-12">
                             <select id="select-comp-name" class="form-control mb-2 custom-select" onchange="checkGSTIN()">
                                <option value="0">Select Internal Company</option>
                                    @foreach($internal_companies as $ia)
                                    <option value="{{$ia->company_id}}" data-gstin="{{ $ia->GSTIN }}"  data-type_of_org="{{ $ia->type_of_org }}" data-billing_address="{{ $ia->billing_address}}"  data-PAN="{{ $ia->PAN}}"  data-state_name ="{{ $ia->state_name}}" data-state_code ="{{ $ia->state_code}}">{{ $ia->company_name }}</option>    
                                    @endforeach 
                            </select>                               
                            </div>
                            <!-- /.col -->
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <label for="start_date" class="pb-3">Invoice Date</label>
                            <input value="{{ date('d-m-Y') }}" type="text" name="invoice_date" id="invoice_date" class="frm-inp" readonly>
                        </div>
                        <div class="col-6">
                            <label for="start_date" class="pb-3">Select Due Date</label>
                            <input value="" type="date" name="due_date" id="due_date" class="frm-inp" required>
                        </div>
                    </div>
                    <!-- Main content -->
                    <div id="print-invoice" class=" invoice p-3 mb-3">
                        <!-- title row -->
                        <div class="row">
                            <div class="col-12">                                
                                <h5>
                                    <span id='comp-name'></span><br/>
                                </h5>
                                <!-- Added for comapny details info -->
                                 <h6>
                                    <span id="comp-billing_address"></span><br/>
                                    <span id="comp-state_name"></span><br/>
                                    <span id="comp-gstin"></span><br/>
                                    <span id="comp-pan"></span><br/>
                                    
                                </h6>       
                                <!-- /.col -->
                            </div>         
                        </div>
                        <div id="comp-pan" style="margin-bottom: 30px;"></div>

                        <!-- info row -->
                        <div class="row invoice-info">
                            <div class="col-6 invoice-col">
                                <strong>Bill To</strong><br/>
                               <!-- {{$main_task[0]->cp_name}}<br/>-->
                                
                                <address>
                                    <strong>{{$main_task[0]->client_name}}</strong><br>
                                   <!-- {{$main_task[0]->billing_address}}<br/>-->
                                    {!! implode('<br>', explode(',', e($main_task[0]->billing_address))) !!}<br/>
                                    State Code :{{$main_task[0]->state_code}}<br/>
                                    GSTIN :  {{$main_task[0]->GSTIN}}<br/>
                                    PAN : {{$main_task[0]->PAN}}<br/>                           
                                    Phone : {{$main_task[0]->cp_phone}}<br>
                                    Email : {{$main_task[0]->cp_email}}
                                </address>
                            </div>
                            <!-- /.col -->
                            <div class="col-6 invoice-col">
                                <strong>Ship To</strong><br/>
                                 <!-- {{$main_task[0]->cp_name}}-->
                                <address>
                                    <strong>{{$main_task[0]->client_name}}</strong><br>
                                    {!! implode('<br>', explode(',', e($main_task[0]->billing_address))) !!}<br/>
                                    State Code :{{$main_task[0]->state_code}}<br/>
                                    GSTIN :  {{$main_task[0]->GSTIN}}<br/>
                                    PAN : {{$main_task[0]->PAN}}<br/>       
                                    Phone: {{$main_task[0]->cp_phone}}<br>
                                    Email: {{$main_task[0]->cp_email}}
                                </address>
                            </div>

                            <div id="data-element" data-state-code="{{ $main_task[0]->state_code }}"></div>

                            <!--   <div class="col-12">
                                <strong>TAN : {{$main_task[0]->TAN}}</strong><br/>
                                <strong>GSTIN : {{$main_task[0]->GSTIN}}</strong>
                            </div>-->
                        </div>
                        <!-- /.row -->

                        <!-- Table row -->
                        <div class="row">
                                                                            
                                    @foreach($sub_tasks as $st)
                                                            
                                    @endforeach
                            <div class="col-12 table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Serial #</th>
                                            <th>Description</th>
                                            <th>HSN/SAC</th>
                                            <!-- <th>Business Activity(Min)</th> -->
                                            <th>Units</th>
                                            <th width="100px">CGST %</th>
                                            <th width="100px">SGST %</th>
                                            <th width="100px">IGST %</th>
                                            <th>Amt</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach($main_task as $mt)
                                        <tr>
                                            <td>1</td>
                                            <td>
                                                {{$mt->module_name}} | {{$mt->submodule_name}}
                                            </td>
                                            <td><input type='text' name='hsn' id='hsn' placeholder='add HSN'/></td>
                                            <!-- <td>{{$tot_time}}</td> -->
                                            <td>1</td>
                                                                                     
                            <script>
                                function checkGSTIN() {
                                   
                                    var element = document.getElementById('data-element');
                                    var client_stateCode = element.getAttribute('data-state-code');
                                    var select = document.getElementById("select-comp-name");
                                    var selectedOption = select.options[select.selectedIndex];
                                    var gstin = selectedOption.getAttribute('data-gstin');
                                    var company_stateCode = selectedOption.getAttribute('data-state_code');
                                    var taxPerInputs = document.querySelectorAll('input[name^="tax_per"]');
                                    var cgst=document.getElementById('tax-per');
                                    var sgst=document.getElementById('tax-per-1');
                                    var igst=document.getElementById('tax-per-2');
                                    var amt = document.getElementById('amt');
                                  
                                    if (gstin && gstin.trim() !== "") {
                                        
                                        if(company_stateCode!==client_stateCode)  // different State Code
                                        {
                                            cgst.disabled = true;  // Disable cgst
                                            sgst.disabled = true;  //Disable sgst
                                            igst.disabled = false; // Enable sgst
                                         }  
                                         else{// same State Code
                                       
                                            cgst.disabled = false;  // Enable cgst
                                            sgst.disabled = false; //Enable sgst
                                            igst.disabled = true;// Disable sgst
                                         }                            
                                     
                                    } else {
                                        // Disable tax percentage inputs
                                        taxPerInputs.forEach(function(input) {
                                            //input.value = '';
                                            //amt.value = '';
                                            input.value = '0';
                                            amt.value = '0';
                                            input.disabled = true;
                                        });
                                        
                                    }
                                }
                            </script>
                          
                                    <td><input style="width: 100px;" type='text' name='tax_per' id='tax-per' placeholder='' value="0" onkeypress='return onlyNumberInput(event);'/></td>
                                    <td><input style="width: 100px;" type='text' name='tax_per_1' id='tax-per-1' value="0" placeholder='' onkeypress='return onlyNumberInput(event);'/></td>
                                    <td><input style="width: 100px;" type='text' name='tax_per_2' id='tax-per-2' value="0" placeholder='' onkeypress='return onlyNumberInput(event);'/></td>
                                    <td><input type='text' name='amt' id='amt' placeholder='add amount'/></td>                                            
                                </tr>                                     
                                         @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->

                        <hr>


                        <div class="row  mt-5" style="justify-content: right;">
                            <div class="col-6">
                                <p class="lead"><b>Amount Due</b></p>

                                <div class="table-responsive">
                                    <table class="table">
                                        <tr>
                                            <th>Amount (INR):</th>
                                            <td class="amt-due" style="text-align: right;" id="amdue"></td>                                    
                                        </tr>
                                        <tr>
                                            <th>CGST (INR):</th>
                                            <td class="cgst-due" style="text-align: right;" id="cgdue"></td>                                   
                                        </tr>
                                        <tr>
                                            <th>SGST (INR):</th>
                                            <td class="sgst-due" style="text-align: right;"  id="sgdue"></td>                                    
                                        </tr>
                                        <tr>
                                            <th>IGST (INR):</th>
                                            <td class="igst-due" style="text-align: right;"  id="igdue"></td>                                   
                                        </tr>
                                        <tr>
                                            <th>Total (INR):</th>
                                            <td class="total-amount" style="text-align: right;"  id="tamdue"></td>                                 
                                        </tr>
                                    </table>
                                    <table class="table">
                                        <tr>                                            
                                            <th>In Words (INR):</th>
                                            <td class="total-amount-in-words" style="text-align: right;"  id="tamwordsdue"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->

                        <!-- <div class="row justify-content-center">
                            <div class="col-6">
                                
                            </div>
                        </div> -->


                        <div class="row justify-content-center mt-3 mb-5 int-comp-table" style="display: none;">
                            <div class="col-12">
                                <p class="lead"><b>Payment Bank Details</b></p>

                                <div class="table-responsive " >
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Bank Name</th>
                                                <th>Branch</th>
                                                <th>Account Holder Name</th>
                                                <th>Account Number</th>
                                                <th>IFSC</th>
                                                <th>Account Type</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                             @foreach($internal_companies as $ia)
                                                <tr class="int-comp-row int-{{$ia->company_id}}" style="display: none;">
                                                    <td>{{$ia->bank_name}}</td>
                                                    <td>{{$ia->branch}}</td>
                                                    <td>{{$ia->account_holder_name}}</td>
                                                    <td>{{$ia->account_no}}</td>
                                                    <td>{{$ia->ifsc_code}}</td>
                                                    <td>{{$ia->account_type}}</td>
                                                </tr>
                                                @endforeach
                                        </tbody>


                                    </table>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->




                        <!-- this row will not appear when printing -->
                        <div class="row no-print">
                            @if (env('APP_STS')=='prod')
                            <div class="col-12">
                                @if($main_task[0]->invoice_status == 0)
                                <input type="hidden" value="{{$main_task[0]->task_id}}" name="task_id" id="task-id">
                                <input type="hidden" name="final_tot_amt" id="final_tot_amt" value="0">
                                <button type="button" class="btn btn-success float-right create-invoice-button" style="margin-right: 5px;" disabled>
                                    <i class="fas fa-download"></i> Save Invoice
                                </button>

                                <a href="{{ url('generate-pdf') }}/" class="btn btn-success float-right download-pdf" style="margin-right: 5px; display: none;">
                                    <i class="fas fa-download"></i> Generate PDF
                                </a>
                                @else
                                <a href="{{ url('generate-pdf') }}/" class="btn btn-success float-right download-pdf" style="margin-right: 5px; display: none;">
                                    <i class="fas fa-download"></i> Generate PDF
                                </a>
                                @endif
                            </div>
                            @endif
                        </div>
                        <div class="row">
                            This is a computer generated invoice no need of signature
                        </div>
                    </div>
                    <!-- /.invoice -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection