<?php


Route::isJs(function(){
    ob_start();
    ?>
      <div class="form-group avs">
            <label style="display:block" class="control-label">Country</label>
            <select class="form-control avs" ng-model="cnt">
                <option ng-repeat="elm in list" value="{{elm.countryCode}}">{{elm.countryName}}</option>
            </select>
      </div>
    <?php
    $code=ob_get_clean();
    ?>
    <script>
        app.directive('countries', [function () {
            return {
                restrict: 'EA',
                transclude : false,
                replace : false,
                template : <?= json_encode(preg_replace("/\t|\n|\r/i", "", $code)) ?>,
                scope : {
                    cnt : "=?"
                },
                controller : function($scope){
                    $scope.list = [];
                    $scope.loadData = function(){
                        $scope.loading = true;
                        api("getCountries",{},function(list){
                            $scope.list = list;
                            $scope.cnt = "TN";
                            $scope.$apply();
                        });
                    }
                    $scope.loadData();
                },
                link: function (scope, iElement, iAttrs) {
                    
                }
            };
        }]);
    </script>
    <?php
});

db_table::createView("vin", "VIN");
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="getvin" on-reset="" on-success="" on-end="" ng-model="ctrl.form">
                    <div class="col-xs-12" style="padding: 0;">
                        <countries cnt="ctrl.form.data.country"></countries>
                    </div>
                    <div class="row" style="width: 100%;margin: 0;padding: 0;">
                        <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}" required name="vin" ng-model="ctrl.form.data.vin" placeholder="VIN">
                            </div>
                        </div>
                        <div class="col-xs-12" style="padding: 0;">
                            <button class="btn btn-primary" type="submit">Valider</button>
                        </div>
                    </div>
                </w-form>
                <label ng-if="ctrl.form.res.imma" style="display:block;margin-top:10px" class="control-label">Immatricule :<h4><a style="cursor: pointer" ng-click="ijk(ctrl.form.res.imma)">{{ctrl.form.res.imma}}</a></h4></label>
                <label ng-if="ctrl.form.res.dmc" style="display:block;" class="control-label">DMC :<h4>{{ctrl.form.res.dmc}}</h4></label>
            </div>
        </div>
        <div style="padding: 15px;flex:1;display: flex;">
            <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%;">
                    <md-tabs md-dynamic-height md-border-bottom>
                        <md-tab ng-if="ctrl.form.res.tecall2.matchingManufacturers.array[0]" label="TecAlliance">
                            <div ng-repeat="model in ctrl.form.res.tecall2.matchingModels.array">
                                <h2>{{model.modelName}}</h2>
                                <table class="table table-striped table-bordered" style="background: #fff;">
                                    <tr>
                                        <th>Model</th>
                                        <th>Vehicle</th>
                                        <th>Details</th>
                                    </tr>
                                    <tr ng-repeat="item in ctrl.form.res.tecall2.matchingVehicles.array | filter : {modelId : model.modelId}">
                                        <td>{{model.modelName}}</td>
                                        <td>{{item.carName}}</td>
                                        <td>
                                            <button class="btn btn-xs" ng-click="detailDialog.item = item;detailDialog.show()">
                                                {{item.carId}} <span class="glyphicon glyphicon-list"></span>
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </md-tab>
                        <md-tab ng-if="ctrl.form.res.vinx[0]" label="ServiceBox">
                            <h2>{{ctrl.form.res.vinx[0].brandName}}</h2>
                            <table class="table table-striped table-bordered" style="background: #fff;">
                                <tr>
                                    <th>Véhicule</th>
                                    <th>Détails</th>
                                </tr>
                                <tr ng-repeat="item in ctrl.form.res.vinx">
                                    <td>{{item.fullName}}</td>
                                    <td style="width:1px">
                                        <button class="btn btn-xs" ng-click="tabDialog.item = item;tabDialog.show()">
                                            <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </md-tab>
                        <md-tab ng-if="ctrl.form.res.partsouq.data[0]" label="Partsouq">
                            <h2>{{ctrl.form.res.partsouq.data[0].brand}}</h2>
                            <table class="table table-striped table-bordered" ng-repeat="item in ctrl.form.res.partsouq.data">
                                <tr ng-repeat="(key, value) in item"><th style="width:1px">{{key}}</th><td ng-bind-html="value"></td></tr>
                            </table>
                        </md-tab>
                        <md-tab ng-if="ctrl.form.res.vindv" label="VinDV">
                            <table class="table table-striped table-bordered">
                                <tr ng-repeat="(key, value) in ctrl.form.res.vindv">
                                    <th style="width:1px">{{key}}</th>
                                    <td ng-if="key=='carId'">
                                        <button class="btn btn-xs" ng-click="detailDialog.item.carName = ctrl.form.res.vindv.vehicleModelSeriesName;detailDialog.item.carId=value;detailDialog.show();">
                                            {{value}} <span class="glyphicon glyphicon-list"></span>
                                        </button>
                                    </td>
                                    <td ng-if="key!='carId'">{{value}}</td>
                                </tr>
                            </table>
                        </md-tab>
                    </md-tabs>
                </div>
            </div>
        </div>
        <dialog ng-model="detailDialog" titre="Détail : {{detailDialog.item.carName}} " btn-fermer="true" width="fit-content">
            <listcar car-id="{{detailDialog.item.carId}}" country="{{ctrl.form.data.country}}"></listcar>
        </dialog>
        <dialog ng-model="tabDialog" titre="Véhicule : {{tabDialog.item.fullName}} " btn-fermer="true" width="fit-content">
            <table class="table table-striped table-bordered" style="background: #fff;">
                <tr ng-repeat="(key, value) in tabDialog.item"><th style="width:1px">{{key}}</th><td ng-if="key=='id'"><a style="cursor: pointer" ng-click="detailDialog.item.carName = tabDialog.item.fullName;detailDialog.item.carId=value;detailDialog.show();">{{value}}</a></td><td ng-if="key!='id'">{{value}}</td></tr>
            </table>
        </dialog>
        <dialog ng-model="immDialog" titre="Immatricule : {{immDialog.id}} " btn-fermer="true" width="fit-content">
            <immlist piece-id="{{immDialog.id}}"></immlist>
        </dialog>
    </div>
    <?php
    $code = ob_get_clean();
    ?>
    <script>
        app.directive('vin', [function() {
            return {
                restrict: 'EA',
                transclude: false,
                replace: false,
                template: <?= json_encode(preg_replace("/\t|\n|\r/i", "", $code)) ?>,
                scope: {},
                controller: function($scope,$sce) {
                    $scope.form = {};
                    $scope.ijk = (i) => {
                        var ll=document.getElementsByTagName('immlist').length;
                        if(ll>0){
                            $scope.immDialog.id = i;
                            $scope.immDialog.show();
                            angular.element(document.getElementsByTagName('immlist')[ll-1]).scope().$$childTail.wwc(i);
                        }
                    };
                },
                link: function(scope, iElement, iAttrs) {}
            };
        }]);
    </script>
<?php
});