@extends('layout.default')

@section('content')
	<div class="card card-custom overflow-hidden">
		<div class="card-body p-0">
			<div class="row justify-content-center bgi-size-cover bgi-no-repeat py-8 px-8 py-md-27 px-md-0"
			     style="background-image: url({{ asset('media/bg/bg-6.jpg') }});">
				<div class="col-md-9">
					<div class="d-flex justify-content-between pb-10 pb-md-20 flex-column flex-md-row">
						<h1 class="display-4 text-white font-weight-boldest mb-10">#{{$quotation->id}} Quotation</h1>
						<div class="d-flex flex-column align-items-md-end px-0">
							<h4 class="text-white">{{ $data['company_name'] }}</h4>
							<span class="text-white d-flex flex-column align-items-md-end opacity-70">
                                <span>{{ $data['company_address'] }}</span>
                                <span>{{ $data['company_email'] }}</span>
                                <span>{{ $data['company_phone_no'] }}</span>
                            </span>
						</div>
					</div>
					<div class="border-bottom w-100 opacity-20"></div>
					<div class="d-flex justify-content-between text-white pt-6">
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolde mb-2r">Quotation No</span>
							<span class="opacity-70">{{ $data['quotation_no'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolder mb-2">Quotation DATE.</span>
							<span class="opacity-70">{{ $data['quotation_date'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolde mb-2r">Quotation. Raised By</span>
							<span class="opacity-70">{{ $data['quotation_user'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolder mb-2">CONTACT NO.</span>
							<span class="opacity-70">{{ $data['quotation_contact_no'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolder mb-2">Description</span>
							<span class="opacity-70">{{ $data['quotation_description'] }}</span>
						</div>
					</div>
				</div>
			</div>
			@if(isset($data['quotation_details']) && !empty($data['quotation_details']))
				<div class="row justify-content-center py-8 px-8 py-md-10 px-md-0">
					<div class="col-md-9">
						<div class="table-responsive">
							<table class="table">
								<thead>
								<tr>
									<th scope="col">Material</th>
									<th scope="col">Brand</th>
									<th scope="col" style="min-width: 100px;">QTY</th>
									<th scope="col" style="min-width: 80px;">Unit</th>
									<th scope="col" style="min-width: 100px;">Size</th>
									<th scope="col" style="min-width: 100px;">Remarks</th>
									<th scope="col" style="min-width: 100px;">Rate</th>
									<th scope="col" style="min-width: 100px;">Amount</th>
									<th scope="col" style="min-width: 100px;">Discount Amount</th>
									<th scope="col" style="min-width: 100px;">GST</th>
									<th scope="col" style="min-width: 100px;">Net Total</th>
								</tr>
								</thead>
								<tbody>
								@foreach($data['quotation_details'] as $detail)
									<tr class="font-weight-boldest border-bottom-0 font-size-lg">
										<td class="border-top-0 pl-0 py-4">{{ $detail->material->name }}</td>
										<td class="border-top-0 pl-0 py-4">{{ $detail->brand }}</td>
										<td class="border-top-0 text-success text-right py-4">{{ number_format( $detail->quantity,3)  }}</td>
										<td class="border-top-0 text-info text-right py-4">
											@if(isset($detail->unit)) {{ $detail->unit->name }} @endif
										</td>
										<td class="border-top-0 text-right">{{ $detail->size }}</td>
										<td class="border-top-0 text-right">{{ $detail->remarks }}</td>
										<td class="border-top-0 text-right">{{ rupeeFormat($detail->rate) }}</td>
										<td class="border-top-0 text-right">{{ rupeeFormat($detail->amount) }}</td>
										<td class="border-top-0 text-right">{{ rupeeFormat($detail->discount_amount) }}</td>
										<td class="border-top-0 text-right">{{ rupeeFormat($detail->gst_amount) }}</td>
										<td class="border-top-0 text-right">{{ rupeeFormat($detail->net_total) }}</td>
									</tr>
								@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			@endif
			<div class="row justify-content-center bg-gray-100 py-8 px-8 py-md-10 px-md-0">
				<div class="col-md-4">
					<form class="form" id="whatsapp_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="flaticon-whatsapp text-success icon-lg"></i>
                                    </span>
								</div>
								<input type="text" class="form-control" name="wp_contact" id="wp_contact"
								       value="{{ str_replace(' ','',$data['quotation_vendor_no']) }}"
								       placeholder="Enter 10 digit Whatsapp No" autocomplete="off"/>
								<div class="input-group-append">
									<button class="btn btn-info" id="wp_contact_btn-js">Send!</button>
								</div>
							</div>
							<span class="form-text text-muted">Send to this requisition data in Entire Whatsapp No.</span>
						</div>
						<span class="form-text text-danger">{{ $data['quotation_remarks'] }}</span>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
	@php
		$material_description = [];
		$wp_content_data = [
			'Quotation No' => $data['quotation_no'],
			'Quotation Date' => $data['quotation_date'],
			'Remarks' => $data['quotation_remarks'],
			'Status' => \Modules\Quotation\Entities\Quotation::STATUSES[$data['quotation_status']]
		];

	@endphp
	<script type="text/javascript">
        var WhatsappForm = function () {
            var _whatsapp_form = () => {
                return $("form#whatsapp_form");
            };

            var wp_api_url = "https://wa.me/91{mobile}?text={text}"

            var _whatsapp_submit = function () {
                var _whatsapp_validator = FormValidation.formValidation(
                    document.getElementById(_whatsapp_form().attr("id")),
                    {
                        fields: {
                            wp_contact: {
                                validators: {
                                    notEmpty: {
                                        message: 'Please required Whatsapp Contact No.'
                                    },
                                    digits: {
                                        message: 'Whatsapp Contact No Should only Digits'
                                    },
                                    stringLength: {
                                        min: 10,
                                        max: 10,
                                        message: 'Please enter a 10 digits Whatsapp No.'
                                    }
                                }
                            }
                        },
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger(),
                            bootstrap: new FormValidation.plugins.Bootstrap()
                        }
                    }
                );

                _whatsapp_form().on("submit", function (event) {
                    event.preventDefault();
                    let form_data = GlobalJs.form_data($(this));
                    _whatsapp_validator.validate().then(function (status) {
                        if (status == 'Valid') {
                            let string = @json($wp_content_data);
                            let tmpStr = JSON.stringify(string);

                            var newStr = tmpStr.replace(/[{}]/g, ' ');
                            var newStr = tmpStr.replace(/[{}]/g, ' ');
                            newStr = newStr.replace(/[\[\]']+/g, ' ');
                            newStr = newStr.replace(/,/g, "%0a");
                            newStr = newStr.replace(/"/g, '');

                            //console.log(string, newStr);return;
                            wp_api_url = wp_api_url.replace('{mobile}', form_data.data.wp_contact);
                            wp_api_url = wp_api_url.replace('{text}', newStr)

                            window.location.href = wp_api_url;
                        } else {
                            GlobalJs.alertNotification("error", "Sorry, looks like there are some errors detected, please try again.", (response) => {
                                console.log("Error:", response);
                            });
                        }
                    });
                });
            }

            return {
                // public functions
                init: function () {
                    _whatsapp_submit();
                }
            }
        }();


        jQuery(document).ready(function () {
            WhatsappForm.init();
        });

	</script>
@endsection