@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">
@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>All HCM</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                </li>
                <li>
                    <a href="{{ url('attribute/all-hcms') }}">Settings</a>
                </li>
                <li class="active">
                    <strong>{{ $title }}</strong>
                </li>
            </ol>

            @if($title == 'Trashed HCM')
            <a href="{{ url('attribute/all-hcms') }}" class="btn btn-primary pull-right"> All HCMs</a>
            @else
            <a href="{{ url('attribute/trashed-hcms') }}" class="btn btn-primary pull-right"><i class="fa fa-trash"></i> Trashed HCMs</a>
            @endif

        </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">

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

                        <table class="table table-bordered table-striped dataTables-example">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>HCM</th>
                                    <th>Intersection Type</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach($hcms as $hcm)
                                <tr>
                                    <th scope="row">{{ $hcm->id }}</th>
                                    <td>{{ $hcm->name }}</td>
                                    <td>
                                        @forelse($hcm->intersections as $intersection)

                                        <span class="label">{{ $intersection->name }}</span>

                                        @empty

                                        @endforelse
                                    </td>
                                    <td>
                                        @if($title === 'Trashed HCM')
                                        <a href="{{ url('attribute/restore-hcm', [$hcm->id]) }}" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i> Restore</a>
                                        @else
                                        <button data-user-id="{{ $hcm->id }}" type="button" class="btn btn-primary btn-xs hcm_details"><i class="fa fa-edit"></i> Edit</button>
                                        <a href="delete-hcm/{{ $hcm->id }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Delete</a>
                                        @endif

                                    </td>

                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div> 
                    <nav aria-label="Page navigation" class="pull-right">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!------------hcm Modal----------------->
<div class="modal inmodal" id="hcmEdit" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h6 class="modal-title text-left">Edit HCM</h6>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">

                        {{ Form::open(['url' => '', 'method' => 'patch', 'class' => 'form-horizontal intersection_wrapper', 'id' => 'edit-form']) }}

                        <div class="hcm">

                            <div class="form-group">

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

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

                            <div class="form-group add_intersection">
                                {{ Form::label('description', 'Description', ['class' => 'col-lg-3 col-sm-12 control-label text-left']) }}
                                <div class="col-lg-9 col-sm-12 ">
                                    {{ Form::textarea('description','',['rows' => 5, 'class' => 'form-control', 'id' => 'description']) }}
                                </div>
                            </div>

                            <!--                            <div class="form-group add_intersection">
                                <label class="col-lg-3 col-sm-12 control-label text-left">Choose Intersection Type:</label>
                                <div class="col-sm-9">
                                    <div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i>Signalized</label></div>
                                    <div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i>unsignalized</label></div>
                                    <div class="i-checks"><label> <input type="checkbox" value=""> <i></i>TWSC</label></div>
                                    <div class="i-checks"><label> <input type="checkbox" value=""> <i></i>AWSC</label></div>
                                    <div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i>Roundabout</label></div>
                                </div>
                            </div>-->

                            <div class="form-group">
                                <div class="col-lg-9 col-sm-12 col-lg-offset-3">
                                    {{ Form::submit('Update', ['class' => 'btn btn-primary']) }}
                                </div>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </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>
$(document).ready(function () {

    var APP_URL = '