@extends('layouts.user')

{{-- Web site Title --}}
@section('title')
    {{ $title }}
@stop

{{-- Content --}}
@section('content')
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <div class="page-header clearfix">
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <i class="material-icons">flag</i>
                {{ $title }}
            </h4>
            <span class="pull-right">
                <i class="fa fa-fw fa-chevron-up clickable"></i>
                <i class="fa fa-fw fa-times removepanel clickable"></i>
            </span>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12">
                    <div class="column_dropdown pull-right m-b-15">

                    </div>
                </div>
            </div>
            <div id="verificationApp" class="m-3">
                <div class="panel-body">
                    <div>
                        <label class="m-2 p-2" for="company_id_number">Enter Company Id:</label>
                        <input v-model="company_id_number" class="form-control input-sm" id="company_id_number" name="query_date" type="text" placeholder="search..." style="padding: 2px">
                    </div>
                    <div>
                        <label class="m-2 p-2" for="query_date">Enter Date:</label>
                        <input v-model="query_date" class="form-control input-sm" id="query_date" name="query_date" type="date" placeholder="search..." style="padding: 2px">
                    </div>
                    <button class="btn btn-primary" @click.prevent="getCompanyDetails" style="margin-top:4px">Find Company</button>

                    <div v-if="resultFound" class="">
                        <div class="panel-heading">
                            <div class="panel-title">
                                Details
                            </div>
                        </div>
                        <div class="panel-body">
                            {{-- <div>
                                @{{ response.message ?? null }}
                            </div> --}}
                            <div>
                                <span>
                                    <b>
                                       Denumire:
                                    </b>
                                </span>
                                @{{ companyData.denumire ?? null }}
                            </div>
                            <div>
                                <span>
                                    <b>
                                        Adresa:
                                    </b>
                                </span>
                                @{{ companyData.adresa ?? null }}
                            </div>
                            <div>
                                <span>
                                    <b>
                                        Stare Inregistrare:
                                    </b>
                                </span>
                                @{{ companyData.stare_inregistrare ?? null }}
                            </div>
                            <div>
                                <span>
                                    <b>
                                        Mesaj SCP TVA:
                                    </b>
                                </span>
                                @{{ companyData.mesaj_ScpTVA ?? null }}
                            </div>
                            <div>
                                <span>
                                    <b>
                                        Cod CAEN:
                                    </b>
                                </span>
                               @{{ companyData.cod_CAEN ?? null }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    company_id_number: null,
                    query_date: null,
                    response: [],
                    resultFound: false,
                    companyData: []
                }
            },
            methods: {
                async getCompanyDetails() {

                    if (this.query_date == null || this.company_id_number == null) {
                        alert('please provide a company id and date');
                        return;
                    } else if(isNaN(this.company_id_number)) {
                        alert('please provide a valid company id, it must be a number');
                        return;
                    }

                    let data = await axios({
                            method: "post",
                            url: "details",
                            data:{
                                "company_id_number": this.company_id_number,
                                "query_date": this.query_date
                            },
                        }).catch(function (error) {
                            if (error.response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(error.response.data);
                            console.log(error.response.status);
                            console.log(error.response.headers);
                            } else if (error.request) {
                            // The request was made but no response was received
                            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(error.request);
                            } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', error.message);
                            }
                            console.log(error.config);
                        });

                    try {
                        data = JSON.parse(data.data)
                    }
                    catch(err) {
                        alert('error occurred: ' + err.status);
                    }

                    // console.log(data)
                    this.response = data

                    if(this.response.message ?? null == "SUCCESS") {
                        this.companyData = this.response.found[0]
                        console.log(this.companyData)
                        this.resultFound = true
                    } else {
                        alert('could not find a company matching the supplied details, please ensure you entered the id correctly');
                        this.resultFound = false
                    }
                },
            }
        }).mount('#verificationApp')
    </script>
@stop

{{-- Scripts --}}
@section('scripts')



@stop