625 lines
11 KiB
PHP
625 lines
11 KiB
PHP
<style>
|
|
|
|
.flight-detail-page{
|
|
padding:80px 0;
|
|
background:
|
|
linear-gradient(135deg,#eef5ff,#f9fbff);
|
|
direction:rtl;
|
|
}
|
|
|
|
|
|
/* کارت اصلی */
|
|
.flight-detail-card{
|
|
|
|
background:rgba(255,255,255,.85);
|
|
backdrop-filter:blur(15px);
|
|
|
|
border-radius:35px;
|
|
|
|
overflow:hidden;
|
|
|
|
display:flex;
|
|
|
|
box-shadow:
|
|
0 25px 70px rgba(0,0,0,.12);
|
|
|
|
transition:.4s;
|
|
}
|
|
|
|
|
|
.flight-detail-card:hover{
|
|
|
|
transform:translateY(-8px);
|
|
|
|
box-shadow:
|
|
0 35px 90px rgba(25,118,210,.25);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* تصویر */
|
|
|
|
.flight-detail-image{
|
|
|
|
width:42%;
|
|
min-height:600px;
|
|
|
|
position:relative;
|
|
|
|
}
|
|
|
|
|
|
.flight-detail-image:after{
|
|
|
|
content:"";
|
|
|
|
position:absolute;
|
|
|
|
inset:0;
|
|
|
|
background:
|
|
linear-gradient(
|
|
180deg,
|
|
transparent,
|
|
rgba(0,0,0,.35)
|
|
);
|
|
|
|
}
|
|
|
|
|
|
.flight-detail-image img{
|
|
|
|
width:100%;
|
|
height:100%;
|
|
|
|
object-fit:cover;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* محتوا */
|
|
|
|
.flight-detail-content{
|
|
|
|
width:58%;
|
|
|
|
padding:55px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-detail-content h1{
|
|
|
|
font-size:38px;
|
|
|
|
font-weight:900;
|
|
|
|
color:#102a43;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* badge */
|
|
|
|
.flight-badge-show{
|
|
|
|
background:
|
|
linear-gradient(135deg,#1976d2,#42a5f5);
|
|
|
|
color:white;
|
|
|
|
padding:10px 30px;
|
|
|
|
border-radius:50px;
|
|
|
|
font-weight:bold;
|
|
|
|
box-shadow:
|
|
0 10px 25px rgba(25,118,210,.35);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* مسیر */
|
|
|
|
|
|
.route-box{
|
|
|
|
|
|
margin:40px 0;
|
|
|
|
padding:35px;
|
|
|
|
border-radius:25px;
|
|
|
|
background:#fff;
|
|
|
|
display:flex;
|
|
|
|
justify-content:space-around;
|
|
|
|
align-items:center;
|
|
|
|
|
|
box-shadow:
|
|
inset 0 0 20px rgba(0,0,0,.04);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.route-box small{
|
|
|
|
color:#90a4ae;
|
|
|
|
font-size:14px;
|
|
|
|
}
|
|
|
|
|
|
.route-box strong{
|
|
|
|
display:block;
|
|
|
|
margin-top:8px;
|
|
|
|
font-size:28px;
|
|
|
|
color:#102a43;
|
|
|
|
}
|
|
|
|
|
|
|
|
.route-line{
|
|
|
|
font-size:45px;
|
|
|
|
color:#f4b400;
|
|
|
|
animation:fly 2s infinite alternate;
|
|
|
|
}
|
|
|
|
|
|
@keyframes fly{
|
|
|
|
from{
|
|
transform:translateX(-10px);
|
|
}
|
|
|
|
to{
|
|
transform:translateX(10px);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* اطلاعات */
|
|
|
|
.flight-info-grid{
|
|
|
|
|
|
display:grid;
|
|
|
|
grid-template-columns:repeat(2,1fr);
|
|
|
|
gap:20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-info-grid div{
|
|
|
|
background:#fff;
|
|
|
|
padding:22px;
|
|
|
|
border-radius:20px;
|
|
|
|
border:1px solid #edf2f7;
|
|
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
|
|
.flight-info-grid div:hover{
|
|
|
|
transform:translateY(-5px);
|
|
|
|
box-shadow:
|
|
0 15px 35px rgba(0,0,0,.08);
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-info-grid span{
|
|
|
|
color:#78909c;
|
|
|
|
font-size:14px;
|
|
|
|
}
|
|
|
|
|
|
.flight-info-grid b,
|
|
.flight-info-grid strong{
|
|
|
|
display:block;
|
|
|
|
margin-top:10px;
|
|
|
|
color:#102a43;
|
|
|
|
font-size:20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* فرم کامنت */
|
|
|
|
|
|
.flight-comments{
|
|
|
|
|
|
margin-top:45px;
|
|
|
|
background:#fff;
|
|
|
|
padding:35px;
|
|
|
|
border-radius:30px;
|
|
|
|
box-shadow:
|
|
0 15px 40px rgba(0,0,0,.08);
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-comments h3{
|
|
|
|
font-weight:900;
|
|
|
|
color:#102a43;
|
|
|
|
margin-bottom:25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-comments textarea{
|
|
|
|
|
|
border-radius:20px;
|
|
|
|
border:2px solid #edf2f7;
|
|
|
|
padding:20px;
|
|
|
|
resize:none;
|
|
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
|
|
.flight-comments textarea:focus{
|
|
|
|
border-color:#1976d2;
|
|
|
|
box-shadow:
|
|
0 0 0 5px rgba(25,118,210,.12);
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-comments button{
|
|
|
|
|
|
width:100%;
|
|
|
|
padding:16px;
|
|
|
|
border-radius:20px;
|
|
|
|
border:none;
|
|
|
|
font-weight:800;
|
|
|
|
font-size:18px;
|
|
|
|
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
#1976d2,
|
|
#42a5f5
|
|
);
|
|
|
|
|
|
box-shadow:
|
|
0 15px 30px rgba(25,118,210,.35);
|
|
|
|
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flight-comments button:hover{
|
|
|
|
transform:translateY(-4px);
|
|
|
|
}
|
|
|
|
|
|
/* موبایل */
|
|
|
|
@media(max-width:900px){
|
|
|
|
.flight-detail-card{
|
|
|
|
flex-direction:column;
|
|
|
|
}
|
|
|
|
|
|
.flight-detail-image,
|
|
.flight-detail-content{
|
|
|
|
width:100%;
|
|
|
|
}
|
|
|
|
|
|
.flight-detail-image{
|
|
|
|
height:300px;
|
|
|
|
}
|
|
|
|
|
|
.flight-detail-content{
|
|
|
|
padding:30px;
|
|
|
|
}
|
|
|
|
|
|
.flight-info-grid{
|
|
|
|
grid-template-columns:1fr;
|
|
|
|
}
|
|
|
|
|
|
.route-box{
|
|
|
|
flex-direction:column;
|
|
|
|
gap:25px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<section class="flight-detail-page">
|
|
<div class="container">
|
|
|
|
<div class="flight-detail-card">
|
|
|
|
<div class="flight-detail-image">
|
|
<img src="{{ asset($flight->image) }}"
|
|
alt="{{ $flight->airline }}">
|
|
</div>
|
|
|
|
<div class="flight-detail-content">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1>{{ $flight->airline }}</h1>
|
|
|
|
<span class="flight-badge-show">
|
|
پرواز
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="route-box">
|
|
|
|
<div>
|
|
<small>مبدا</small>
|
|
<strong>{{ $flight->origin }}</strong>
|
|
</div>
|
|
|
|
|
|
<div class="route-line">
|
|
✈
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<small>مقصد</small>
|
|
<strong>{{ $flight->destination }}</strong>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flight-info-grid">
|
|
|
|
<div>
|
|
<span>کلاس پرواز</span>
|
|
<b>{{ $flight->flight_class }}</b>
|
|
</div>
|
|
|
|
<div>
|
|
<span>ظرفیت</span>
|
|
<b>{{ $flight->capacity }} نفر</b>
|
|
</div>
|
|
|
|
<div>
|
|
<span>تاریخ حرکت</span>
|
|
<b>{{ $flight->departure_date->toJalali()->format('Y/m/d') }}</b>
|
|
</div>
|
|
|
|
<div>
|
|
<span>قیمت</span>
|
|
<b>{{ number_format($flight->price) }} تومان</b>
|
|
</div>
|
|
<div class="mt-4">
|
|
|
|
@auth
|
|
<form action="{{ route('users.reservations.store') }}" method="POST">
|
|
|
|
@csrf
|
|
|
|
<input type="hidden" name="reservable_id" value="{{ $flight->id }}">
|
|
|
|
<input type="hidden" name="reservable_type" value="App\Models\Flight">
|
|
|
|
<input type="hidden" name="price" value="{{ $flight->price }}">
|
|
|
|
|
|
<button type="submit" class="btn btn-success">
|
|
رزرو تور
|
|
</button>
|
|
|
|
</form> @else
|
|
|
|
<a href="{{ route('auth.login.index') }}" class="btn btn-warning btn-lg px-5">
|
|
برای رزرو وارد شوید
|
|
</a>
|
|
|
|
@endauth
|
|
|
|
</div>
|
|
|
|
<div>
|
|
<span>تعداد مشاهده</span>
|
|
|
|
<strong>
|
|
{{ $flight->views ?? 0 }}
|
|
بازدید
|
|
</strong>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="flight-comments mt-5">
|
|
|
|
<h3>
|
|
ثبت نظر درباره این پرواز
|
|
</h3>
|
|
|
|
<form action="{{ route('users.comments.store') }}" method="POST">
|
|
|
|
@csrf
|
|
|
|
<input
|
|
type="hidden"
|
|
name="flight_id"
|
|
value="{{ $flight->id }}"
|
|
>
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="rating">
|
|
امتیاز
|
|
</label>
|
|
|
|
<select name="rating" id="rating" class="form-control">
|
|
|
|
<option value="5">★★★★★</option>
|
|
<option value="4">★★★★</option>
|
|
<option value="3">★★★</option>
|
|
<option value="2">★★</option>
|
|
<option value="1">★</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="comment">
|
|
نظر شما
|
|
</label>
|
|
|
|
<textarea
|
|
name="comment"
|
|
id="comment"
|
|
rows="5"
|
|
class="form-control"
|
|
placeholder="نظر خود را درباره این پرواز بنویسید..."
|
|
></textarea>
|
|
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">
|
|
ثبت نظر
|
|
</button>
|
|
|
|
</form>
|
|
<div class="comments-list mt-5">
|
|
|
|
<h3 class="mb-4">
|
|
نظرات کاربران
|
|
</h3>
|
|
|
|
@forelse($comments as $comment)
|
|
|
|
<div class="card p-4 mb-3 shadow-sm">
|
|
|
|
<div class="d-flex justify-content-between">
|
|
|
|
<strong>
|
|
{{ $comment->user->name }}
|
|
</strong>
|
|
|
|
<small>
|
|
{{ $comment->created_at->diffForHumans() }}
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<p class="mt-3 mb-0">
|
|
{{ $comment->comment }}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
@empty
|
|
|
|
<div class="alert alert-secondary">
|
|
هنوز نظری ثبت نشده است.
|
|
</div>
|
|
|
|
@endforelse
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|