@extends('layouts.app')

@section('title')
    Detail Jalur Pendakian | PRAU
@endsection

@section('content')
    <main>
        <section class="section-details-header"></section>
        <section class="section-details-content">
            <div class="container">
                <div class="row">
                    <div class="col p-0 pl-3 pl-lg-0 mt-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-4 mt-5">
                                <li class="breadcrumb-item" aria-current="page">
                                    <a href="{{ route('home') }}">
                                        Home
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    Details
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <!-- Detail Gunung -->
                <div class="row">
                    <div class="col-lg-8 pl-lg-0">
                        <div class="card card-details mb-3">
                            <h1>{{ $item->title }}</h1>
                            <p>
                                {{ $item->location }}
                            </p>
                            <div class="gallery">
                                @if ($item->galleries->count())
                                    <div class="xzoom-container">
                                        <img class="xzoom" id="xzoom-default"
                                            src="{{ asset('storage/' . $item->galleries->first()->image) }}"
                                            xoriginal="{{ asset('storage/' . $item->galleries->first()->image) }}" />
                                        <div class="xzoom-thumbs">
                                            @foreach ($item->galleries as $gallery)
                                                <a href="{{ asset('storage/' . $gallery->image) }}">
                                                    <img class="xzoom-gallery" width="128"
                                                        src="{{ asset('storage/' . $gallery->image) }}"
                                                        xpreview="{{ asset('storage/' . $gallery->image) }}" />
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <h2>Tentang Jalur</h2>
                                @foreach (explode("\n", wordwrap($item->about, 350, "\n")) as $paragraph)
                                    <p style="text-align: justify">{{ $paragraph }}</p>
                                @endforeach

                                <div class="features row pt-3">
                                    <div class="col-md-4">
                                        @if ($item->facilities1 == 'Kamar Mandi')
                                            <img src="{{ url('frontend/images/ic_toilet.png') }}" alt="Kamar Mandi"
                                                class="features-image" />
                                        @elseif($item->facilities1 == 'Tempat Istirahat')
                                            <img src="{{ url('frontend/images/ic_bed.png') }}" alt="Tempat Istirahat"
                                                class="features-image" />
                                        @elseif($item->facilities1 == 'Tempat Makan')
                                            <img src="{{ url('frontend/images/ic_food.png') }}" alt="Tempat Makan"
                                                class="features-image" />
                                        @elseif($item->facilities1 == 'Wi-Fi')
                                            <img src="{{ url('frontend/images/ic_wifi.png') }}" alt="Wi-Fi"
                                                class="features-image" />
                                        @endif
                                        <div class="description">
                                            <h3>Fasilitas 1</h3>
                                            <p>{{ $item->facilities1 }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 border-left">
                                        @if ($item->facilities2 == 'Kamar Mandi')
                                            <img src="{{ url('frontend/images/ic_toilet.png') }}" alt="Kamar Mandi"
                                                class="features-image" />
                                        @elseif($item->facilities2 == 'Tempat Istirahat')
                                            <img src="{{ url('frontend/images/ic_bed.png') }}" alt="Tempat Istirahat"
                                                class="features-image" />
                                        @elseif($item->facilities2 == 'Tempat Makan')
                                            <img src="{{ url('frontend/images/ic_food.png') }}" alt="Tempat Makan"
                                                class="features-image" />
                                        @elseif($item->facilities2 == 'Wi-Fi')
                                            <img src="{{ url('frontend/images/ic_wifi.png') }}" alt="Wi-Fi"
                                                class="features-image" />
                                        @endif
                                        <div class="description">
                                            <h3>Fasilitas 2</h3>
                                            <p>{{ $item->facilities2 }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 border-left">
                                        @if ($item->facilities3 == 'Kamar Mandi')
                                            <img src="{{ url('frontend/images/ic_toilet.png') }}" alt="Kamar Mandi"
                                                class="features-image" />
                                        @elseif($item->facilities3 == 'Tempat Istirahat')
                                            <img src="{{ url('frontend/images/ic_bed.png') }}" alt="Tempat Istirahat"
                                                class="features-image" />
                                        @elseif($item->facilities3 == 'Tempat Makan')
                                            <img src="{{ url('frontend/images/ic_food.png') }}" alt="Tempat Makan"
                                                class="features-image" />
                                        @elseif($item->facilities3 == 'Wi-Fi')
                                            <img src="{{ url('frontend/images/ic_wifi.png') }}" alt="Wi-Fi"
                                                class="features-image" />
                                        @endif
                                        <div class="description">
                                            <h3>Fasilitas 3</h3>
                                            <p>{{ $item->facilities3 }}</p>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-4">
                                        <img src="{{ url('frontend/images/ic_event.png') }}" alt=""
                                            class="features-image" />
                                        <div class="description">
                                            <h3>Fasilitas 1</h3>
                                            <p>{{ $item->facilities1 }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 border-left">
                                        <img src="frontend/images/ic_bahasa.png" alt="" class="features-image" />
                                        <div class="description">
                                            <h3>Fasilitas 2</h3>
                                            <p>{{ $item->facilities2 }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 border-left">
                                        <img src="frontend/images/ic_foods.png" alt="" class="features-image" />
                                        <div class="description">
                                            <h3>Fasilitas 3</h3>
                                            <p>{{ $item->facilities3 }}</p>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card card-details card-right">
                            <h2>Informasi Pendakian</h2>
                            <table class="trip-informations">
                                <tr>
                                    <th width="50%">Tanggal Keberangkatan</th>
                                    <td width="50%" class="text-right">{{ $currentDateTime->format('d M, Y') }}</td>
                                </tr>
                                <tr>
                                    <th width="50%">Harga Registrasi</th>
                                    <td width="50%" class="text-right">Rp{{ number_format($item->price, 0, ',', '.') }}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="join-container">
                            <form action="{{ route('daftar', $item->id) }}" method="POST">
                                @csrf
                                <button class="btn btn-block btn-join-now mt-3 py-2">
                                    Daftar Jalur {{ $item->title }}
                                </button>
                            </form>
                            {{-- <a href="checkout.html" class="btn btn-block btn-join-now mt-3 py-2">Daftar Jalur
                                {{ $item->title }}</a> --}}
                        </div>
                    </div>
                </div>
                <!-- End Detail Gunung -->

                <!-- Jenis Pelanggaran dan Ketentuan Sanksi -->
                <div class="row">
                    <div class="col-lg-20 p-3 pl-lg-0">
                        <div class="card card-details">
                            <h2 style="text-align: center; text-justify: inter-word;">
                                <b>
                                    KETENTUAN SANKSI YANG DIBERLAKUKAN ATAS PELANGGARAN YANG
                                    DILAKUKAN DI KAWASAN GUNUNG PRAU
                                    2565 MDPL
                                </b>
                                <hr />
                            </h2>
                            <div class="gallery">

                                <div class="features row pt-0">
                                    <table class="table table-bordered" width="90%" cellspacing="0">
                                        <thead>
                                            <tr align="center">
                                                <th>No</th>
                                                <th>Jenis Pelanggaran</th>
                                                <th>Ketentuan Sanksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($violations as $violation)
                                                <tr>
                                                    <td align="center">{{ $violation->id }}</td>
                                                    <td>{{ $violation->jenis_pelanggaran }}</td>
                                                    <td>{{ $violation->ketentuan_sanksi }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="2" class="text-center">Data Kosong</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                <div>
                                    <h2>NB:</h2>
                                    <div>• 1 Bibit = harga bibit + penanaman + biaya angkut = Rp20.000</div>
                                    <div>• Jika ditemukan pelanggaran akan dikenakan sanksi perorangan (semua anggota)</div>
                                    <div>• Dilarang mendirikan tenda diluar area yang sudah ditentukan</div>
                                    <br \>
                                    <p>
                                        <i>
                                            #dilarang mengambil apapun kecuali foto
                                            <br \>
                                            #dilarang membakar apapun kecuali semangat
                                            <br \>
                                            #dilarang membunuh apapun kecuali waktu
                                        </i>
                                    </p>
                                </div>
                                <br />
                                <h2 style="text-align: center" class="col">
                                    KEPUTUSAN INI MENCAKUP SELURUH JALUR PENDAKIAN PENGELOLA GUNUNG PRAU
                                </h2>
                                <h3 style="text-align: center">
                                    <b>
                                        (JALUR PENDAKIAN PATAK BANTENG, DIENG, KALILEMBU, WATES, DAN IGIRMRANAK)
                                    </b>
                                </h3>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Jenis Pelanggaran dan Ketentuan Sanksi -->
            </div>
        </section>
    </main>
@endsection

@push('prepend-style')
    <link rel="stylesheet" href="{{ url('frontend/libraries/xzoom/dist/xzoom.css') }}" />
@endpush

@push('addon-script')
    <script src="{{ url('frontend/libraries/xzoom/dist/xzoom.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.xzoom, .xzoom-gallery').xzoom({
                zoomWidth: 500,
                title: false,
                tint: '#333',
                Xoffset: 15
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.dropdown-toggle').dropdown();
        });
    </script>
@endpush