{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
    <!-- begin::Card-->
    <div class="card card-custom overflow-hidden">
        <div class="card-body p-0">
            <!-- begin: Invoice-->
            <!-- begin: Invoice header-->
            <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">#{{$requisition->id}} REQUISITION</h1>
                        <div class="d-flex flex-column align-items-md-end px-0">
                            {{--<!--begin::Logo-->
                            <a href="#" class="mb-5">
                                <img src="https://keenthemes.com/metronic/themes/metronic/theme/html/demo1/dist/assets/media/logos/logo-light.png" alt="" />
                            </a>--}}
                            <h4 class="text-white">{{ $data['company_name'] }}</h4>
                            <!--end::Logo-->
                            <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">REQUISITION. No</span>
                            <span class="opacity-70">{{ $data['requisition_no'] }}</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">REQUISITION DATE.</span>
                            <span class="opacity-70">{{ $data['requisition_date'] }}</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">BRANCH.</span>
                            <span class="opacity-70">{{ $data['requisition_site_name'] }}</span>
                        </div>
                    </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">REQUISITION. Raised By</span>
                            <span class="opacity-70">{{ $data['requisition_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['requisition_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['requisition_description'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end: Invoice header-->
            @if(isset($data['requisition_details']) && !empty($data['requisition_details']))
            <!-- begin: Invoice body-->
            <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">COLOR NAME</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>
                                    <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">SIZE</th>
                                    <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">REMARKS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($data['requisition_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->color->name }}</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-primary text-right">{{ $detail->size }}</td>
                                        <td class="border-top-0 text-muted text-right">{{ $detail->remarks }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
            <!-- end: Invoice body-->
            <!-- begin: Invoice footer-->
            <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" 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>
    <!-- end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
    @php
        $material_description = [];
        $requisition_details = $data['requisition_details']->toArray();
        array_walk($requisition_details, function ($val, $ii) use (&$material_description){
            $material_description[] = [
                'Product Name' => $val['material']['name'],
                'Color Name' => $val['color']['name'],
                'Qty.' => number_format( $val['quantity'],3),
                'Unit' => (isset($val['unit']) ? $val['unit']['name'] : ''),
                'Size' => $val['size'],
                'Remarks' => $val['remarks']
            ];
        });
        $wp_content_data = [
            'Requisition No' => $data['requisition_no'],
            'Requisition Date' => $data['requisition_date'],
            'Branch' => $data['requisition_site_name'],
            'Requisition Raised By' => $data['requisition_user'],
            'Contact No.' => $data['requisition_contact_no'],
            'Description' => $data['requisition_description'],
            'Material Description' => $material_description
        ];
        //$output = http_build_query($wp_content_data, "",'; ');

    @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, ' ');
                            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