<?php

db_table::createView("graphique", "Graphique");

Route::isJs(function () {
    ob_start();
?>
    <div style="background: rgba(255,255,255,0.7);flex:1;display: flex;">
        <div id="fff" style="padding: 15px;width: 220px;display: flex;align-items: center;justify-content: flex-start;background: #fff;flex-direction: column;">
            <div ng-cloak>
                        <div ng-show="loading3" style="min-height: 200px; padding: 150px 0px;;display: flex; align-items: start; justify-content: start;">
                            <md-progress-circular md-mode="indeterminate" md-diameter="48"></md-progress-circular>
                        </div>
                        <div ng-hide="loading3">
                    <div class="row" style="width: 100%;margin: 0;padding: 0;">
                        <div class="col-xs-12" style="padding: 0;">
                            <countries cnt="ctrl.form.data.country"></countries>
                        </div>
                        <form ng-submit="getimma()">
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">Immatricule</label>
                                <input type="text" class="form-control avs" ng-model="ctrl.form.data.imm" pattern="([0-9]{1,3} [Tt][Uu] [0-9]{1,4})|([Rr][Ss] [0-9]{1,6})" name="imm" placeholder="98 TU 700/RS 99991">
                            </div>
                        </div>
                        <div class="col-xs-12" style="text-align: right;padding: 0;margin-top: -10px;">
                            <button ng-show="ctrl.form.data.imm&&!loading" class="btn btn-success" style="padding: 0px 4px;" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
                            <button ng-show="ctrl.form.data.imm" class="btn btn-danger" style="padding: 0px 4px;" type="reset" ng-click="rstimma()"><span class="glyphicon glyphicon-remove"></span></button>
                        </div>
                        </form>
                        <form ng-submit="getvina()">
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">VIN</label>
                                <input type="text" class="form-control avs" pattern="[0-9A-Za-z]{17}" ng-model="ctrl.form.data.vin" name="vin" placeholder="VIN">
                            </div>
                        </div>
                        <div class="col-xs-12" style="text-align: right;padding: 0;margin-top: -10px;">
                            <button ng-show="ctrl.form.data.vin&&!loading" class="btn btn-success" style="padding: 0px 4px;" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
                            <button ng-show="ctrl.form.data.vin" class="btn btn-danger" style="padding: 0px 4px;" type="reset" ng-click="rstvina()"><span class="glyphicon glyphicon-remove"></span></button>
                        </div>
                        </form>
                        <w-form api="getTree2" on-reset="" loadingx="true" loading4="loading3" on-success="" on-end="submt()" ng-model="ctrl.form">
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label" onclick="resetselectmanu()">Manufacturer</label>
                                <selectmanu lst="ctrl.form.data.manulst" ng-model="ctrl.form.data.manuid" country="{{ctrl.form.data.country}}"></selectmanu>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label" onclick="resetselectmod()">Model</label>
                                <selectmod lst="ctrl.form.data.modlst" ng-model="ctrl.form.data.modid" manuid="ctrl.form.data.manuid" country="{{ctrl.form.data.country}}"></selectmod>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label" onclick="resetselecttype()">Type</label>
                                <selecttype lst="ctrl.form.data.typlst" ng-model="ctrl.form.data.id" modid="ctrl.form.data.modid" country="{{ctrl.form.data.country}}"></selecttype>
                            </div>
                        </div>
                        <div ng-if="ctrl.form.res.cap" class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">Body</label>
                                <select class="form-control avs" ng-model="ctrl.form.data.cap" ng-change="resubmit()" ng-options="elm.QualColId as elm.QualColText for elm in ctrl.form.res.cap"></select>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                        </w-form>
                        <table ng-if="itemx.carId" style="width:100%;color: #d9534f; font-weight: bold;">
                        <tr>
                            <td style="width: 100%;"></td>
                            <td style="width:1px;color:black;text-align: right;">
                                <button class="btn btn-xs" ng-click="detailDialog.itemx = itemx;detailDialog.show()">
                                    <span class="glyphicon glyphicon-list"></span>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">{{itemx.manuName}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">{{itemx.modelname}}</td>
                        </tr>
                        <tr>
                            <td colspan="2">{{itemx.carName}}</td>
                        </tr>
                        </table>
                        <dialog ng-model="detailDialog" titre="Détail : {{detailDialog.itemx.manuName}} {{detailDialog.itemx.modelname}} {{detailDialog.itemx.carName}} " btn-valider-text="Oui, c'est ça" btn-valider="<?= (($_SESSION['user']['type']=="Admin"||$_SESSION['user']['type']=="Administrateur")?"true":"false") ?>" ng-valider="cestca(fermer)" btn-fermer="true" width="fit-content">
                            <listcar car-id="{{detailDialog.itemx.carId}}" country="{{ctrl.form.data.country}}"></listcar>
                        </dialog>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 15px;flex:1;">
            <div id="rrr" ng-cloak style="display: flex;width: 100%;align-items: flex-start;flex:1;justify-content: flex-start;flex-direction: column;">
                <div ng-show="loading3||loading4" style="display: flex;align-items: center;justify-content: center;flex:1;width: 100%;">
                    <md-progress-circular md-mode="indeterminate" md-diameter="48"></md-progress-circular>
                </div>
                <div ng-hide="loading3||loading4" style="width: 100%;min-width:300px;">
                    <div style="display:flex;text-transform: uppercase">
                        <div ng-if="ctrl.form.res.nav.t1"><span style="margin: 0px 10px;cursor: pointer"><a class="ahref" ng-click="resubmit()">{{ctrl.form.res.nav.t1.title}}</a></span></div>
                        <div ng-if="ctrl.form.res.nav.t2"><i class="fas fa-angle-right rotate ifas"></i><span style="margin: 0px 10px;cursor: pointer"><a class="ahref" ng-click="zgor(ctrl.form.res.nav.t2.id)">{{ctrl.form.res.nav.t2.title}}</a></span></div>
                        <div ng-if="ctrl.form.res.nav.t3"><i class="fas fa-angle-right rotate ifas"></i><span style="margin: 0px 10px;cursor: pointer"><a class="ahref" ng-click="zgor(ctrl.form.res.nav.t3.id)">{{ctrl.form.res.nav.t3.title}}</a></span></div>
                    </div>
                    <div>
                        <iframe id="vh" style="width: 900px;height:700px;border: unset;"></iframe>
                    </div>
                </div>
            </div>
        <div>
        <dialog ng-model="tabDialog" titre="{{tabDialog.title}}" btn-fermer="true" width="max-content">
            <div ng-show="tabDialog.loading2" style="min-height: 400px; min-width: 700px; padding: 200px; display: flex; align-items: start; justify-content: start;">
                <md-progress-circular md-mode="indeterminate" md-diameter="48"></md-progress-circular>
            </div>
            <div ng-hide="tabDialog.loading2||(!tabDialog.res.tecall2.articles&&!tab)||tabDialog.loading3">
                        <table id="srctc" class="table table-striped table-bordered" style="background: #fff;">
                            <thead>
                                <tr>
                                    <th>Ref</th>
                                    <th>legacyId</th>
                                    <th>Code-barres</th>
                                    <th>Marque</th>
                                    <th>Groupe</th>
                                    <th>Images</th>
                                    <th>Criteria</th>
                                    <th>rplcArt</th>
                                    <th>rplcByArt</th>
                                    <th>R.O</th>
                                    <th>A.V</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in tabDialog.res.tecall2.articles">
                                    <td>{{item.articleNumber}}</td>
                                    <td>{{item.genericArticles[0].legacyArticleId}}</td>
                                    <td>{{item.gtins.join(' | ')}}</td>
                                    <td>{{item.mfrName}}</td>
                                    <td>{{item.genericArticles[0].genericArticleDescription}}</td>
                                    <td>
                                        <div style="display: grid;grid-auto-flow: row;row-gap: 8px">
                                            <img ng-repeat="img in item.images" ng-if="img.headerKey!=16" ng-click="imgxDialog.img=img;imgxDialog.show();" src="{{img.imageURL100}}">
                                        </div>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs" ng-if="item.articleCriteria.length>0" ng-click="criteriDialog.articleNumber = item.articleNumber;criteriDialog.articleCriteria=item.articleCriteria;criteriDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs" ng-if="item.replacesArticles.length>0" ng-click="replacedDialog.titre = 'replacesArticles: '+item.articleNumber;replacedDialog.data=item.replacesArticles;replacedDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs" ng-if="item.replacedByArticles.length>0" ng-click="replacedDialog.titre = 'replacedByArticles: '+item.articleNumber;replacedDialog.data=item.replacedByArticles;replacedDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs" ng-if="item.oemNumbers.length>0" ng-click="oemDialog.articleNumber = item.articleNumber;oemDialog.oemNumbers = item.oemNumbers;oemDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                    <td>
                                        <button class="btn btn-xs" ng-click="icarDialog.articleNumber = item.articleNumber;icarDialog.idarticle = item.genericArticles[0].legacyArticleId;icarDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
            </div>
        </dialog>
        <dialog ng-model="imgxDialog" titre="Image : {{imgxDialog.img.fileName}}" btn-fermer="true" width="fit-content">
			<img ng-src="{{imgxDialog.img.imageURL800+''}}">
		</dialog>
		<dialog ng-model="criteriDialog" titre="Caractéristiques : {{criteriDialog.articleNumber}} " btn-fermer="true" width="fit-content">
            <table class="table table-striped">
                <tr ng-repeat="cr in criteriDialog.articleCriteria">
                    <th>{{cr.criteriaAbbrDescription || cr.criteriaDescription}}</th>
                    <td>{{cr.formattedValue}} {{cr.criteriaUnitDescription}}</td>
                </tr>
            </table>
        </dialog>
        <dialog ng-model="replacedDialog" titre="{{replacedDialog.titre}} " btn-fermer="true" width="fit-content">
            <table class="table table-striped">
                <tr ng-repeat="dt in replacedDialog.data">
                    <th>{{dt.mfrName}}</th>
                    <td>{{dt.articleNumber}}</td>
                    <td>
                    <button class="btn btn-xs" ng-click="ijkx(dt.articleNumber,dt.dataSupplierId)">
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                    </td>
                </tr>
            </table>
        </dialog>
        <dialog ng-model="oemDialog" titre="References d'origine : {{oemDialog.articleNumber}} " btn-fermer="true" width="fit-content">
            <table class="table table-striped">
                <tr ng-repeat="oem in oemDialog.oemNumbers">
                    <th>{{oem.mfrName}}</th>
                    <td>{{oem.articleNumber}}</td>
                </tr>
            </table>
        </dialog>
        <dialog ng-model="icarDialog" titre="Affectation véhicule : {{icarDialog.articleNumber}} " btn-fermer="true" width="fit-content">
            <manuslist article-id="{{icarDialog.idarticle}}" dilog="carDialog"></manuslist>
        </dialog>
        <dialog ng-model="carDialog" titre="Véhicules : {{carDialog.mfrName}} " btn-fermer="true" width="fit-content">
            <carslist article-id="{{carDialog.articleId}}" mfr-id="{{carDialog.mfrId}}"></carslist>
        </dialog>
        <dialog ng-model="xpieceDialog" titre="TecDoc : {{xpieceDialog.articleNumber}} " btn-fermer="true" width="fit-content">
            <piecelist dil="xpieceDialog" piece-id="{{xpieceDialog.articleNumber+'¤'+xpieceDialog.dataSupplierId}}" redonly="true"></piecelist>
        </dialog>
        </div>
    </div>
    <?php
    $code = ob_get_clean();
    ?>
    <script>
        app.directive('graphique', [function() {
            return {
                restrict: 'EA',
                transclude: false,
                replace: false,
                template: <?= json_encode(preg_replace("/\t|\n|\r/i", "", $code)) ?>,
                scope: {},
                controller: function($scope,$sce,$timeout) {
                    $scope.form = {};
                    $scope.loading2 = false;
                    $scope.loading3 = false;
                    $scope.tab=false;
                    $scope.vh=document.getElementById('vh');
                    $scope.trustAsHtml = function(string) {
                        if(typeof string=="string")
                            return $sce.trustAsHtml(string);
                        else return "";
                    };
                    $scope.cestca = function(fermer){
						api('cestca',{data:$scope.ctrl.form.data},function(e){
                            if(fermer) fermer();
                        });
					}
                    $scope.getimma = function() {
                         var imm=$scope.ctrl.form.data.imm;
                         var country=$scope.ctrl.form.data.country;
                         $scope.rstimma();
                         $timeout(function(){
                            $scope.ctrl.form.data={country:country,imm:imm};
                            $scope.loading3 = true;
                         });
                         api("getImm",{imm : imm,country:country},function(list){
                            if(list.vin)
                            $timeout(function(){
                                $scope.ctrl.form.data.vin=list.vin;
                            });
                            if(list.lst1==null&&list.vin!=null){
                                $scope.getvina(list.vin);
                            }else{
                                $timeout(function(){
                                    $scope.ctrl.form.data.manulst=list.lst1;
                                    $scope.ctrl.form.data.modlst=list.lst2;
                                    $scope.ctrl.form.data.typlst=list.lst3;
                                    if(list.manuid) $scope.ctrl.form.data.manuid=list.manuid;
                                    if(list.modid) $scope.ctrl.form.data.modid=list.modid;
                                    if(list.id) {
                                        $scope.ctrl.form.data.id=list.id;
                                        setTimeout(() => {
                                            angular.element(document.getElementsByTagName('form')[2]).scope().submit();
                                        }, 100);
                                    }
                                    $scope.loading3 = false;
                                });
                            }
                        });
                    };
                    $scope.rstimma = function() {
                        $timeout(function(){
                            $scope.ctrl.form.data=null;
                            $scope.ctrl.form.data={country:"TN"};
                            $scope.itemx=null;
                        });
                    };
                    $scope.getvina = function(x) {
                        var vin=(x?x:$scope.ctrl.form.data.vin);
                        var country=$scope.ctrl.form.data.country;
                        $scope.rstvina();
                        $timeout(function(){
                            $scope.ctrl.form.data={country:country,vin:vin};
                            $scope.loading3 = true;
                        });
                        api("getLsts",{vin : vin,country:country},function(list){
                            $timeout(function(){
                                if(list.imm)$scope.ctrl.form.data.imm=list.imm;
                                $scope.ctrl.form.data.manulst=list.lst1;
                                $scope.ctrl.form.data.modlst=list.lst2;
                                $scope.ctrl.form.data.typlst=list.lst3;
                                if(list.manuid) $scope.ctrl.form.data.manuid=list.manuid;
                                if(list.modid) $scope.ctrl.form.data.modid=list.modid;
                                if(list.id) {
                                    $scope.ctrl.form.data.id=list.id;
                                    setTimeout(() => {
                                        angular.element(document.getElementsByTagName('form')[2]).scope().submit();
                                    }, 100);
                                }
                                $scope.loading3 = false;
                            });
                        });
                    };
                    $scope.rstvina = function() {
                        $timeout(function(){
                            $scope.ctrl.form.data=null;
                            $scope.ctrl.form.data={country:"TN"};
                            $scope.itemx=null;
                        });
                    };
                    $scope.getpcloc3 = function(x,y,z){
                        $timeout(function(){
                            $scope.loading2 = true;
                            $scope.tabDialog.title=z;
                            $scope.tabDialog.show();
                            $scope.tabDialog.loading2=$scope.loading2;
                            $scope.tabDialog.loading3=$scope.loading3;
                            $scope.tabDialog.res=$scope.ctrl.form.res;
                        });
                        api("getpiece9",{carId:x,list:y,country:$scope.ctrl.form.data.country},function(list){
                            $timeout(function(){
                                $scope.tab=true;
                                if(tabsrctc!=null) {tabsrctc.clear();tabsrctc.draw();tabsrctc.destroy();}
                                $scope.ctrl.form.res.tecall2=list;
                                $scope.tabDialog.res=$scope.ctrl.form.res;
                                setTimeout(() => {
                                    tabsrctc=$('#srctc').DataTable({"order": []});
                                }, 500);
                                $scope.loading2 = false;
                                $scope.tabDialog.loading2=$scope.loading2;
                            });
                        });
                    };
                    $scope.xfetch = (req,data) => {
                        $timeout(function(){
                            $scope.loading4 = true;
                        });
                        $scope.vh.contentWindow.document.open();
                        $scope.vh.contentWindow.document.close();
                        var country=$scope.ctrl.form.data.country;
                        api("getgraph",{id:$scope.ctrl.form.res.rmiTypeId,nav:$scope.ctrl.form.res.nav,cap:$scope.ctrl.form.data.cap,data:data,req:req,country:country},function(list){
                            $timeout(function(){
                                if(list.list) $scope.ctrl.form.res.list=list.list;
                                else $scope.ctrl.form.res.list=null;
                                $scope.ctrl.form.res.nav=list.nav;
                                $scope.loading4 = false;
                            });
                            $scope.mor(list.graph);
                        });
                    };
                    $scope.xpiece = function(x){
                        var list=$scope.ctrl.form.res.list;
                        if(list){
                            var f=list.find(o=>o.ItemMpId==x);
                            if(f){
                                $scope.getpcloc3($scope.ctrl.form.data.id,f['GenArts'].map(a => a.GenArtNo),f['ItemMpText']);
                            }
                        } 
                    };
                    $scope.ijkx = (x,y) => {
                        $scope.xpieceDialog.articleNumber = x;
                        $scope.xpieceDialog.dataSupplierId = y;
                        $scope.xpieceDialog.show();
                        angular.element(document.getElementsByTagName('piecelist')).scope().$$childTail.wwc(x+"¤"+y);
                    };
                    $scope.mor = (x) => {
                        z = '<h3>Graphique non disponible pour cette voiture !</h3>';
                        if(x!=''&&x!=404&&x.substr(0,8)!='{"Type":'){
                            z = (x.replaceAll('\\\\"','"')).replaceAll(/(?:\\[rnt]|[\r\n\t])/g, " ").slice(1, -1);
                            z = z.replaceAll(/onclick="clickOnElement\('([a-z][0-9]+)'\)/g,'onclick="parent.gor(\'$1\',\'graphique\')');
                            z = z.replaceAll(/href="Þ([a-z][0-9]+)Þ"/g,'onclick="parent.gor(\'$1\',\'graphique\')"');
                        }
                        $scope.vh.contentWindow.document.write(z);
                        setTimeout(() => {
                            $scope.vh.height = $scope.vh.contentWindow.document.body.scrollHeight+4;
                        }, 500);
                    };
                    $scope.zgor = (x) => {
                        window.gor(x,'graphique');
                    };
                    $scope.resubmit = function(){
                        setTimeout(() => {
                            angular.element(document.getElementsByTagName('form')[2]).scope().submit();
                        }, 100)
                    };
                    $scope.submt = function () {
                        $scope.vh.contentWindow.document.open();
                        $scope.vh.contentWindow.document.close();
                        setTimeout(() => {
                            $timeout(function(){
                                $scope.ctrl.form.data.cap=$scope.ctrl.form.res.capid;
                                $scope.itemx={};
                            });
                            $scope.mor($scope.ctrl.form.res.graph);
                            api("getTypez",{id:$scope.ctrl.form.data.id,country:$scope.ctrl.form.data.country},function(list){
                                $timeout(function(){
                                    $scope.itemx=list;
                                });
                            });
                        }, 200);
                    };
                },
                link: function(scope, iElement, iAttrs) {}
            };
        }]);
    </script>
<?php
});