@extends('frontend::layouts.master')

@push('styles')
    <link href="{{ asset('modules/frontend/plugins/product-script/product-style.css') }}" rel="stylesheet">
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 max-w-5xl">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">{{ __('frontend::lang.label.search_results') }}</h1>
        <p class="text-base text-gray-600">
            {{ __('frontend::lang.label.search_results_desc') }}
        </p>
    </div>

    <livewire:frontend::page.search search="{{ $q ?? '' }}" />
    <x-frontend::modalline :line="$page_init['contact']['social']['line']['url'] ?? ''" />
@endsection

@push('scripts')
    <script src="{{ asset('modules/frontend/plugins/product-script/product-script.js') }}"></script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('toastMessageSuccess', (e) => {
                toastr.success(e[0] ?? '');
            });
            Livewire.on('toastMessageError', (e) => {
                toastr.error(e[0] ?? '');
            });
        });
    </script>
@endpush