@extends('layouts.app')

@php

$title = __('boat.title', ['category' => $boat['translations'][0]['description']])
@endphp

@section('title', $title)

@section('content')
<main class="page-wrapper">
    <div class="container">
        <div class="row mt-7">
            <div class="col-md-5 mb-5 mb-md-0">

                <div class="card card-element-hover overflow-hidden">
                    <img src="{{$boat['image']}}" class="rounded-3" alt="">
                </div>

            </div>
            <div class="col-md-7 ps-md-6">
                <div class="badge text-bg-dark mb-3">{{ __('boat.condition') }} : {{ __('boat.' . $boat['condition']) }}
                </div>
                <h1 class="h2 mb-4">{{ $title }}</h1>
                @if ($boat['condition'] !== 'used')
                <h4 class="text-primary mb-4">{{ __('boat.price') }}</h4>
                @endif

                <div class="d-flex align-items-center gap-1 gap-sm-3 flex-wrap mt-2 mb-4">
                    <span class="d-block">{{ __('boat.range') }}: </span>
                    @foreach ($boat['ranges'] as $range)
                    <label class="btn btn-sm btn-light border btn-primary-soft-check mb-0" for="btnradio1">{{ __('navigation.' . $range['name']) }}</label>
                    @endforeach
                </div>
                <p class="mb-4">{{ __('boat.description', [
                        'description' => $boat['translations'][0]['description'],
                        'dimension_types' => count($boat['dimensions'])  ?? __('boat.unknown'),
                        'weight_range' => $boat['dimensions'][0]['weight_range']  ??  __('boat.unknown')
                    ]) }}</p>

                <div class="d-grid">
                    <a href="#devis" class="btn btn-primary mb-3 w-100"><i class="bi bi-arrow-right me-2"></i>{{ __('boat.get_quote') }}</a>
                </div>
            </div>
        </div>
        <section class="container pb-5 pt-md-2 pt-lg-4 pt-xl-5">
            <h2 class="h1 mb-5">{{ __('boat.specifications') }}</h2>
            <div class="row pb-md-2 pb-lg-4 pb-xl-5 mb-xxl-2">
                <div class="col-12">
                    <div class="table-responsive border-top mb-0">
                        <table class="table align-middle">
                            <tbody>
                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.weight')  }}</th>
                                    <td class="pe-0">
                                        <ul class="list-unstyled mb-0">
                                            @if (!$boat['ranges'])
                                            <li>{{__('boat.unknown')}} </li>
                                            @endif
                                            <li></li>
                                            @foreach ($boat['ranges'] as $range)
                                            <li>
                                                <span class="d-inline-block">{{ __('navigation.' . $range['name']) }} :
                                                    {{ $range['weight'] }} kg</span>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </td>
                                </tr>

                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.material') }}</th>
                                    <td class="pe-0">
                                        <span class="d-inline-block my-4 py-1">
                                            @if (isset($boat['translations'][0]))
                                            {{ $boat['translations'][0]['base'] }}
                                            @endif
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.flat_board') }}</th>
                                    <td class="pe-0">
                                        @if (isset($boat['translations'][0]))
                                        <span class="d-inline-block my-4 py-1">{{ $boat['translations'][0]['flat_board'] }}</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.hull') }}</th>
                                    <td class="pe-0">
                                        @if (isset($boat['translations'][0]))
                                        <span class="d-inline-block my-4 py-1">{{ $boat['translations'][0]['base'] }}</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.construction_type') }}</th>
                                    <td class="pe-0">
                                        @if (isset($boat['translations'][0]))
                                        <span class="d-inline-block my-4 py-1">{{ $boat['translations'][0]['construction_type'] }}</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th scope="row" class="ps-0 h5">{{ __('boat.dimensions') }}</th>
                                    <td class="pe-0">
                                        <div class="d-inline-block my-4 py-1">
                                            <ul class="list-unstyled mb-0">
                                                @if (!$boat['dimensions'])
                                                <li>{{__('boat.unknown')}} </li>
                                                @endif
                                                @foreach ($boat['dimensions'] as $dimension)
                                                <li>{{ __('boat.dimension_detail', [
                                                        'weight_range' => $dimension['weight_range'],
                                                        'mold_number' => $dimension['mold_number'],
                                                        'length_cm' => $dimension['length_cm']
                                                    ]) }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
        <section class="position-relative pt-2 pt-lg-0 pb-5 mb-5" id="devis">
            <div class="container position-relative zindex-5 pb-2 pb-md-4 pb-lg-5">
                <div class="row justify-content-center text-center pt-xl-2 pb-4 mb-1 mb-lg-3">
                    <hr class="mb-5 pb-5">
                    <div class="col-xl-6 col-lg-7 col-md-8 col-sm-11">
                        <h2 class="mb-4">{{ __('boat.contact_form_title') }}</h2>
                        <p class="text-muted mb-0">{{ __('boat.contact_form_description') }}</p>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-md-10">
                        <form class="row needs-validation" action="{{ route('contact.store') }}" method="POST" id="form-contact">
                            @csrf
                            <input type="hidden" name="g-recaptcha-response">
                            <div class="col-sm-6 mb-4">
                                <label for="ln" class="form-label">{{ __('boat.name') }}</label>
                                <input type="text" id="ln" name="name" class="form-control" required>
                                <div class="invalid-feedback">{{ __('boat.validation_name') }}</div>
                            </div>
                            <div class="col-sm-6 mb-4">
                                <label for="email" class="form-label">{{ __('boat.email') }}</label>
                                <input type="email" id="email" name="email" class="form-control" required>
                                <div class="invalid-feedback">{{ __('boat.validation_email') }}</div>
                            </div>
                            <div class="col-sm-6 mb-4">
                                <label for="phone" class="form-label">{{ __('boat.phone') }}</label>
                                <input type="text" id="phone" name="phone" class="form-control" required>
                                <div class="invalid-feedback">{{ __('boat.validation_phone') }}</div>
                            </div>
                            <div class="col-12 mb-4">
                                <label for="message" class="form-label">{{ __('boat.message') }}</label>
                                <textarea id="message" name="message" class="form-control" rows="4" required>{{ __('boat.message_placeholder', ['title' => $title]) }}</textarea>
                                <div class="invalid-feedback">{{ __('boat.validation_message') }}</div>
                            </div>
                            <input type="hidden" name="type" value="Demande de devis pour {{ $boat['translations'][0]['description'] }}">
                            <div class="col-12 text-center pt-2 pt-md-3 pt-lg-4">
                                <button class="g-recaptcha btn btn-primary shadow-primary btn-lg" data-sitekey="{{ config('services.recaptcha.site_key') }}" data-callback='onSubmit' data-action='send_mail'>{{ __('boat.send') }}</button>
                                <script>
                                    function onSubmit(token) {
                                        document.getElementById("form-contact").submit();
                                    }
                                </script>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>
@endsection