@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="حجز أونلاين">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>حجز أونلاين</span>
    </div>
  </section>

  <!-- BOOKING -->
  <section class="booking-section">
    <div class="container">
      @if(session('success'))
        <div class="alert alert-success" style="background: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-bottom: 20px; text-align: center;">
          {{ session('success') }}
        </div>
      @endif

      <div class="booking-header fade-in">
        <h2>حجز أونلاين</h2>
        <p class="price">سعر الحجز : 1000 جنية</p>
        <a href="#booking-form" class="btn" style="margin-top:15px;">احجز الان</a>
      </div>

      <div class="booking-content">
        <div class="contact-form fade-in-right" id="booking-form">
          <h2>قم بحجز موعد عن طريق ملء النموذج</h2>
          <form action="{{ route('site.book-appointment.submit') }}" method="POST">
            @csrf
            <div class="form-row">
              <div class="form-group">
                <label>الاسم الاول <span class="required">*</span></label>
                <input type="text" name="first_name" required>
              </div>
              <div class="form-group">
                <label>الاسم الاخير <span class="required">*</span></label>
                <input type="text" name="last_name" required>
              </div>
            </div>
            <div class="form-group">
              <label>الهاتف <span class="required">*</span></label>
              <input type="tel" name="phone" placeholder="رقم الهاتف" required>
            </div>
            <div class="form-group">
              <label>اختر العياده <span class="required">*</span></label>
              <select name="clinic" required>
              <option value="" disabled selected>اختر العياده</option>
              <option value="201508289510">عياده القاهره</option>
              <option value="201110498199">عياده طنطا</option>
              </select>
            </div>
            <button type="submit" class="btn btn-gold" style="width:100%;justify-content:center;margin-top:10px;">تأكيد
              الحجز</button>
          </form>
        </div>

        <div class="invoice-card fade-in-left">
          <h3>طلبك</h3>
          <table class="invoice-table">
            <thead>
              <tr>
                <th>المنتجات</th>
                <th>الكمية</th>
                <th>السعر</th>
                <th>اجمالي</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>حجز موعد</td>
                <td>1</td>
                <td>1000 EGP</td>
                <td>1000 EGP</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="3"><strong>اجمالي السعر</strong></td>
                <td><strong>1000 EGP</strong></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </section>
@endsection