@extends('layouts.master')
@section('css')
    <link rel="stylesheet" href="{{asset('stylesheets/service.css')}}">
@stop
@section('content')
<div id="page">
        <div id="main" class="service">
            <section id="service_item">
                <div class="container">
                    <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
                        @foreach($service as $key=> $services)
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {{($key==0)?"active":"" }}" id="#service{{ $services->id }}" data-toggle="tab" href="#service{{ $services->id }}" role="tab"
                                aria-controls="service{{ $services->id }}" aria-selected="true"><span>{{ $services->title }}</span></a>
                        </li>
                        @endforeach
                    </ul>
                    <div class="tab-content  container_bg" id="myTabContent">
                        @foreach($service as $key=> $services)
                        <div class="tab-pane fade show  {{($key==0)?"active":"" }}" id="service{{ $services->id }}" role="tabpanel" aria-labelledby="#service{{ $services->id }}">
                            <img src="{{ asset('upload/'.$services->img) }}">
                        </div>
                        @endforeach
                       
                    </div>
                </div>
            </section>
            <section id="booking">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xl-6 offset-xl-1 col-lg-7">
                            <img src="{{ asset('upload/'.$contact->business_hours_image) }}">
                        </div>
                        <div class="col-xl-4 col-lg-5 text-center">
                            <h2 class="title">網路掛號</h2>
                            <img src="{{ asset('upload/'.$contact->appointment_image) }}">
                            <a href="{{ route('reservation') }}" class="btn btn-primary">前往掛號</a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@stop