@extends('website.layouts.app')

@section('title','Reservasi')


{{-- ================= SUBHEADER / HERO ================= --}}
@section('hero')
    <div id="Subheader" style="padding:200px 0 120px;"></div>
@endsection


@section('content')

<style>
    /* === RESERVATION FORM FIX === */
.reservation-form label {
    display:block;
    font-weight:600;
    margin-bottom:6px;
    color:#555;
}

.reservation-form input,
.reservation-form select,
.reservation-form textarea {
    width:100% !important;
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid #e0e0e0;
    border-radius:6px;
    font-size:15px;
}

/* Two column fix */
.reservation-form .column.one-second {
    width:48%;
    margin-right:4%;
}

.reservation-form .column.one-second:nth-child(even) {
    margin-right:0;
}

/* Mobile */
@media (max-width: 768px) {
    .reservation-form .column.one-second {
        width:100%;
        margin-right:0;
    }
}

</style>

<div class="section mcb-section" style="padding:60px 0 80px;">
    <div class="section_wrapper mcb-section-inner">

        <div class="wrap mcb-wrap one valign-top clearfix">
            <div class="mcb-wrap-inner">

                <div class="column mcb-column one column_column">
                    <div class="column_attr clearfix">

                        <div class="container">
                            <h1 class="align_center">Reservasi Janji Temu</h1>
                            <p class="align_center" style="margin-top:10px;">
                                Silakan isi formulir berikut untuk membuat janji temu dengan Bidan Dewi.
                            </p>
                        </div>

                        {{-- ===== CARD FORM ===== --}}
                        <div style="
                            /* max-width:700px;
                            margin:0 auto;
                            background:#ffffff;
                            padding:40px 35px;
                            border-radius:12px;
                            box-shadow:0 10px 30px rgba(0,0,0,0.05); */
                        ">

                            {{-- SUCCESS ALERT --}}
                            @if(session('success'))
                                <div style="
                                    background:#e7f9f0;
                                    color:#0f5132;
                                    padding:12px 18px;
                                    border-radius:8px;
                                    margin-bottom:25px;
                                    text-align:center;
                                ">
                                    <strong>Berhasil!</strong>
                                    {{ session('success') }}
                                </div>
                            @endif

                            <form method="POST" action="{{ route('reservation.submit') }}" class="reservation-form">
                                @csrf

                                <div class="row">

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Nama Lengkap *</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <input type="text" name="name" required>
                                        </div>
                                    </div>

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Phone *</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <input type="text" name="phone" required>
                                        </div>
                                    </div>


                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Email (opsional)</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <input type="email" name="email">
                                        </div>
                                    </div>

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Pilih Layanan *</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <select name="service_id" required>
                                                <option value="">-- Pilih Layanan --</option>
                                                @foreach($services as $s)
                                                    <option value="{{ $s->id }}">{{ $s->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- <div class="column one">
                                        <label>Pilih Bidan (opsional)</label>
                                        <select name="midwife_id">
                                            <option value="">-- Pilih Bidan --</option>
                                            @foreach($midwives as $m)
                                                <option value="{{ $m->id }}">{{ $m->name }}</option>
                                            @endforeach
                                        </select>
                                    </div> --}}

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Tanggal *</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <input type="date" name="appointment_date" required>
                                        </div>

                                    </div>

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Jam *</label>
                                        </div>
                                        <div class="column three-fourth">
                                             <input type="time" name="appointment_time" required>
                                        </div>
                                    </div>

                                    <div class="column one reservation-row">
                                        <div class="column one-fourth">
                                            <label>Catatan (opsional)</label>
                                        </div>
                                        <div class="column three-fourth">
                                            <textarea name="note" rows="4"></textarea>
                                        </div>
                                    </div>

                                    <div class="column one align_center">
                                        <input type="submit"
                                               value="Kirim Reservasi"
                                               style="
                                                background:#00d9a5;
                                                color:#fff;
                                                padding:12px 35px;
                                                border-radius:6px;
                                                font-weight:600;
                                                border:none;
                                                cursor:pointer;
                                               ">
                                    </div>

                                </div>
                            </form>

                        </div>
                        {{-- END CARD --}}

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection