@extends('user.layouts.index')
@section('content')
<div class="container-fluid">
    <div class="side-body">
        <div class="row">
            <div class="col-xs-12">
            @if ($errors->any())            
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    
                    @foreach ($errors->all() as $error)             
                        {!! $error !!}<br>              
                    @endforeach
                </div>
            @endif
            </div>
            <div class="col-xs-12">
                <a href="#" data-toggle="modal" data-target="#modal-map" class="btn btn-default">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                    Upload Map
                </a>
                <center>
                    <img class="img-responsive" src="{{ asset('images/facility_map/sector.png') }}" usemap="#image-map">
                </center>
                <map name="image-map">
                    @foreach($facilitymap as $key => $value)
                    <area data-toggle="modal" alt="{{ $value->name }}" title="{{ $value->name }}" href="#{{ $value->id }}" coords="{{ $value->coords }}" shape="{{ $value->shape }}">  
                    <div id="{{ $value->id }}" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                    
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                
                            </div>
                            <div class="modal-body">
                            @if($value->image == "")
                            <img src="{{ asset('images/default.png') }}" alt=" " class="img-responsive">
                            @else
                            <img src="{{ asset('images/facility_map/'.$value->image) }}" alt=" " class="img-responsive">
                            @endif
                            <h5>{{ $value->name }}</h5>
                            <p>{{ $value->description }}</p>                            
                            
                            @if(!empty ($value->facility_id))
                                <hr>
                                @foreach ($value->facility->facilitydetail as $facilitydetails )
                                <img src="{{ asset('images/facility_detail/'.$facilitydetails->image) }}" alt=" " class="img-responsive">                                
                                <h5>{{ $facilitydetails->title }}</h5>
                                @endforeach
                            @endif

                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    
                        </div>
                    </div>
                    @endforeach
                </map> 
            </div>    
        </div>
        <div class="page-title">
            <span class="title"></span>
            <div class="description"></div>
            {{--<a href="{{ url('user/facilitymap/create') }}" class="btn btn-default">
                <i class="glyphicon glyphicon-plus-sign"></i> Tambah Facility Map
            </a>--}}

            <a href="#" data-toggle="modal" data-target="#modal-facility-map" class="btn btn-default">
                <i class="glyphicon glyphicon-plus-sign"></i>
                Tambah Facility Map
            </a>
        </div>
            
        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <!--<div class="card-header">s
                        <div class="card-title">
                            <div class="title">
                                
                            </div>
                        </div>
                    </div>-->
                    <div class="card-body">
                    <div class="sub-title">Facility Map</div>
                        <table class="datatable table table-striped" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Lihat</th>
                                </tr>
                            </thead>
                            <tbody>
                            
                            @foreach($facilitymap as $key => $value)
                                <tr>
                                    <td width="5%">{{ $no++ }}</td>
                                    <td width="80%">{{ $value->name }}</td>
                                    <td width="10%">
                                        {{--<a href="{{ url('user/facilitymap/'.$value->id) }}" class="btn btn-default">
                                            <i class="glyphicon glyphicon-folder-open"></i>
                                        </a>--}}      
                                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="modal" data-target="#modal-detail-facility-map{{ $value->id }}">
                                            <i class="glyphicon glyphicon-search"></i>
                                        </a>
                                        <a href="{{ url('user/facilitymap/'.$value->id) }}" class="btn btn-default">
                                            <i class="glyphicon glyphicon-folder-open"></i>
                                        </a>                                                                     
                                    </td>
                                </tr>
                                
                                <!-- Modal Detail Facility Map -->
                                <div class="modal fade" id="modal-detail-facility-map{{ $value->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel">Detail Facility Map</h4>
                                            </div>
                                            <div class="modal-body">                                                            
                                                <div class="card">
                                                    <!--<div class="card-header">
                                                        <div class="card-title">
                                                            <div class="title"></div>
                                                        </div>
                                                    </div>-->
                                                    <div class="card-body">

                                                        <div class="sub-title">{{ $value->name}} </div>
                                                        <div>                                                         
                                                            @if($value->image === "")
                                                                <img class="img-responsive" width="450" height="253.13" src="{{ asset('images/default.png') }}" alt="">    
                                                            @else
                                                                
                                                                <img class="img-responsive" width="450" height="253.13" src="{{ asset('images/facility_map/'.$value->image) }}" alt="">  
                                                               
                                                            @endif
                                                        </div>

                                                        <div class="sub-title">Koordinat</div>
                                                        <div>                                                         
                                                            {{ $value->coords}} 
                                                        </div>

                                                        <div class="sub-title">Deskripsi</div>
                                                        <div>                                                         
                                                            {{ $value->description}} 
                                                        </div>

                                                    </div>
                                                </div>                                                   
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach    
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Facility Map -->
<div class="modal fade" id="modal-facility-map" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Tambah Facility Map</h4>
            </div>
            <div class="modal-body">
                            
                {!! Form::open(
                    array(
                      'url' => 'user/facilitymap',
                      'class' =>'form-horizontal',
                    )
                ) !!}

                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Nama</label>
                        <div class="col-sm-8">
                            <input name="name" value="{{ old('name') }}" type="text" class="form-control" id="name" placeholder="ex: Persada Hospital">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-2 control-label">Deskripsi</label>
                        <div class="col-sm-8">
                            <textarea name="description" type="text" class="form-control" id="description" placeholder="">{{ old('description') }}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="coords" class="col-sm-2 control-label">Koordinat Point</label>
                        <div class="col-sm-8">
                            <input name="coords" value="{{ old('coords') }}" type="text" class="form-control" id="coords" placeholder="ex: 123,123,6">
                        </div>
                    </div>
            
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Simpan</button>         
                            <button type="reset" class="btn btn-default">Reset</button>
                            <a href="{{ url('user/facilitymap') }}" class="btn btn-default">Kembali</a>
                        </div>
                    </div>
                
                {!! Form::close() !!}
                    
                
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>

<!-- Modal Map -->
<div class="modal fade" id="modal-map" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Upload Map</h4>
            </div>
            <div class="modal-body">
                            
                    {!! Form::open(
                            array(
                                'url' => 'user/facilitymap/map/',
                                'files' => true                    
                            )
                        ) 
                    !!}
                        
                        <img class="img-responsive" width="120" height="120" src="{{ asset('images/facility_map/sector.png') }}" alt="">                      
                        
                        <br>
                        <input name="image" type="file" id="image">
                                        

                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                        <button type="submit" class="btn btn-primary">Yes</button>

                    {!! Form::close() !!}
                    
                
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</div>
@endsection