<?php
db_table::createView("piece", "PIECE");
Route::isJs(function () {
    ob_start();
?>
    <div style="background: rgba(255,255,255,0.7);flex:1;display: flex;">
        <div style="padding: 15px;width: 220px;display: flex;align-items: center;justify-content: flex-start;background: #fff;flex-direction: column;">
            <div ng-cloak>
                <w-form api="getpiece" on-reset="" on-success="" on-end="submt()" ng-model="ctrl.form">
                    <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>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">PIECE</label>
                                <input type="text" class="form-control avs" required name="piece" ng-model="ctrl.form.data.piece" placeholder="PIECE">
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">RECHERCHE PAR</label>
                                <select class="form-control avs" ng-model="ctrl.form.data.search">
                                    <option value="">Tout</option>
                                    <option value="0">Référence</option>
                                    <option value="1">OE Number</option>
                                    <option value="6">Code-barres</option>
                                    <option value="Id">legacyArticleId</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">MARQUE</label>
                                <select class="form-control avs" ng-model="ctrl.form.data.marque">
                                    <option value="">Tout</option>
                                    <option ng-repeat="elm in ctrl.form.res.tecall2.dataSupplierFacets.counts | orderBy:'mfrName'" value="{{elm.dataSupplierId}}¤{{elm.mfrName}}">{{elm.mfrName}} ({{elm.count}})</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <div class="form-group avs">
                                <label style="display:block" class="control-label">GROUPE</label>
                                <select class="form-control avs" ng-model="ctrl.form.data.groupe">
                                    <option value="">Tout</option>
                                    <option ng-repeat="elm in ctrl.form.res.tecall2.genericArticleFacets.counts | orderBy:'genericArticleDescription'" value="{{elm.genericArticleId}}¤{{elm.genericArticleDescription}}">{{elm.genericArticleDescription}} ({{elm.count}})</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                    </div>
                </w-form>
            </div>
        </div>
        <div style="padding: 15px;flex:1;display: flex;overflow-x: auto;">
            <div ng-cloak style="display: flex;width: 100%;align-items: flex-start;flex:1;justify-content: flex-start;flex-direction: column;">
                <div ng-show="form.loading" style="display: flex;align-items: center;justify-content: center;flex:1;width: 100%;">
                    <b>Recherche en cours, veuillez patienter ...</b>
                </div>
                <div ng-hide="form.loading" style="width: 100%;">
                            <table ng-if="ctrl.form.res.tecall2.articles.length>0||tab" 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 ctrl.form.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>
            </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="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>
    <?php
    $code = ob_get_clean();
    ?>
    <script>
        app.directive('piece', [function() {
            return {
                restrict: 'EA',
                transclude: false,
                replace: false,
                template: <?= json_encode(preg_replace("/\t|\n|\r/i", "", $code)) ?>,
                scope: {},
                controller: function($scope) {
                    $scope.tab=false;
                    $scope.form = {};
                    $scope.ctrl = $scope;
                    $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 () {
                        $scope.tab=true;
                        if(tabsrctc!=null) {tabsrctc.clear();tabsrctc.draw();tabsrctc.destroy();}
                        setTimeout(() => {
                            tabsrctc=$('#srctc').DataTable({"order": []});
                        }, 500);
                    };
                },
                link: function(scope, iElement, iAttrs) {}
            };
        }]);
    </script>
<?php
});