@extends('layouts.bistro')


@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-stol-postavljen-proslava.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">Rezervacija</h2>
                    <p>Rezervirajte svoj stol</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Reservation Form Section -->
<section id="order-form" class="padding">
    <div class="container">

        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="heading">Rezervirajte stol</h2>
                <hr class="heading_space">
            </div>
        </div>

        <div class="row">

            {{-- Info kolona --}}
            <div class="col-md-4">
                <div class="reservation-info-box">

                    <div class="reservation-info-item">
                        <div class="reservation-info-icon"><i class="fa fa-clock-o"></i></div>
                        <div>
                            <h5>Radno vrijeme</h5>
                            <p>Ponedjeljak – Nedjelja<br>08:00 – 23:00</p>
                        </div>
                    </div>

                    <div class="reservation-info-item">
                        <div class="reservation-info-icon"><i class="fa fa-phone"></i></div>
                        <div>
                            <h5>Rezervacije telefonom</h5>
                            <p><a href="tel:+38531611072">+385 31 611 072</a></p>
                        </div>
                    </div>

                    <div class="reservation-info-item">
                        <div class="reservation-info-icon"><i class="fa fa-map-marker"></i></div>
                        <div>
                            <h5>Adresa</h5>
                            <p>Ulica Svetog Leopolda Bogdana Mandića 172/A<br>31000 Osijek</p>
                        </div>
                    </div>

                    <div class="reservation-info-item">
                        <div class="reservation-info-icon"><i class="fa fa-info-circle"></i></div>
                        <div>
                            <h5>Napomena</h5>
                            <p>Rezervacije primamo za isti dan najkasnije do 21:00. Za grupe veće od 20 osoba molimo da nas kontaktirate telefonom.</p>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Forma kolona --}}
            <div class="col-md-8">
                <livewire:reservation-form />
            </div>

        </div>
    </div>
</section>

@push('styles')
<style>
.reservation-info-box {
    background: #f9f6f2;
    border-left: 4px solid #e25111;
    border-radius: 4px;
    padding: 30px 25px;
    height: 100%;
}
.reservation-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 28px;
}
.reservation-info-item:last-child {
    margin-bottom: 0;
}
.reservation-info-icon {
    width: 42px;
    height: 42px;
    background: #e25111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 17px;
}
.reservation-info-item h5 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #222;
    margin: 0 0 5px 0;
}
.reservation-info-item p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}
.reservation-info-item a {
    color: #e25111;
    font-weight: 600;
}
</style>
@endpush

@endsection