@extends('front.layouts.app')

@section('content')
  <style>
        .banner {
            background-color: #1a6e41;
            color: white;
            padding: 20px 30px;
            text-align: left;
            line-height: 1.6;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
        }

        .banner p {
            margin: 15px 0;
            font-size: 16px;
        }

        .banner-text {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>


    <header style="background-image: url('{{ setting('image_banner_Page_Products', 'en') }}');" class="page-banner">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('Product Details') }}</h1>
            <div class="breadcrumb">
                <span class="breadcrumb-current">{{ \App\Helpers\TranslationHelper::translate('Product Details') }}</span>
                <span class="breadcrumb-separator">/</span>
                <a href="/" class="breadcrumb-link">{{ \App\Helpers\TranslationHelper::translate('Home') }}</a>
            </div>
        </div>
    </header>

<main>
<section class="prodect-deteles" style="padding: 60px 0;">
    <div class="container">
        <div class="row align-items-start" style="margin-top: 50px;">
            <div class="col-md-6">
                <img src="{{ $productZahraaAlkhair->getFirstMediaUrl('product_zahraa_alkhair') }}" alt="{{ $productZahraaAlkhair->name }}" class="product-image">
            </div>
            <div class="col-md-6 d-flex flex-column justify-content-start align-items-center">
                <div class="product-info" style="width: 100%;">
                    <h2 class="text-center" style="margin-top: 0;">
                        {{ $productZahraaAlkhair->name }}
                    </h2>
                    <p class="description" style="margin-top: -10px; text-align: start;">
                        {!! $productZahraaAlkhair->description !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>


    <section class="order-form-section mt-5 mb-5">


    <div class="container">
        <div class="card order-card shadow-lg border-0 rounded-4">
            <div class="card-body p-5">
                    @if(session('success'))
        <div class="alert alert-success mt-4">
            {{ session('success') }}
        </div>
    @endif
                <h3 class="mb-4 text-center text-primary fw-bold">
                    {{ \App\Helpers\TranslationHelper::translate('order product') }}
                </h3>

                <form action="{{ route('productZahraaAlkhair.order', $productZahraaAlkhair->id) }}" method="POST">
                    @csrf
                    <input type="hidden" name="name_product" value="{{ $productZahraaAlkhair->name }}">

                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label text-dark fw-semibold">
                                {{ \App\Helpers\TranslationHelper::translate('Name') }}
                            </label>
                            <input type="text" name="name" class="form-control rounded-3 @error('name') is-invalid @enderror"
                                value="{{ old('name') }}">
                            @error('name')
                                <div class="invalid-feedback d-block text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-dark fw-semibold">
                                {{ \App\Helpers\TranslationHelper::translate('Email') }}
                            </label>
                            <input type="email" name="email" class="form-control rounded-3 @error('email') is-invalid @enderror"
                                value="{{ old('email') }}">
                            @error('email')
                                <div class="invalid-feedback d-block text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-dark fw-semibold">
                                {{ \App\Helpers\TranslationHelper::translate('phone') }}
                            </label>
                            <input type="text" name="phone" class="form-control rounded-3 @error('phone') is-invalid @enderror"
                                value="{{ old('phone') }}">
                            @error('phone')
                                <div class="invalid-feedback d-block text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12">
                            <label class="form-label text-dark fw-semibold">
                                {{ \App\Helpers\TranslationHelper::translate('message') }}
                            </label>
                            <textarea name="message" rows="4" class="form-control rounded-3 @error('message') is-invalid @enderror">{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback d-block text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary px-5 py-2 rounded-pill fs-5">
                            {{ \App\Helpers\TranslationHelper::translate('send order') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<style>
    .order-card {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    transition: all 0.3s ease-in-out;
}
.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

</style>


</main>


@endsection
@push('js')
@endpush