@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">#{{$offer->id}} OFFER</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">Offer. No</span>
							<span class="opacity-70">{{ $data['offer_no'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolder mb-2">OFFER DATE.</span>
							<span class="opacity-70">{{ $data['offer_date'] }}</span>
						</div>
						<div class="d-flex flex-column flex-root">
							<span class="font-weight-bolde mb-2r">OFFER. Raised By</span>
							<span class="opacity-70">{{ $data['offer_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['offer_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['offer_description'] }}</span>
						</div>
					</div>
				</div>
			</div>
			@if(isset($data['offer_details']) && !empty($data['offer_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 class="pl-0 font-weight-bold text-muted text-uppercase">PRODUCT NAME</th>
									<th class="pl-0 font-weight-bold text-muted text-uppercase">Brand</th>
									<th class="text-right font-weight-bold text-muted text-uppercase">QTY</th>
									<th class="text-right font-weight-bold text-muted text-uppercase">Unit</th>
								</tr>
								</thead>
								<tbody>
								@foreach($data['offer_product_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>
									</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"  data-method="post" data-url="{{ route('offer.whatsapp_update',[$offer]) }}">
						<input type="hidden" name="offer_id" id="offer_id" value="{{ $offer->id }}">
						<input type="hidden" name="offer_link" id="offer_link" value="">
						<div class="form-group">
							<label>Vendor <b class="text-danger">*</b></label>
							<select class="form-control vendor-select2-js" name="vendor_id"
							        id="vendor_id"
							        data-action="{{ route('offer.vendor_autocomplete',$offer) }}"
							        data-placeholder="select">
							</select>
						</div>
						<div class="form-group col-form-label">
							<div class="checkbox-inline">
								<label class="checkbox checkbox-outline checkbox-success">
									<input type="checkbox" name="is_sent" value="1">
									<span></span>Sent</label>
							</div>
						</div>
						<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=""
								       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>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('scripts')
	<script type="text/javascript">
        GlobalJs.initSelect2('.vendor-select2-js').on('select2:select', function (event) {
            let vendor_id = $("select[name^='vendor_id']").val();
            if (vendor_id != null) {
                GlobalJs.ajaxManager({
                    url: route('offer.get_offer_link'),
                    data: {
                        vendor_id: vendor_id,
                        offer_id: $("#offer_id").val(),
                    },
                    method: "GET",
                    complete: function (res) {
                        let response_ajax = res.responseJSON.data;
                        if (res.responseJSON.success == true) {
                            $("#offer_link").val(response_ajax.offer_link);
                            $("#wp_contact").val(response_ajax.vendor_mobile_no);
                        } else {
                            GlobalJs.alertNotification(
                                "error",
                                '',
                                (res) => { /*console.log(res);*/
                                },
                                {
                                    title: 'Please Try Again.',
                                    html: errors,
                                    width: 'auto'
                                });
                        }

                    },
                }, (response_ajax) => { /* Ajax Success Callback Response  */
                });
            } else {

            }

        });
        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.'
                                    }
                                }
                            },
                            'is_sent': {
                                validators: {
                                    choice: {
                                        min: 1,
                                        max: 1,
                                        message: 'Please choose is Sent !',
                                    },
                                },
                            },
                        },
                        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') {

                            var submitBtn = event;
                            if (typeof event.originalEvent != "undefined") submitBtn = submitBtn.originalEvent.submitter;
                            else submitBtn = submitBtn.currentTarget[0];
                            let data_ajax = $.extend({}, form_data, {
                                beforeSend: function () {
                                    KTUtil.btnWait(submitBtn, "spinner spinner-right spinner-white pr-15", "Please wait");
                                    KTApp.block('#load-section-js', {
                                        overlayColor: '#000000',
                                        state: 'danger',
                                        message: 'Please wait...'
                                    });
                                },
                                complete: function (res) {
                                    KTUtil.btnRelease(submitBtn);
                                    KTApp.unblock('#load-section-js');

                                    let response_ajax = res.responseJSON;
                                    if (response_ajax.success == true && res.status == 201) {
                                        let string = $("#offer_link").val();

                                        let tmpStr = JSON.stringify(string);
                                        var newStr = tmpStr.replace(/[{}]/g, ' ');
                                        newStr = newStr.replace(/[\[\]']+/g, ' ');
                                        newStr = newStr.replace(/,/g, "%0a");
                                        newStr = newStr.replace(/"/g, '');
                                        wp_api_url = wp_api_url.replace('{mobile}', form_data.data.wp_contact);
                                        wp_api_url = wp_api_url.replace('{text}', encodeURIComponent(string))

                                        window.location.href = wp_api_url;
                                    } else {
                                        let errors = $.map(response_ajax.errors, function (value) {
                                            return value.join(', ');
                                        }).join("<br>");
                                        GlobalJs.alertNotification(
                                            "error",
                                            '',
                                            (res) => { /*console.log(res);*/
                                            },
                                            {
                                                title: response_ajax.message,
                                                html: errors,
                                                width: 'auto'
                                            });
                                    }
                                },
                            });
                            GlobalJs.ajaxManager(data_ajax, (response_ajax) => { /* Ajax Success Callback Response  */
                            });
                        } 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