@extends('front.layouts.app')

@section('content')
    <style>
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;
        }

        .left-column {
            flex: 1;
            min-width: 300px;
        }

        .right-column {
            flex: 0 0 300px;
        }

        .warehouse-image {
            width: 100%;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .customs-info {
            font-size: 14px;
            color: #555;
            margin-bottom: 30px;
        }

        .customs-info p {
            margin-bottom: 15px;
        }

        .numbered-point {
            margin-top: 20px;
            font-weight: 500;
        }

        .services-card,
        .contact-card {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .card-title {
            color: #1d6246;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .service-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .service-icon {
            color: #1d6246;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .service-text {
            font-size: 14px;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
        }

        .contact-form textarea {
            height: 100px;
            resize: vertical;
        }

        .send-button {
            background-color: #1d6246;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            width: 100%;
            text-transform: uppercase;
        }

        .send-button:hover {
            background-color: #164a35;
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .right-column {
                flex: 1;
                width: 100%;
            }
        }
    </style>
    <header style="background-image: url('{{ setting('image_banner_services', 'en') }}');" class="page-banner">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">{{ \App\Helpers\TranslationHelper::translate('Details Services') }}</h1>
            <div class="breadcrumb">
                <span class="breadcrumb-current">{{ $service->name }}</span>
                <span class="breadcrumb-separator">/</span>
                <a href="/" class="breadcrumb-link">{{ \App\Helpers\TranslationHelper::translate('Home') }}</a>
            </div>
        </div>
    </header>


    <div class="container">
        <div class="main-content">
            <div class="left-column">
                <img src="{{ $service->getFirstMediaUrl('products') }}" alt="Team" class="w-100">

                <div class="customs-info">
                    <h2>{{ $service->name }}</h2>
                    <p>{!! $service->description !!}</p>
                </div>
            </div>

            <div class="right-column">
                <div class="services-card">
                    <h3 class="card-title">{{ \App\Helpers\TranslationHelper::translate('Latest Services') }}</h3>

                    @foreach ($services as $service)
                        <a href="{{ route('service.details', $service->id) }}">
                            <div class="service-item">
                                <div class="service-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="m9 12 2 2 4-4"></path>
                                    </svg>
                                </div>
                                <div class="service-text">{{ $service->name }}</div>
                            </div>
                        </a>
                    @endforeach

                    <div class="contact-card">
                        <h3 class="card-title">{{ \App\Helpers\TranslationHelper::translate('Need Help') }}</h3>

                        @if (session('success'))
                            <div class="alert alert-success" id="success-message">
                                {{ session('success') }}
                            </div>
                        @endif

                        <form class="contact-form" action="{{ route('create_message') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                @error('name')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="text" name="name" placeholder="{{ \App\Helpers\TranslationHelper::translate('Full Name') }}" value="{{ old('name') }}"
                                    required>
                            </div>

                            <div class="form-group">
                                @error('phone')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="tel" name="phone" placeholder="{{ \App\Helpers\TranslationHelper::translate('Phone Number') }}" value="{{ old('phone') }}"
                                    required>
                            </div>

                            <div class="form-group">
                                @error('email')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <input type="email" name="email" placeholder="{{ \App\Helpers\TranslationHelper::translate('Email Address') }}"
                                    value="{{ old('email') }}" required>
                            </div>

                            <div class="form-group">
                                @error('message')
                                    <div class="text-danger mb-1">{{ $message }}</div>
                                @enderror
                                <textarea name="message" placeholder="{{ \App\Helpers\TranslationHelper::translate('Message...') }}" required>{{ old('message') }}</textarea>
                            </div>

                            <button type="submit"
                                class="send-button">{{ \App\Helpers\TranslationHelper::translate('Send') }}</button>
                        </form>
                    </div>



                </div>
            </div>
        </div>
    @endsection

    @push('js')
        <script>
            setTimeout(function() {
                var message = document.getElementById('success-message');
                if (message) {
                    message.style.transition = "opacity 0.5s ease";
                    message.style.opacity = 0;
                    setTimeout(function() {
                        message.remove();
                    }, 500);
                }
            }, 5000);
        </script>
    @endpush