@extends('layouts.app')
@section('content')
<div class="card p-4"><div class="d-flex justify-content-between align-items-center"><h5 class="mb-0">{{ $route->name }}</h5><a class="btn btn-secondary" href="{{ route('travel-routes.edit',$route) }}">تعديل</a></div>
@php
  $citiesList = is_array($route->cities ?? null) ? $route->cities : ((isset($cities) && is_array($cities)) ? $cities : []);
@endphp
{{-- الوصف غير مطلوب في العرض --}}
<div class="mt-3">
  <div class="d-flex justify-content-between align-items-center"><h6 class="mb-0">مدن داخل المحافظة</h6><button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#addCityForm">إضافة مدينة وتسعيرة</button></div>
  <div class="collapse mt-3" id="addCityForm">
    <form method="POST" action="{{ route('travel-routes.addCity',$route) }}" class="card card-body p-3">
      @csrf
      <div class="row g-2">
        <div class="col-md-6"><label class="form-label">المدينة</label><input name="name" class="form-control" required></div>
        <div class="col-md-6"><label class="form-label">التسعيرة</label>
          <div class="input-group">
            <input name="fare" class="form-control" type="number" step="0.01" required>
            <select name="fare_currency" class="form-select" style="max-width:140px" required>
              <option value="EGP">EGP</option>
              <option value="USD">USD</option>
              <option value="SAR">SAR</option>
              <option value="EUR">EUR</option>
              <option value="AED">AED</option>
            </select>
          </div>
        </div>
      </div>
      <div class="mt-2"><button class="btn btn-success btn-sm">إضافة</button></div>
    </form>
  </div>
  <div class="table-responsive">
    <table class="table table-striped">
      <thead><tr><th>المدينة</th><th>التسعيرة</th><th>العملة</th></tr></thead>
      <tbody>
        @forelse($citiesList as $c)
          <tr><td>{{ $c['name'] ?? '—' }}</td><td>{{ $c['fare'] ?? '—' }}</td><td>{{ $c['currency'] ?? 'EGP' }}</td></tr>
        @empty
          <tr><td colspan="3" class="text-muted">لا توجد مدن مُسجلة</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>

<div class="mt-3"><a href="{{ route('travel-routes.index') }}" class="btn btn-light">رجوع</a></div>
</div>
@endsection