@extends('layout.front')

@section('css_page_level')
<link href="{{ asset('/assets/global/plugins/fancybox/source/jquery.fancybox.css') }}" rel="stylesheet" type="text/css"/>

@endsection
@section('page-content')
            <!-- CONTENT -->
			<meta name="csrf-token" content="{{ csrf_token() }}">
            <div class="wrap-fluid" id="paper-bg">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="box">
                            <div class="box-header">
                                <!-- tools box -->
                                <div class="pull-right box-tools">
                                </div>
                                <h3 class="box-title"><i class="fontello-doc"></i> 
                                    <span>@lang('messages.2hand_stuff')</span>
                                </h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body" align="center">
                                <div class="thumbnail">
                                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
                                      <!-- Indicators -->
                                      <ol class="carousel-indicators">
                                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					<li data-target="#carousel-example-generic" data-slide-to="3"></li>
					<li data-target="#carousel-example-generic" data-slide-to="4"></li>

                                      </ol>

                                      <!-- Wrapper for slides -->
                                      <div class="carousel-inner" role="listbox">
                                        @if($secondhand->image1 != '')
                                        <div class="item active">
                                          <img src="{{$secondhand->image1}}" style="height:50%;" alt="...">
                                          <div class="carousel-caption">
                                          </div>
                                        </div>
                                        @endif
                                        @if($secondhand->image2 != '')
                                        <div class="item">
                                          <img src="{{$secondhand->image2}}" style="height:50%;" alt="...">
                                          <div class="carousel-caption">
                                          </div>
                                        </div>
                                        @endif
                                        @if($secondhand->image3 != '')
                                        <div class="item">
                                          <img src="{{$secondhand->image3}}" style="height:50%;" alt="...">
                                          <div class="carousel-caption">
                                          </div>
                                        </div>
                                        @endif
                                        @if($secondhand->image4 != '')
                                        <div class="item">
                                          <img src="{{$secondhand->image4}}" style="height:50%;" alt="...">
                                          <div class="carousel-caption">
                                          </div>
                                        </div>
                                        @endif
                                        @if($secondhand->image5 != '')
                                        <div class="item">
                                          <img src="{{$secondhand->image5}}" style="height:50%;" alt="...">
                                          <div class="carousel-caption">
                                          </div>
                                        </div>
                                        @endif
                                      </div>

                                      <!-- Controls -->
                                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                      </a>
                                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                      </a>
                                    </div>
                                    <div class="caption-full">
                                        <h2 class="pull-right" style="margin-top:10px;margin-bottom:20px;"><span class="label label-primary">${{ $secondhand->price }}</span></h2>
                                        <h4><a href="#">{{ $secondhand->title }}</a>
                                        </h4>
                                        <div class="row">
                                            <div class="col-md-8" style="table-layout: fixed;word-wrap: break-word;overflow: hidden;  ">
                                                {!! $secondhand->content !!}
                                            </div>
                                            <div class="col-md-4 pull-left">
                                                <a class="btn btn-app">
                                                    <span class="badge bg-aqua">12</span>
                                                    <i class="fa fontello-thumbs-up-1"></i> @lang('messages.likeit')
                                                </a>
                                                <a onclick="pruduct_buy()" class="btn btn-app">
													<span class="badge bg-aqua">12</span>
                                                    <i class="fa fontello-basket"></i> @lang('messages.wannabuy')
                                                </a>
<!--
                                                <a class="btn btn-app">
                                                    {{-- <span class="badge bg-aqua">12</span> --}}
                                                    <i class="fa fontello-pencil"></i> @lang('messages.publishhh_')
                                                </a>
-->
                                                <div class="panel panel-default">
                                                  <div class="panel-heading">
                                                    <h3 class="panel-title">@lang('messages.the_pro_info')</h3>
                                                  </div>
                                                  <table class="table">
                                                    <tr>
                                                        <td>@lang('messages.product_name')</td><td>{{ $secondhand->product_name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.product_type')</td><td>{{ $secondhand->product_type }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.contactz')</td><td>{{ $secondhand->contact }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Email</td><td>{{ $secondhand->contact_email }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.mobile')</td><td>{{ $secondhand->contact_phone }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.permanent_tel')</td><td>{{ $secondhand->contact_tel }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.pick_up_addr')</td><td>{{ $secondhand->get_address }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.pick_up_time')</td><td>{{ $secondhand->get_time }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>@lang('messages.deli_way')</td><td>{{ $secondhand->get_method }}</td>
                                                    </tr>
                                                  </table>
                                                </div>
                                                
                                            </div>
                                        </div>
                                        
                                    </div>
                                    {{-- <div class="ratings">
                                        <p class="pull-right">3 reviews</p>
                                        <p>
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star-empty"></span>
                                            4.0 stars
                                        </p>
                                    </div> --}}
                                </div>
                                <div class="well">
                                @lang('messages.product_img')
                                </div>
                                <div class="panel panel-default">
									@inject('setting','anlutro\LaravelSettings\Facade')
                                    <div class="panel-heading">@lang('messages.map_info')</div>
									<div style="border:1px solid #dcdcde; margin-top:10px; width:800px;height:400px;" id="map_canvas"></div>
                                    <div class="panel-body">Google Map</div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>


            </div>
			
            <!-- #/paper bg -->
@endsection

@section('plugins_page_level')
<script type="text/javascript" src="{{ asset('assets/global/plugins/fancybox/source/jquery.fancybox.pack.js') }}"></script>
<script src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=AIzaSyBwO048p23eWOsmHbPU4H0uUEIm2TEXaCU" type="text/javascript"></script>
<script type="text/javascript">
//want to buy product 
function pruduct_buy() {
    var data = prompt("請留下聯絡方式 (電話 或是 E-Mail)", "");
	var id = {{$secondhand->id}};
    if (data != null) {
        $.ajax({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				type:"POST",
                dataType:'text',
                url: '{{action('FrontController@secondhand_buy')}}',
                data: {
					data:data,
					id,id
				},
				
                success: function(){
                    alert('發送訊息成功！！ 請靜候佳音');
                },

                 error:function(){ 
                    alert('訊息發送失敗，請聯繫工作人員進行處理'); 
                 }
            });
    }
}

//Google map
	var cm_baseIcon = new GIcon();
	cm_baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	cm_baseIcon.iconSize = new GSize(34, 34);
	cm_baseIcon.shadowSize = new GSize(37, 34);
	cm_baseIcon.iconAnchor = new GPoint(9, 34);
	cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
	cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
		    map.setMapType(G_NORMAL_MAP);
        map.addControl(new GSmallZoomControl());
        map.addControl(new GMenuMapTypeControl());
        map.setCenter(new GLatLng(121.6,24.9), 13);
        geocoder = new GClientGeocoder();
      }
    }

    function showAddress(address) {
		var markerOpts = {};
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
            } else {
				/*var nIcon = new GIcon(cm_baseIcon);
				nIcon.image ="images/home.png";
				markerOpts.icon = nIcon;*/
				markerOpts.title=address;

        map.setCenter(point);
              var marker = new GMarker(point,markerOpts);
			  marker.openInfoWindowHtml("<strong>...</strong><br />"+address);
			  GEvent.addListener(marker, "click", function() {
							   marker.openInfoWindowHtml("<strong></strong>...<br />"+address);
							  });
              map.addOverlay(marker);


            }
          }
        );
      }
    }
		window.onload=function(){
		   initialize();
		   showAddress("");
		   }

//send message to seller

</script>
@endsection

@section('js_page_level')
@endsection