@extends('layouts.previews.ibis')

@php
    $item = [];
    if (!empty($elements) && $project->notFoundPage->status != \App\Enums\ProjectSectionStatus::INVALID) {
        $item = array_merge($item, $elements[0]);
    }
    $imagePc = $imageSp = setImagePreview($project->logo);
    if (fieldPropertyValue('background_image', $item)) {
        $imagePc = setImagePreview(fieldPropertyValue('background_image', $item));
    }
    if (fieldPropertyValue('background_image_sp', $item)) {
        $imageSp = setImagePreview(fieldPropertyValue('background_image_sp', $item));
    }
@endphp

@section('content')
    <div class="error-page flex center-align center-justify relative pc-flex" id="page-not-found">
        <div class="error-warning flex center-align error-content">
        <div class="error-warning__icon"><img src="https://assets.micado-rayout.jp/img/common/error_ic_triangle.png" alt=""></div>
        <div class="error-warning__code">404</div>
        </div>
        <div class="error-notification error-content">
            @if (textLocale('title', $item, $lang))
                <div class="notification-txt-26">{!! setTextDefault(textLocale('title', $item, $lang)) !!}</div>
            @else
                <div class="notification-txt-26" data-i18n="not_found.title"></div>
            @endif
            @if (textLocale('body', $item, $lang))
                <div class="notification-txt-16">{!! setTextDefault(textLocale('body', $item, $lang)) !!}</div>
            @else
                <div class="notification-txt-16" data-i18n="not_found.content"></div>
            @endif
        </div>
        <div class="error-line error-content between-justify flex">
        <div class="error-line__left relative"></div>
        <div class="error-line__right relative"></div>
        </div>
        <div class="error-btn error-content flex">
            <a class="error-btn__item flex center-align relative" onclick="history.back()" href="javascript:;">{!! config('translate.' . $lang . '.not_found.btn_go_back') !!}</a>
            <a class="error-btn__item flex center-align relative" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, '') !!}">{!! config('translate.' . $lang . '.not_found.btn_go_top_page') !!}</a>
        </div>
    </div>

    <div class="error-page flex center-align center-justify relative sp-flex" id="page-not-found">
        <div class="error-warning flex center-align error-content">
        <div class="error-warning__icon"><img src="https://assets.micado-rayout.jp/img/common/error_ic_triangle.png" alt=""></div>
        <div class="error-warning__code">404</div>
        </div>
        <div class="error-notification error-content">
            @if (textLocale('title_sp', $item, $lang))
                <div class="notification-txt-26">{!! setTextDefault(textLocale('title_sp', $item, $lang)) !!}</div>
            @else
                <div class="notification-txt-26" data-i18n="not_found.title"></div>
            @endif
            @if (textLocale('body_sp', $item, $lang))
                <div class="notification-txt-16">{!! setTextDefault(textLocale('body_sp', $item, $lang)) !!}</div>
            @else
                <div class="notification-txt-16" data-i18n="not_found.content"></div>
            @endif
        </div>
        <div class="error-line error-content between-justify flex">
        <div class="error-line__left relative"></div>
        <div class="error-line__right relative"></div>
        </div>
        <div class="error-btn error-content flex">
            <a class="error-btn__item flex center-align relative" onclick="history.back()" href="javascript:;">{!! config('translate.' . $lang . '.not_found.btn_go_back') !!}</a>
            <a class="error-btn__item flex center-align relative" href="{!! setUrl($project->id, $domainPublish ?? false, $lang, '') !!}">{!! config('translate.' . $lang . '.not_found.btn_go_top_page') !!}</a>
        </div>
    </div>
@endsection
<style>
    .error-page.pc-flex {
        background-image: url({!! $imagePc !!}) !important;
    }

    .error-page.sp-flex {
        background-image: url({!! $imageSp !!}) !important;
    }
</style>