<?php
db_table::createView("searchdb", "Search DB");
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="getTree" 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">DATA BASE</label>
                                <selectdb ng-model="ctrl.form.data.db"></selectdb>
                            </div>
                        </div>
                        <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 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;overflow-x: auto;display: flex;">
            <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" 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-if="ctrl.form.res.tree" ng-hide="loading3" style="width: 100%;min-width:300px;display:flex">
                      <div ng-if="ctrl.form.res.tree" data-ng-bind-html="trustAsHtml(ctrl.form.res.tree)"></div>
                </div>
            </div>
        <div>
        <div>
        <div ng-show="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="loading2||(!ctrl.form.res.loc&&!tab)||loading3">
        <table><tr><td style="background-color: #1296db33;border-radius: 4px;vertical-align: top;padding: 8px 0px;text-align: center;min-width: 20px;" onclick="hsy()" aria-hidden="false" class=""><span id="chevron" class="glyphicon glyphicon-chevron-left"></span></td>
        <td style="padding-left: 15px;">
                            <table id="srctcST" ng-show="ctrl.form.res.type=='ST'" class="table table-striped table-bordered" style="background: #fff;">
                                <thead>
                                    <tr>
                                        <th>Ref</th>
                                        <th>RefTec</th>
                                        <th>Marque</th>
                                        <th>Groupe</th>
                                        <th>Criteria</th>
                                        <th>rplcArt</th>
                                        <th>rplcByArt</th>
                                        <th>Images</th>
                                        <th>R.O</th>
                                        <th>A.V</th>
                                        <th>Qte</th>
                                        <th>STE</th>
                                        <th>Prix</th>
                                        <th>Remise</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-if="ctrl.form.res.type=='ST'&&ctrl.form.res.loc.length>0" ng-repeat="item in ctrl.form.res.loc">
                                        <td>
                                            <div class="zza" id="{{item.COD_ART}}">{{item.COD_ART}}<a ng-if="item.legacyArticleId" style="margin-left: auto;" ng-click="ijkx(item.legacyArticleId,'')"><img style="height:20px;margin-left:8px" src="/public/images/td.png"></a></div>
                                        </td>
                                        <td>{{item.articleNumber}}</td>
                                        <td>{{item.mfrName}}</td>
                                        <td>{{item.genericArticleDescription}}</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>
                                            <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.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 ng-if="item.cars" class="btn btn-xs" ng-click="zcarDialog.data = item.cars;zcarDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                            </button>
                                        </td>
                                        <td>{{item.QUT_STK}}</td>
                                        <td>{{item.ste}}</td>
                                        <td>{{(item.PRIX_VEN).toFixed(3)}} DT</td>
                                        <td>{{item.REMISE}} %</td>
                                    </tr>
                                </tbody>
                            </table>
                            <table id="srctcMO" ng-show="ctrl.form.res.type=='MO'" class="table table-striped table-bordered" style="background: #fff;">
                                <thead>
                                    <tr>
                                        <th>Ref</th>
                                        <th>Titre</th>
                                        <th>Code-barres</th>
                                        <th>Marque</th>
                                        <th>Category</th>
                                        <th>Images</th>
                                        <th>Type</th>
                                        <th>Qte</th>
                                        <th>prix</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-if="ctrl.form.res.type=='MO'&&ctrl.form.res.loc.length>0" ng-repeat="item in ctrl.form.res.loc">
                                        <td>
                                            <div class="zza" id="{{item.ref}}">{{item.ref}}<a ng-if="item.legacyArticleId" style="margin-left: auto;" ng-click="ijkx(item.legacyArticleId,'')"><img style="height:20px;margin-left:8px" src="/public/images/td.png"></a></div>
                                        </td>
                                        <td>{{item.titre}}</td>
                                        <td>{{item.code_barre}}</td>
                                        <td>{{item.titre_marque}}</td>
                                        <td>{{item.titre_categorie}}</td>
                                        <td>
                                            <div style="display: grid;grid-auto-flow: row;row-gap: 8px">
                                            <img style="height:100px" ng-repeat="img in item.album track by $index" ng-click="imgzDialog.img=img;imgzDialog.titre=item.titre;imgzDialog.show();" src="{{img}}">
                                            </div>
                                        </td>
                                        <td>{{item.type}}</td>
                                        <td>{{item.stockTotal}}</td>
                                        <td>{{(item.prix_vente_ttc).toFixed(3)}} DT</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
        </div>
        </div>
        <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="imgzDialog" titre="Image : {{imgzDialog.titre}}" btn-fermer="true" width="fit-content">
			<img ng-src="{{imgzDialog.img+''}}">
		</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>
        <dialog ng-model="zcarDialog" titre="Véhicules" btn-fermer="true" width="fit-content">
            <div>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <th>id</th>
                            <th>Manu</th>
                            <th>Model</th>
                            <th>Description</th>
                            <th>Date Construction</th>
                            <th>HP</th>
                            <th>KW</th>
                        </tr>
                        <tr ng-repeat="item in zcarDialog.data">
                            <td><a style="cursor: pointer" ng-click="detailDialog.itemx = item;detailDialog.show()">{{item.carId}}</a></td>
                            <td>{{item.manuDesc}}</td>
                            <td>{{item.modelDesc}}</td>
                            <td>{{item.carDesc}}</td>
                            <td>de {{item.yearOfConstructionFrom/100}} à {{item.yearOfConstructionTo/100}}</td>
                            <td>de {{item.powerHpFrom}} à {{item.powerHpTo}}</td>
                            <td>de {{item.powerKwFrom}} à {{item.powerKwTo}}</td>
                        </tr>
                    </table>
            </div>
        </dialog>
        </div>
    </div>
    <?php
    $code = ob_get_clean();
    ?>
    <script>
        app.directive('searchdb', [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.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 db=$scope.ctrl.form.data.db;
                         var country=$scope.ctrl.form.data.country;
                         $scope.rstimma();
                         $timeout(function(){
                            $scope.ctrl.form.data={country:country,imm:imm,db:db};
                            $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 db=$scope.ctrl.form.data.db;
                         var country=$scope.ctrl.form.data.country;
                         $scope.rstvina();
                         $timeout(function(){
                            $scope.ctrl.form.data={country:country,vin:vin,db:db};
                            $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.getpcloz2 = function(x,y,z){
                        $timeout(function(){
                            $scope.loading2 = true;
                        });
                        api("getpiece8",{carId:x,group:y,country:$scope.ctrl.form.data.country,db:z},function(list){
                            $timeout(function(){
                                $scope.tab=true;
                                if(tabsrctc!=null) {tabsrctc.clear();tabsrctc.draw();tabsrctc.destroy();}
                                if(tabsrctc2!=null) {tabsrctc2.clear();tabsrctc2.draw();tabsrctc2.destroy();}
                                $scope.ctrl.form.res.loc=list.loc;
                                $scope.ctrl.form.res.type=list.type;
                                $scope.ctrl.form.res.tecall2=list.tecall2;
                                setTimeout(() => {
                                    if(list.type=="ST") tabsrctc=$('#srctc'+list.type).DataTable({"order": []});
                                    else tabsrctc2=$('#srctc'+list.type).DataTable({"order": []});
                                }, 500);
                                $scope.loading2 = false;
                            });
                        });
                    };
                    $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.submt = function () {
                        setTimeout(() => {
                            rrr.className="";
                            $('.treeview').mdbTreeview();
                            $('#srh').autocomplete({minLength:3,source: $scope.ctrl.form.res.ee.map(function (x) { return {'label':x.assemblyGroupName,'value':x.assemblyGroupNodeId} })});
                            $('#srh').on("autocompleteselect", function( event, ui ) {
                                event.preventDefault();
                                srh.value=ui.item.label;
                                $(".nested").removeClass("active");
                                $(".ifas").removeClass("down");
                                var prts=$("#"+$scope.ctrl.form.res.car+"-"+ui.item.value).parents();
                                for(i=0;i<prts.length;i++){
                                    if(prts[i].className=="nested"){
                                        prts[i].setAttribute("class","nested active");
                                        prts[i].previousElementSibling.previousElementSibling.setAttribute("class","fas fa-angle-right rotate ifas down");
                                    }
                                }
                                getpcsloz($scope.ctrl.form.res.car,ui.item.value,$scope.ctrl.form.res.to,$scope.ctrl.form.data.db);
                            });
                            $timeout(function(){
                                $scope.itemx={};
                            });
                            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
});