@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 Intersection Type</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="dashboard.html">Home</a>
                </li>
                <li>
                    <a href="all_level3.html">Settings</a>
                </li>
                <li class="active">
                    <strong>Add Intersection Type</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-content">
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2">

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

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

                                <div class="form-group">

                                    {{ Form::label('name', 'Intersection 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 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">

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

                                    <div class="col-sm-9">
                                        {{ Form::select('hcm_ids[]', $hcms, null, ['data-placeholder' => 'Select HCM', 'class' => 'chosen-select', 'multiple' => true, 'required'=> true, 'tabindex' =>  '4', 'style' => 'width: 100%']) }}                                         
                                    </div>
                                </div>

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

                                {{ Form::close() }}

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

                                @forelse($intersections as $intersection)

                                <tr>
                                    <td>{{ $intersection->id }}</td>
                                    <td>{{ $intersection->name }}</td>
                                    <td>
                                        @foreach($intersection->hcms as $hcm)
                                        <span class="label">{{ $hcm->name }}</span>
                                        @endforeach
                                    </td>
                                    <td>
                                        <a href="edit-intersection/{{ $intersection->id }}" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> Edit</a>
                                        <a href="delete-intersection/{{ $intersection->id }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Delete</a>
                                    </td>
                                </tr>

                                @empty
                            <td>No data is available.</td>
                            @endforelse

                            </tbody>
                        </table>
                    </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 = '