@extends('layouts.guest')
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Occupational Safety Consultancy Form</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Proposal</a></li>
                            <li class="breadcrumb-item active">occupational safety consultancy proposal Form</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                @if (Session::has('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ Session::get('success') }}
                        @php
                            Session::forget('success');
                        @endphp
                        <button type="button" class="close" data-dismiss="alert"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
                <h5 class="text-danger error-text" id="tableerror"></h5>
                <!-- Main row -->
                <div class="row">
                    <!-- Left col -->
                    <section class="col-lg-12 connectedSortable">
                        <!-- Custom tabs (Charts with tabs)-->
                        <div class="card">
                            <div class="card-header">
                                <div class="col">
                                    <button value="Back" type="Button" onclick="history.go(-1);" class="btn btn-info float-right">Back</button>
                                </div>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{route('contract/osc/proposal/store')}}" method="post" enctype="multipart/form-data" id="main_form_osc">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div style="font-size: 25px;font-weight: 600;color: #fb9044;">NAJMA</div>
                                            <div style="font-size: 15px;font-weight: 600;">HUMAN RESOURCES</div>
                                            <div style="font-size: 15px;font-weight: 600;">CONSULTANCY</div>
                                            <div style="font-size: 12px;">PO Box. 32390</div>
                                            <div style="font-size: 12px;">Dubai U.A.E</div>
                                            <div style="font-size: 12px;">Telephone: 04 3455707,04 3453780</div>
                                            <div style="font-size: 12px;">Fax: 04 3453761</div>
                                            <div style="font-size: 12px;">Email: najmauae@eim.ae</div>
                                            <div style="font-size: 12px;">rohit@najmaconsultancy.com</div>
                                            <div style="font-size: 12px;">TRN: 100355383900003</div>
                                        </div>
                                        <div class="col-lg-4">
                                            <img src="{{ url('najma_logo.jpg') }}" class="img-fluid" alt="">
                                        </div>
                                        <div class="col-lg-4">
                                            <div style="font-size: 25px;font-weight: 600;color: #fb9044;">نجمة</div>
                                            <div style="font-size: 15px;font-weight: 600;">الموارد البشرية</div>
                                            <div style="font-size: 15px;font-weight: 600;">الاستشارات</div>
                                            <div style="font-size: 12px;">صندوق البريد. 32390</div>
                                            <div style="font-size: 12px;">دبي الامارات العربية المتحدة</div>
                                            <div style="font-size: 12px;">الهاتف: 04 3455707,04 3453780</div>
                                            <div style="font-size: 12px;">فاكس: 043453761</div>
                                            <div style="font-size: 12px;">البريد الإلكتروني: najmauae@eim.ae</div>
                                            <div style="font-size: 12px;">rohit@najmaconsultancy.com</div>
                                            <div style="font-size: 12px;">رقم التسجيل الضريبي: 100355383900003</div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-12 text-center text-bold">
                                            <div>Occupational Safety Consultancy</div>
                                            <div>QUOTATION</div>
                                        </div>
                                    </div><br>
                                    <div class="row">
                                        @foreach ($najmadata as $data)
                                        <table class="table table-bordered table-sm">
                                            <tr>
                                                <td class="bg-light" style="width: 130px;"><span>Client Name</span></td>
                                                <td colspan="3">
                                                    <input type="text" class="w-100" name="alp_client_name" value="{{ $data->companyname }}">
                                                    <span class="text-danger error-text alp_client_name_error"></span>
                                                </td>
                                                <td class="bg-light" style="width: 130px;"><span>Quotation #</span></td>
                                                <td style="width: 200px;"><input type="text" class="w-100" name="alp_quotation"></td>
                                            </tr>
                                            <tr>
                                                <td class="bg-light"><span>Address</span></td>
                                                <td colspan="3"><input type="text" class="w-100" name="alp_address" value="{{ $data->area }}"></td>
                                                <td class="bg-light"><span>Date</span></td>
                                                <td>
                                                    <input type="date" class="w-100" name="alp_date">
                                                    <span class="text-danger error-text alp_date_error"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="bg-light"><span>Contact Person</span></td>
                                                <td colspan="3"><input type="text" class="w-100" name="alp_contact_person" value="{{ $data->personname }}"></td>
                                                <td class="bg-light"><span>Payment Term</span></td>
                                                <td><input type="text" class="w-100" name="alp_payment_term"></td>
                                            </tr>
                                            <tr>
                                                <td class="bg-light"><span>Contact No.</span></td>
                                                <td colspan="3">
                                                    <input type="text" class="w-100" name="alp_contact_no" onkeypress="return /[0-9/+]/i.test(event.key)" value="{{ $data->contactno }}">
                                                    <span class="text-danger error-text alp_contact_no_error"></span>
                                                </td>
                                                <td class="bg-light"><span>Validity</span></td>
                                                <td><input type="text" class="w-100" name="alp_validity"></td>
                                            </tr>
                                            <tr>
                                                <td class="bg-light"><span>Email ID</span></td>
                                                <td colspan="3">
                                                    <input type="text" class="w-100" name="alp_email_id" value="{{ $data->email }}">
                                                    <span class="text-danger error-text alp_email_id_error"></span>
                                                </td>
                                                <td class="bg-light"><span>Client Code</span></td>
                                                <td><input type="text" class="w-100" name="alp_client_code"></td>
                                            </tr>
                                            <tr>
                                                <td class="bg-light"><span>Enquiry Ref.</span></td>
                                                <td colspan="3"><input type="text" class="w-100" name="alp_enquiry_ref" value="{{ $data->inquiryid }}" readonly></td>
                                                <td class="bg-light"><span>Currency</span></td>
                                                <td><input type="text" class="w-100" name="alp_currency" value="OMR"></td>
                                            </tr>
                                        </table>
                                        @endforeach
                                    </div>
                                    <h5 class="text-danger error-text" id="tableerrors"></h5>
                                    <div class="row">
                                        <div class="col d-flex justify-content-end pb-2">
                                            <a href="javascript:void(0);" class="btn btn-success btn-sm" id="add_rowA"><i class="fa fa-plus"></i> Add Row</a>
                                        </div>
                                        <table class="table table-bordered table-sm" id="dynamicTable">
                                            <tr class="text-center bg-light">
                                                <th style="width: 50px;"><span>SR.No</span></th>
                                                <th style=""><span>DESCRIPTION</span></th>
                                                <th style="width: 93px;"><span>QUANTITY</span></th>
                                                <th style="width: 250px;"><span>UOM</span></th>
                                                <th style="width: 120px;"><span>UNIT PRICE</span></th>
                                                <th style="width: 130px;"><span>AMOUNT</span></th>
                                                <th><span>Action</span></th>
                                            </tr>
                    
                                            <tbody id="row_body3">
                                                <input type="hidden" name="alp_rep_amount" value="" id="rep_amount">
                                                <input type="hidden" value="0" id="row_countA">
                                            </tbody>
                                            <tr class="text-center text-bold">
                                                <td colspan="3" style="border-left: none;"></td>
                                                <td colspan="2">SUBTOTAL</td>
                                                <td style="width: 130px;" colspan="2"><input type="text" class="w-100"
                                                        name="alp_subtotal" id="subamount"></td>
                                            </tr>
                                            <tr class="text-center text-bold">
                                                <td colspan="3"></td>
                                                <td colspan="2">VAT 5%</td>
                                                <td style="width: 130px;" colspan="2"><input type="text" class="w-100"
                                                        name="alp_total_vat" id="vat"></td>
                                            </tr>
                                            <tr class="text-center text-bold">
                                                <td colspan="3"></td>
                                                <td class="bg-light" colspan="2">TOTAL AMOUNT IN AED</td>
                                                <td class="bg-light" style="width: 130px;" colspan="2"><input type="text"
                                                        class="w-100" name="alp_total_amount" id="final_amount"></td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <span class="text-bold">Total Amount in Words:</span>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <table class="table table-bordered table-sm">
                                                <tr class="text-center bg-light">
                                                    <th class="p-2 bg-light" colspan="3"></th>
                                                </tr>
                                                <tr>
                                                    <td style="width: 250px;">Delivery /Service Location</td>
                                                    <td colspan="2"><input type="text" class="w-100" name="alp_delivery_servicelocation"></td>
                                                </tr>
                                                <tr>
                                                    <td>Delivery/Service Date</td>
                                                    <td colspan="2"><input type="date" class="w-50" name="alp_delivery_servicedate"></td>
                                                </tr>
                                                <tr>
                                                    <td>General Conditions</td>
                                                    <td style="width: 10px;">*</td>
                                                    <td><p>Client is responsible to monitor the progress of the service requested and if found any nonconformity from Najma Technical Team, please contact +971565115759 or email to najmauae@emirates.net.ae</p></td>
                                                    
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td style="width: 10px;">*</td>
                                                    <td><p>Cancellation fees/charges - there will be a 50% of the total cost of the service levied on all cancellations made without 48 working hours’ notice. (Monday to Saturday).</p></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td style="width: 10px;">*</td>
                                                    <td><p>All pricing and discount contained herein and related proposals or correspondence between Najma and Client shall be considered confidential information. Both agrees to hold such information in strict confidence and not to disclose it to any third parties</p></td>
                                                </tr>
                                                <tr>
                                                    <td></td>
                                                    <td style="width: 10px;">*</td>
                                                    <td><b><p>Please refer to next page for the Terms & Conditions</p></b></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row bg-light p-3">
                                        <div class="col-lg-4">
                                            <div>
                                                <b>Prepared By:</b>
                                                <input type="text" name="alp_preparedby_name" class="w-100">
                                                <span>Name</span><br>
                                                <span>Title</span>
                                            </div>
                                            <div class="pt-5">
                                                Approved By 
                                                <input type="text" name="alp_approved_name" class="w-100">
                                                <span>Name</span><br>
                                                <span>Title</span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4"></div>
                                        <div class="col-lg-4">
                                            <div>
                                                <b>For and on behalf of Client</b>
                                                <input type="text" name="alp_behalfclient_name" class="w-100">
                                                <span>Name</span><br>
                                                <span>Title</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <p>We thank you for your consideration and we will be grateful to be your partner in catering your requirements. Our work is guaranteed to the complete satisfaction of the clients.</p>
                                    </div>
                                    <div class="row p-2">
                                        <div class="col-lg-12">
                                            <label for="">TERMS & CONDITIONS</label>
                                        </div>
                                        @foreach ($osc as $item)
                                        <div class="col-lg-6">
                                            <textarea class="@error('alp_tac_one') is-invalid @enderror" name="alp_tac_one" id="summernote_one">{{ $item->tac_one }}</textarea>
                                            @error('alp_tac_one')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-lg-6">
                                            <textarea class="@error('alp_tac_two') is-invalid @enderror" name="alp_tac_two" id="summernote_two">{{ $item->tac_two }}</textarea>
                                            @error('alp_tac_two')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        @endforeach
                                    </div>
                                    <br>
                                    <div class="row p-4">
                                        <div class="col-lg-12">
                                            <button type="submit" class="btn btn-success">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div><!-- /.card-body -->
                        </div>
                    </section>
                    <!-- /.Left col -->
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <script>
        $().ready(function() {
            $('#add_rowA').on('click', function() {
                // alert('hii');
                var row_countA = $('#row_countA').val();
                row_countA++;
                var content =   '<tr id="rowA'+row_countA+'">' + 
                                    '<td><input type="text" class="w-100" name="items['+row_countA+'][srno]" id="srno'+row_countA+'" value="'+row_countA+'" readonly></td>\
                                    <td><input type="text" class="w-100" name="items['+row_countA+'][description]" id="des'+row_countA+'"></td>\
                                    <td><input type="text" class="w-100" name="items['+row_countA+'][quantity]" onkeypress="return /[0-9/.]/i.test(event.key)" id="qty'+row_countA+'" value="0"></td>\
                                    <td><input type="text" class="w-100" name="items['+row_countA+'][uom]" id="uom'+row_countA+'"></td>\
                                    <td><input type="text" class="w-100" name="items['+row_countA+'][price]" onkeypress="return /[0-9/.]/i.test(event.key)" id="price'+row_countA+'" value="0"></td>\
                                    <td><input type="text" class="w-100 t2g" name="items['+row_countA+'][amount]" id="amount'+row_countA+'" value="0" readonly></td>\
                                    <td><a href="javascript:void(0);" class="w-100 remove_row btn btn-danger btn-sm" data-row="'+row_countA+'"><i class="fa fa-trash"></i></a></td>';
                                '</tr>';
                $('#row_body3').append(content);
                $('#row_countA').val(row_countA);

                //keyup unit price
                $(document).on("keyup", "#price"+row_countA, function() {
                    var unitprice = parseFloat($("#price"+row_countA).val()).toFixed(3);
                    var qty = parseFloat($("#qty"+row_countA).val());

                    var into_count = (unitprice*qty).toFixed(3);
                        $("#amount"+row_countA).val(into_count);

                    // count total amount
                    var sum = 0; 
                    $(".t2g").each(function() {
                        sum += +$(this).val();
                    });
                    var total = (sum).toFixed(3);
                    // show to subtotal amount input field
                    $("#subamount").val(total);
                    // calculate 5 percentage VAT in subtotal amount
                    var vat = (total*5/100).toFixed(3);
                    $("#vat").val(vat);
                    // count final amount
                    var f_amt = parseFloat(total)+parseFloat(vat);
                    var final_amount = (f_amt).toFixed(3);
                    $("#final_amount").val(final_amount);
                });
                //keyup qunatity
                $(document).on("keyup", "#qty"+row_countA, function() {
                    var qty = parseFloat($("#qty"+row_countA).val());
                    var unitprice = parseFloat($("#price"+row_countA).val()).toFixed(3);

                    var into_count = (qty*unitprice).toFixed(3);
                        $("#amount"+row_countA).val(into_count);

                    // count total amount
                    var sum = 0; 
                    $(".t2g").each(function() {
                        sum += +$(this).val();
                    });
                    var total = (sum).toFixed(3);
                    // show to subtotal amount input field
                    $("#subamount").val(total);
                    // calculate 5 percentage VAT in subtotal amount
                    var vat = (total*5/100).toFixed(3);
                    $("#vat").val(vat);
                    // count final amount
                    var f_amt = parseFloat(total)+parseFloat(vat);
                    var final_amount = (f_amt).toFixed(3);
                    $("#final_amount").val(final_amount);
                });
            });
        });
        // delete row 
        $(document).on('click', '.remove_row', function() {
            var row_countA = $(this).attr('data-row');
            $('#rowA'+row_countA).remove();
            //subtotal amount calculate
            var sum1 = 0;
            $(".t2g").each(function() {
                sum1 += +$(this).val();
                var aq = (sum1).toFixed(3);
                $("#total_g").html(aq);
                $("#rep_amount").val(aq);
                // $("#subamount").val(aq);
            });
            var total = (sum1).toFixed(3);
            // show to subtotal amount input field
            $("#subamount").val(total);
            // calculate 5 percentage VAT in subtotal amount
            var vat = (total*5/100).toFixed(3);
            $("#vat").val(vat);
            // count final amount
            var f_amt = parseFloat(total)+parseFloat(vat);
            var final_amount = (f_amt).toFixed(3);
            $("#final_amount").val(final_amount);
        });
    </script>
    <script>
        $(function () {
            $('#summernote_one').summernote({
            fontSizes: ['8', '9', '10', '11', '12', '14', '15', '16', '17', '18', '19', '20'],
            toolbar: [
              // [groupName, [list of button]]
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['fontsize', ['fontsize']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['height', ['height']]
            ]
          });
          $('#summernote').summernote({
            fontSizes: ['8', '9', '10', '11', '12', '14', '15', '16', '17', '18', '19', '20'],
            toolbar: [
              // [groupName, [list of button]]
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['fontsize', ['fontsize']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['height', ['height']]
            ]
          });
        });

        //payment terms day
		$(document).on("keyup", "#payment_term_date", function() {
            var payment_termsday = jQuery(this).val();
            $("#day").html(payment_termsday);

            console.log(payment_termsday, 'ffff');

        });
        // second template text
        $(function () {
            $('#summernote_two').summernote({
            fontSizes: ['8', '9', '10', '11', '12', '14', '15', '16', '17', '18', '19', '20'],
            toolbar: [
              // [groupName, [list of button]]
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['fontsize', ['fontsize']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['height', ['height']]
            ]
          });
          $('#summernote').summernote({
            fontSizes: ['8', '9', '10', '11', '12', '14', '15', '16', '17', '18', '19', '20'],
            toolbar: [
              // [groupName, [list of button]]
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['fontsize', ['fontsize']],
              ['color', ['color']],
              ['para', ['ul', 'ol', 'paragraph']],
              ['height', ['height']]
            ]
          });
        });

        //payment terms day
		$(document).on("keyup", "#payment_term_date", function() {
            var payment_termsday = jQuery(this).val();
            $("#day").html(payment_termsday);

            console.log(payment_termsday, 'ffff');

        });
    </script>
    <script>
        // form submit 
        $("#main_form_osc").on('submit', function(e){
        e.preventDefault();

        $.ajax({
            url:$(this).attr('action'),
            method:$(this).attr('method'),
            data:new FormData(this),
            processData:false,
            dataType:'json',
            contentType:false,
            beforeSend:function(){
                $(document).find('span.error-text').text('');
            },
            success:function(data){
                if (data.errormsg != ""){
		  	        $("#errormsg").html(data.errormsg);
                }

                if (data.status == 0) {
	  	            $("#tableerror").html(data.table_status);
	  	            $("#tableerrors").html(data.table_status);
                    $.each(data.error, function(prefix, val){
                        $('span.'+prefix+'_error').text(val[0]);                        
                    });
                }else{
                    $('#main_form_osc')[0].reset();
                    // alert(data.msg);
                    // sessionStorage.setItem("cpmsg", data.msg);
                    window.location.href = '{{route("contract/osc/proposal/index")}}';
                }
            }
        })
    })
    </script>
@endsection