@extends('layouts.bistro')

@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-sala-proslave-elegantna.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">{{ $reservation->name }}</h2>
                    <p>{{ $reservation->date->locale('hr')->isoFormat('dddd, D. MMMM YYYY.') }} u {{ $reservation->time->format('H:i') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Reservation Confirmation Section -->
<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="rc-outer">

                @if(session('success'))
                <div class="rc-flash rc-flash-success">
                    <i class="fa fa-check-circle rc-flash-icon"></i>
                    <p>{{ session('success') }}</p>
                </div>
                @endif

                @if(session('info'))
                <div class="rc-flash rc-flash-info">
                    <i class="fa fa-info-circle rc-flash-icon"></i>
                    <p>{{ session('info') }}</p>
                </div>
                @endif

                <!-- Reservation Details Card -->
                <div class="rc-card">

                    <!-- Status Badge -->
                    <div class="rc-status-wrap">
                        @if($reservation->isConfirmed())
                            <span class="rc-badge rc-badge-confirmed">
                                <i class="fa fa-check-circle"></i> POTVRĐENO
                            </span>
                        @elseif($reservation->status === 'cancelled')
                            <span class="rc-badge rc-badge-cancelled">
                                <i class="fa fa-times-circle"></i> OTKAZANO
                            </span>
                        @else
                            <span class="rc-badge rc-badge-pending">
                                <i class="fa fa-clock-o"></i> NA ČEKANJU
                            </span>
                        @endif
                    </div>

                    <h3 class="rc-card-title">Detalji rezervacije</h3>

                    <div class="rc-details">
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-user"></i> Ime i prezime</span>
                            <span class="rc-detail-value">{{ $reservation->name }}</span>
                        </div>
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-phone"></i> Telefon</span>
                            <span class="rc-detail-value"><a href="tel:{{ $reservation->phone }}">{{ $reservation->phone }}</a></span>
                        </div>
                        @if($reservation->email)
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-envelope"></i> Email</span>
                            <span class="rc-detail-value">{{ $reservation->email }}</span>
                        </div>
                        @endif
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-calendar"></i> Datum</span>
                            <span class="rc-detail-value">{{ $reservation->date->format('d.m.Y') }} ({{ $reservation->date->locale('hr')->isoFormat('dddd') }})</span>
                        </div>
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-clock-o"></i> Vrijeme</span>
                            <span class="rc-detail-value">{{ $reservation->time->format('H:i') }}</span>
                        </div>
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-users"></i> Broj osoba</span>
                            <span class="rc-detail-value">{{ $reservation->people }}</span>
                        </div>
                        @if($reservation->note)
                        <div class="rc-detail-row">
                            <span class="rc-detail-label"><i class="fa fa-comment"></i> Napomena</span>
                            <span class="rc-detail-value">{{ $reservation->note }}</span>
                        </div>
                        @endif
                    </div>

                    <!-- Action Buttons -->
                    @if(!$reservation->isConfirmed() && $reservation->status !== 'cancelled')
                    <div class="rc-actions">
                        <form action="{{ route('reservation.confirm', ['token' => $reservation->confirmation_token]) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn-common rc-btn-confirm">
                                <i class="fa fa-check"></i> Potvrdi rezervaciju
                            </button>
                        </form>
                        <form action="{{ route('reservation.cancel', ['token' => $reservation->confirmation_token]) }}" method="POST"
                              onsubmit="return confirm('Jeste li sigurni da želite otkazati rezervaciju?');">
                            @csrf
                            <button type="submit" class="btn-common rc-btn-cancel">
                                <i class="fa fa-times"></i> Otkaži rezervaciju
                            </button>
                        </form>
                    </div>
                    @endif

                    @if($reservation->isConfirmed())
                    <div class="rc-confirmed-note">
                        <i class="fa fa-heart"></i>
                        Vidimo se <strong>{{ $reservation->date->format('d.m.Y') }}</strong> u <strong>{{ $reservation->time->format('H:i') }}</strong>!
                        <br><small>Za promjene kontaktirajte nas na <a href="tel:+38531611072">+385 31 611 072</a></small>
                    </div>
                    @endif

                </div>

                <!-- Contact + Back -->
                <div class="rc-footer">
                    <div class="rc-footer-contact">
                        <a href="tel:+38531611072"><i class="fa fa-phone"></i> +385 31 611 072</a>
                        <a href="mailto:info@krcma-petric.com"><i class="fa fa-envelope"></i> info@krcma-petric.com</a>
                    </div>
                    <a href="{{ route('home') }}" class="rc-back-link">
                        <i class="fa fa-arrow-left"></i> Povratak na početnu
                    </a>
                </div>

                </div><!-- /.rc-outer -->
            </div>
        </div>
    </div>
</section>

@push('styles')
<style>
/* Outer centering wrapper */
.rc-outer {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Flash messages */
.rc-flash {
    text-align: center;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
}
.rc-flash p { margin: 0; font-size: 16px; font-weight: 500; }
.rc-flash-icon { font-size: 40px; display: block; margin-bottom: 10px; }
.rc-flash-success { background: #eafaf1; border: 1px solid #a3e4bc; color: #1e7e4f; }
.rc-flash-success .rc-flash-icon { color: #27ae60; }
.rc-flash-info { background: #eaf4fb; border: 1px solid #a9d4f0; color: #1a6fa0; }
.rc-flash-info .rc-flash-icon { color: #2980b9; }

/* Card */
.rc-card {
    background: #fff;
    border: 2px solid #e25111;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Status badge */
.rc-status-wrap { text-align: center; margin-bottom: 25px; }
.rc-badge {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}
.rc-badge-confirmed { background: #27ae60; }
.rc-badge-cancelled { background: #c0392b; }
.rc-badge-pending   { background: #e67e22; }

/* Card title */
.rc-card-title {
    text-align: center;
    color: #e25111;
    font-size: 20px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0ebe4;
}

/* Details */
.rc-details { margin-bottom: 25px; }
.rc-detail-row {
    display: flex;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid #f5f0ea;
    gap: 15px;
}
.rc-detail-row:last-child { border-bottom: none; }
.rc-detail-label {
    min-width: 150px;
    font-weight: 600;
    font-size: 13px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.rc-detail-label i { color: #e25111; margin-right: 8px; width: 14px; }
.rc-detail-value {
    font-size: 15px;
    color: #222;
}
.rc-detail-value a { color: #333; }

/* Action buttons */
.rc-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}
.rc-btn-confirm { background: #27ae60 !important; min-width: 200px; }
.rc-btn-confirm:hover { background: #1e8449 !important; }
.rc-btn-cancel  { background: #c0392b !important; min-width: 200px; }
.rc-btn-cancel:hover  { background: #922b21 !important; }

/* Confirmed note */
.rc-confirmed-note {
    margin-top: 25px;
    padding: 20px;
    background: #fef9f5;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    color: #333;
    border: 1px solid #f5dbc9;
    overflow-wrap: break-word;
    word-break: break-word;
}
.rc-confirmed-note i { color: #e25111; margin-right: 5px; }
.rc-confirmed-note a { color: #e25111; font-weight: 600; }
.rc-confirmed-note small { font-size: 13px; color: #888; }

/* Footer */
.rc-footer {
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.rc-footer-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.rc-footer-contact a {
    color: #e25111;
    font-weight: 600;
    font-size: 15px;
}
.rc-footer-contact a i { margin-right: 6px; }
.rc-back-link {
    font-size: 14px;
    color: #999;
    text-decoration: none;
}
.rc-back-link:hover { color: #e25111; }
.rc-back-link i { margin-right: 5px; }

@media (max-width: 991px) {
    .col-md-8.offset-md-2 {
        width: 100%;
        margin-left: 0;
    }
    .rc-card { padding: 25px 15px; }
    .rc-detail-row { flex-direction: column; gap: 4px; align-items: center; text-align: center; }
    .rc-detail-label { min-width: auto; }
    .rc-detail-value { text-align: center; }
    .rc-footer { flex-direction: column; align-items: center; text-align: center; }
    .rc-footer-contact { flex-direction: column; align-items: center; gap: 10px; }
}
</style>
@endpush

@endsection