@extends('layouts.master', 	[
								'plugins'			=> ['datatables' => true]
							])

@section('content')
	@component('components.card_main', [
											'title' 		=> 	'Suppliers APQP Projects Overview',
											'description'	=>	"Here you can add, edit or remove APQP's projects."
										])

        @slot('body')
            <div class="d-flex justify-content-end">
                <div>
                    <div class="form-check form-check-right form-check-switchery">
                        <input type="checkbox" class="form-check-input-switchery" data-fouc>
                        <label class="form-check-label">Approved Projects</label>
                    </div>		
                </div>
            </div>
        @endslot

		@slot('after_body')
            @component('components.datatable')
                @slot('thead')
                    <tr>
                        <th>&nbsp;</th>
                        <th>Name</th>
                        <th>Phase</th>
                        <th>Part Number</th>
                        <th>Submission Level</th>
                        <th>Supplier Plant</th>
                        <th>Progress</th>
                        <th>Delivery Due</th>
                        <th>Status</th>
                        <th>Sub Plant</th>
                        <th>Plant</th>
                    </tr>
                @endslot
                @slot('tfoot')
                    <tr>
                        <td class="not-searchable">&nbsp;</td>
                        <td>Name</td>
                        <td>Phase</td>
                        <td>Part Number</td>
                        <td>Submission Level</td>
                        <td>Supplier Plant</td>
                        <td class="not-searchable">&nbsp;</td>
                        <td>Delivery Due</td>
                        <td>Status</td>
                        <td>Sub Plant</td>
                        <td>Plant</td>
                    </tr>
                @endslot
            @endcomponent       
        @endslot
    @endcomponent
    @component('components.card_main', [
											'title' 		=> 	'Chart',
											'description'	=>	"Here you can see the statistics of projects's documents."
                                        ])                                
        @slot('body')
            <div class="chart-container">
                <div class="chart has-fixed-height" id="chart" style="height: 400px;"></div>
            </div>
        @endslot
    @endcomponent

@endsection

@section('plugin-scripts')
	<script src="{{asset('js/plugins/visualization/echarts/echarts.min.js')}}"></script>
@endsection

@section('app-scripts')
    <script type="text/javascript">
        const PROJECTS = {!! $projects->toJSON() !!};
        const STORE_URL = '{{route('pp_project.store')}}';
        const ADMIN_ROLE = {!! Role::PPAP_ADMIN !!};
        const PART_NUMBERS = {!!$part_numbers->toJSON()!!};
        const FILTER = '{{$filter}}';
        const USER = Katcon.authUser;
	</script>
	<script src="{{mix('js/ppap/project/overview.js')}}"></script>
@endsection