@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 Show</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 Show</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
                <!-- 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">
                                @foreach ($osc as $data)
                                    <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 ($osc 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->alp_client_name }}"></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" value="{{ $data->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->alp_address }}"></td>
                                                <td class="bg-light"><span>Date</span></td>
                                                <td><input type="date" class="w-100" name="alp_date" value="{{ $data->alp_date }}"></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->alp_contact_person }}"></td>
                                                <td class="bg-light"><span>Payment Term</span></td>
                                                <td><input type="text" class="w-100" name="alp_payment_term" value="{{ $data->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->alp_contact_no }}">
                                                </td>
                                                <td class="bg-light"><span>Validity</span></td>
                                                <td><input type="text" class="w-100" name="alp_validity" value="{{ $data->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->alp_email_id }}">
                                                </td>
                                                <td class="bg-light"><span>Client Code</span></td>
                                                <td><input type="text" class="w-100" name="alp_client_code" value="{{ $data->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->alp_enquiry_ref }}" readonly></td>
                                                <td class="bg-light"><span>Currency</span></td>
                                                <td><input type="text" class="w-100" name="alp_currency" value="{{ $data->alp_currency }}"></td>
                                            </tr>
                                        </table>
                                        @endforeach
                                    </div>

                                    <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">
                                                @foreach ($data->oscitems as $item)
                                                <tr>
                                                    <td><input type="hidden" class="w-100" name="items[{{ $item }}][item_id]" value="{{ $item->id }}" readonly><input type="text" class="w-100 text-center" name="items[{{ $item }}][srno]" id="srno{{ $item }}" value="{{ $item->srno }}" readonly></td>
                                                    <td><input type="text" class="w-100" name="items[{{ $item }}][description]" id="des{{ $item }}" value="{{ $item->description }}"></td>
                                                    <td><input type="text" class="w-100" name="items[{{ $item }}][quantity]" onkeypress="return /[0-9/.]/i.test(event.key)" id="qty{{ $item }}" value="{{ $item->quantity }}"></td>
                                                    <td><input type="text" class="w-100" name="items[{{ $item }}][uom]" id="uom{{ $item }}" value="{{ $item->uom }}"></td>
                                                    <td><input type="text" class="w-100" name="items[{{ $item }}][price]" onkeypress="return /[0-9/.]/i.test(event.key)" id="price{{ $item }}" value="{{ $item->price }}"></td>
                                                    <td><input type="text" class="w-100 t2g" name="items[{{ $item }}][amount]" id="amount{{ $item }}" value="{{ $item->amount }}" readonly></td>
                                                    {{-- <td><a href="javascript:void(0);" class="w-100 remove_row btn btn-danger btn-sm" data-row="{{ $item }}"><i class="fa fa-trash"></i></a></td> --}}
                                                </tr>
                                                @endforeach
                                            </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" value="{{ $data->alp_subtotal }}"></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" value="{{ $data->alp_total_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" value="{{ $data->alp_total_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" value="{{ $data->alp_delivery_servicelocation }}"></td>
                                                </tr>
                                                <tr>
                                                    <td>Delivery/Service Date</td>
                                                    <td colspan="2"><input type="date" class="w-50" name="alp_delivery_servicedate" value="{{ $data->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" value="{{ $data->alp_preparedby_name }}">
                                                <span>Name</span><br>
                                                <span>Title</span>
                                            </div>
                                            <div class="pt-5">
                                                Approved By 
                                                <input type="text" name="alp_approved_name" class="w-100" value="{{ $data->alp_approved_name }}">
                                                <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" value="{{ $data->alp_behalfclient_name }}">
                                                <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">{{ $data->alp_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">{{ $data->alp_tac_two }}</textarea>
                                            @error('alp_tac_two')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        {{-- @endforeach --}}
                                    </div>
                                @endforeach
                            </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>
@endsection