@extends('layouts.app')

@section('pageStyle')
<!-- Data Tables -->
<link href="{{ url('public/css/plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
<link href="{{ url('public/css/plugins/dataTables/dataTables.responsive.css') }}" rel="stylesheet">
<link href="{{ url('public/css/plugins/dataTables/dataTables.tableTools.min.css') }}" rel="stylesheet">
<link href="{{ url('public/css/plugins/chosen/chosen.css') }}" rel="stylesheet">
@endsection

@section('content')

<div id="page-wrapper" class="gray-bg">        
    <!------------Content Area Start-------------------------->
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-12">
            <h2>Add New Level 3 Type</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                </li>
                <li>
                    <a href="#">Settings</a>
                </li>
                <li class="active">
                    <strong>Add New Level 3</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Add New Level 3</h5>

                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2">

                                {{ all_errors($errors) }}
                                @include('layouts.flash')

                                {{ Form::open(['url' => 'attribute/store-level', 'class' => 'form-horizontal intersection_wrapper']) }}

                                <div class="form-group">

                                    {{ Form::label('name', 'Level Name', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-lg-9">
                                        {{ Form::text('name','',['required', 'class' => 'form-control']) }}
                                    </div>
                                </div>

                                <div class="form-group">
                                    {{ Form::label('level', 'Choose HCM', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">
                                        {{ Form::select('hcm_id', ['' => 'Select HCM']+$hcms, null, ['required'=> true, 'class' => 'form-control', 'id' => 'hcm_id']) }}                                         
                                    </div>
                                </div>


                                <div class="form-group">

                                    {{ Form::label('intersection_id', 'Choose Intersection', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-sm-9">

                                        <select class="form-control m-b chosen-select" name="intersection_ids[]" id="intersection_id" multiple required>

                                        </select>

                                    </div>
                                </div>

                                <div class="form-group add_intersection">

                                    {{ Form::label('description', 'Description', ['class' => 'col-lg-3 control-label text-left']) }}

                                    <div class="col-lg-9 col-sm-12 ">
                                        {{ Form::textarea('description','',['rows' => 5, 'class' => 'form-control']) }}
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-lg-9 col-sm-12 col-lg-offset-3">
                                        {{ Form::submit('Add Level', ['class' => 'btn btn-primary']) }}
                                    </div>
                                </div>

                                {{ Form::close() }}

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">                    
                                    <div class="ibox-content">
                                        <h2>All Level 3</h2>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped dataTables-example">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Level 3</th>
                                                        <th>HCM</th>
                                                        <th>Intersection</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    @forelse($levels as $level)
                                                       
                                                        @forelse($level->hcm as $hcm)
                                                            <tr>
                                                                <td>{{ $level->id }}</td>
                                                                <td>{{ $level->name }}</td>
                                                                <td>
                                                                    <span class="label">{{ $hcm->name }}</span>
                                                                </td>
                                                                <td>
                                                                    
                                                                    @forelse($level->intersections as $intersection)
                                                                    
                                                                        @if($intersection->pivot->hcm_id == $hcm->id)
                                                                        
                                                                            <span class="label">{{ $intersection->name }}</span>
                                                                        @endif
                                                                    @empty
                                                                    
                                                                    @endforelse
                                                                </td>
                                                                <td>
                                                                    <a href="edit-level/{{ $level->id }}/{{ $hcm->id }}" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> Edit</a>
                                                                    <a href="delete-level/{{ $level->id }}/{{ $hcm->id }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Delete</a>
                                                                </td>
                                                            </tr>
                                                        @empty

                                                        @endforelse
                                                    @empty
                                                        <td>Data is not available.</td>
                                                @endforelse

                                                </tbody>
                                            </table>
                                        </div>
                                    </div> 

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

    </div>
</div>
@endsection

@section('pageScript')
<!-- Data Tables -->
<script src="{{ url('public/js/plugins/dataTables/jquery.dataTables.js') }}"></script>
<script src="{{ url('public/js/plugins/dataTables/dataTables.bootstrap.js') }}"></script>
<script src="{{ url('public/js/plugins/dataTables/dataTables.responsive.js') }}"></script>
<script src="{{ url('public/js/plugins/dataTables/dataTables.tableTools.min.js') }}"></script>
<script src="{{ url('public/js/plugins/chosen/chosen.jquery.js') }}"></script>

<style>
    .chosen-container-multi{
        width: 100% !important;
    }
</style>
<script>
$(document).ready(function () {

    var APP_URL = '