@push('style')
<style>
    .form-group {
        margin-bottom: 0 !important;
    }
    .line:nth-of-type(even) {
        background-color: #f3f3f3;
        border-radius: 2px;
        padding: 7px 0px;
    }
    .background {
        padding: 7px 0px;
    }
    .leftCol , .rightCol {
        margin-right: 2px;
        margin-left: 2px;
    }
    .leftCol .background:nth-of-type(odd) {
        background-color: #f3f3f3;
        border-radius: 2px;
    }
    .rightCol .background:nth-of-type(even) {
        background-color: #f3f3f3;
        border-radius: 2px;
    }

    #tree .list-group-item{
        background-color: #FFF;
        color: #212529;
    }

</style>
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> --}}
{{-- <link rel="stylesheet" href="{{ asset('plugins/bstreeview/css/bstreeview.min.css') }}" /> --}}
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
@endpush

@extends('app.layout')

@section('sub_content')
    
    <div class="page-header">
        <div class="page-title">
            <h4>{{__('Orders')}}</h4>

            <div class="heading">
                @can('nomenclatures_edit')
                    <a href="{{route('nomenclatures.edit', $nomenclature->id)}}" class="btn btn-primary btn-round"><i class="material-icons md-18">edit</i> <span class="d-md-inline d-none">{{__('Edit')}}</span></a>
                @endcan

                @if(!$user->isSuperAdmin())
                    @can('nomenclatures_delete')
                        <form action="{{ route('nomenclatures.destroy', $nomenclature->id) }}" method="POST" class="d-inline">
                            @method('DELETE')
                            @csrf
                            <button type="button" class="btn btn-danger btn-round deleteBtn" data-confirm-message="{{__("Are you sure you want to delete this nomenclature?")}}"><i class="material-icons md-18">delete</i> <span class="d-md-inline d-none">{{__('Delete')}}</span></button>
                        </form>
                    @endcan
                @endif

                <a href="{{route('nomenclatures.index')}}" class="btn btn-secondary btn-round"><i class="material-icons md-18">arrow_back</i> <span class="d-md-inline d-none">{{__('Back To List')}}</span></a>
            </div>
        </div>

        <div class="breadcrumb-line mx-3 mt-3">
            <div class="d-flex">
                <div class="breadcrumb">
                    <a href="{{route('home')}}" class="breadcrumb-item"><i class="material-icons mr-2">home</i> {{ __('Home') }}</a>
                    <a href="{{route('nomenclatures.index')}}" class="breadcrumb-item">{{ __('Nomenclature') }}</a>
                    <span class="breadcrumb-item active">{{ __('Show Nomenclature') }}</span>
                    <span class="breadcrumb-item active">{{ $nomenclature->libelle }}</span>
                </div>
            </div>
        </div>
    </div>
	
    <div class="content">
        @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="card bg-white">
                    <div class="card-body">
                        
                        <div class="form-group row background">
                            <h4 style="font-size: 18px;font-weight:700;margin-left:10px">{{ __('Nomenclature') }}</h4>
                        </div>

                        <div class="row">
                            <div class="col leftCol">
                                <div class="form-group row ">
                                    <div class="col-md-2" style="font-weight:600">{{ __('Article') }}</div>
                                    <div class="col-md-10">
                                        <a class="text-dark reference" href="{{route('articles.show', optional($nomenclature->article)->id)}}">
                                            {{ optional($nomenclature->article)->reference  .' - '. optional($nomenclature->article)->designation }}
                                        </a>
                                    </div>
                                </div>
                                
                            </div>
                        </div>

                        <div class="row">
                            <div class="col leftCol">
                                <div class="form-group row ">
                                    <div class="col-md-2" style="font-weight:600">{{ __('qte_fabrique') }}</div>
                                    <div class="col-md-10">{{ $nomenclature->qte_fabriquee }} {{ isset(App\Helpers\ArticleList::UNITESTOCK[$nomenclature->article->unite_stock]) ? '('.App\Helpers\ArticleList::UNITESTOCK[$nomenclature->article->unite_stock] .')': '' }}</div>
                                </div>
                                
                            </div>
                        </div>

{{--                         

                        <div class="form-group row line">
                            <div class="col-md-4 font-weight-bold">
                                {{ __('Article(s)') }}
                            </div>
                            <div class="col-md-4 font-weight-bold">
                                {{ __('Qte') }}
                            </div>
                        </div>

                        @forelse($nomenclature->composants as $composant)
                            <div class="form-group row line background">
                            
                                <div class="col-md-4">
                                    {{ optional($composant->article)->libelle }}
                                </div>
                                
                                <div class="col-md-4">
                                    {{ $composant->qte }}
                                </div>
                            </div>
                        @empty 
                            <div class="col-md-12" style=" font-weight: 700">{{__('No results found.')}}</div>
                        @endforelse  --}}
                       
                        <div class="form-group row background">
                            <h4 style="font-size: 18px;font-weight:700;margin:10px 0px 10px 10px">{{ __('Composants') }}</h4>
                        </div>
                
                        <div id="tree"></div>


                    </div>
                </div>
            </div>
        </div> 
    </div>

 

    @push('script')
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> --}}
    {{-- <script src="{{ asset('plugins/bstreeview/js/bstreeview.min.js') }}"></script> --}}
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            // $("#tree").bind("loaded.jstree", function(event, data) { 
            //     data.instance.open_all();
            // });

            // $('#tree').jstree({
            //     'core' : {
            //         'data' : <br />
<b>Notice</b>:  Undefined variable: tree in <b>C:\xampp\htdocs\gpao_prod\resources\views\app\suivi_fabrications\show.blade.php</b> on line <b>176</b><br />
null            //     },
            //     "types" : {
            //         "#" : {
            //         "max_children" : 5,
            //         "max_depth" : 20,
            //         },
            //     },
            // });

            // $('#tree').bstreeview({ 
            //     data: <br />
<b>Notice</b>:  Undefined variable: tree in <b>C:\xampp\htdocs\gpao_prod\resources\views\app\suivi_fabrications\show.blade.php</b> on line <b>187</b><br />
null,
            //     expandIcon: 'fa fa-angle-down fa-fw',
            //     collapseIcon: 'fa fa-angle-right fa-fw',
            //     indent: 1.25,
            //     parentsMarginLeft: '1.25rem',
            //     openNodeLinkOnNewTab: true,
            // });
            $('#tree').tree({
                    uiLibrary: 'bootstrap4',
                    dataSource: <br />
<b>Notice</b>:  Undefined variable: tree in <b>C:\xampp\htdocs\gpao_prod\resources\views\app\suivi_fabrications\show.blade.php</b> on line <b>196</b><br />
null,
                    primaryKey: 'data',
                    border: true,
                }).expandAll();
        });
    </script>
    @endpush

@endsection