@php
    use App\Models\Publish\Project as PublishProject;
    use Carbon\Carbon;

    $projectId = '';
    if (!empty($project)) {
        Session::put('project', $project);
    }

    if (Session::has('project')) {
        $project = Session::get('project');
    }
    if (!empty($project)) {
        $project->topPage;
        $projectId = $project['id'];
    }
    $routeName = request()
        ->route()
        ->getName();

    $diffInDays = false;

    if (isset($project) && $project->timer) {
        $date1 = Carbon::parse($project->timer)->addDays(14);
        $date2 = Carbon::now();
        $diffInDays = $date1->greaterThanOrEqualTo($date2);

        $timestamp1 = $date1->timestamp;
        $timestamp2 = $date2->timestamp;

        $remainingTime = $timestamp1 - $timestamp2;
        $days = floor($remainingTime / (24 * 60 * 60));
        $hours = $days * 24 + floor(($remainingTime % (24 * 60 * 60)) / (60 * 60));
        $minutes = floor(($remainingTime % (60 * 60)) / 60);
        $seconds = $remainingTime % 60;
    }

@endphp
<header id="header-user" class="c-header c-header-light c-header-with-subheader border-black">
    <button class="c-header-toggler c-class-toggler d-lg-none mr-auto" type="button" data-target="#sidebar"
        data-class="c-sidebar-show">
        <span class="c-header-toggler-icon"></span>
    </button>
    @if (isset($project) &&
            $project->timer &&
            $routeName != 'project.index' &&
            $diffInDays &&
            $project->usage_plan == \App\Enums\UsagePlan::FREE)
        <div class="c-header ml-24 font-size-20 border-bottom-0 d-flex align-items-center justify-content-between w-100 timer"
            id="timer">
            <!-- Breadcrumb header-->
            <ol class="breadcrumb border-0 m-0 h-auto w-100" style="align-items: center;">
                <li class="breadcrumb-item active text-white pl-4">
                    <span class="font-size-12">Freeプランにご登録いただき有難うございます！ 登録から所定時間内にビジネスプランにしていただくと、割引を受けられます！</span>
                </li>
                <li class="breadcrumb-item active text-white pl-4 d-flex"
                    style="flex: 1; justify-content: space-between;">
                    <div class="d-flex align-items-center">
                        <div class="time-notice text-nowrap">72時間以内なら初月無料</div>
                        <div class="font-size-12 text-nowrap">残り</div>
                        <div class="time-remaining text-nowrap" id="countdown">{{$hours.':'.$minutes.':'.$seconds}}</div>
                    </div>
                </li>
                <li class="breadcrumb-item active text-white pl-4 d-flex pr-4"
                    style="flex: 1; justify-content: space-between;">
                    <a href="{{ isset($project) ? route('project.payment', ['id' => $project->id]) : '' }}"
                        class="see-detail">
                        <div class="btn-see-detail">詳しくはこちら</div>
                    </a>
                </li>
            </ol>
        </div>
    @endif
    <div class="c-header ml-24 font-size-20 border-bottom-0 d-flex align-items-center justify-content-between w-100">
        <!-- Breadcrumb header-->
        <ol class="breadcrumb border-0 m-0 h-auto w-100">
            <li class="breadcrumb-item active text-white pl-4">
                {{-- <Logo :route="{{ json_encode(!empty($project) ? route('project.show', $project->id) : route('project.index')) }}"></Logo> --}}
                <a class="logo"
                    href="{{ !empty($project) ? route('project.show', $project->id) : route('project.index') }}">
                    <?xml version="1.0" encoding="UTF-8"?><svg width="127" id="_レイヤー_2"
                        xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 151 25.11">
                        <g id="_レイヤー_1-2">
                            <polygon
                                points="0 12.55 5.82 22.63 8.9 17.3 6.15 12.55 10.32 5.33 10.32 5.33 7.25 0 0 12.55" />
                            <polygon
                                points="23.17 2.47 20.09 7.8 22.84 12.55 18.67 19.78 18.67 19.78 21.74 25.11 28.99 12.55 23.17 2.47" />
                            <path
                                d="m41.04,1.74h3.05l5.74,13.75,6-13.75h3.05l3.63,21.63h-4.28l-1.95-13.33-5.8,13.33h-1.43l-5.54-13.33-2.21,13.33h-4.28L41.04,1.74Z" />
                            <path d="m75.73,1.74v21.63h-4.22V1.74h4.22Z" />
                            <path
                                d="m92.11,1.74c2.98,0,4.51.78,5.51,1.62,1.65,1.39,2.14,3.24,2.14,4.86,0,2.11-.84,3.96-2.53,5.09-.55.39-1.33.75-2.37.94l6.75,9.11h-5.25l-5.77-8.69h-.52v8.69h-4.22V1.74h6.26Zm-2.04,9.96h1.2c.81,0,4.15-.1,4.15-3.27s-3.31-3.24-4.09-3.24h-1.27v6.52Z" />
                            <path
                                d="m122.46,18.83h-8.72l-1.91,4.54h-4.57L116.56,1.74h3.31l9.05,21.63h-4.54l-1.91-4.54Zm0,0l-4.31-11.22-4.41,11.22h8.72Z" />
                            <path
                                d="m139.16,13.48l-7.43-11.74h4.99l4.64,7.52,4.64-7.52h4.99l-7.62,11.74v9.89h-4.22v-9.89Z" />
                        </g>
                    </svg>
                    <span class="text-logo">for business</span>
                </a>
            </li>
            <li class="breadcrumb-item active text-white pl-4 d-flex" style="flex: 1; justify-content: space-between;">
                <div class="d-flex search-box mr-auto">
                    <div class="dropdown">
                        <button class="btn btn-secondary choose-project" type="button" id="dropdownMenuButton"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="drop-label">
                                {{ !empty($project) ? $project->name : '' }}
                            </div>
                        </button>
                        @if (!empty($projectInfos))
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                @foreach ($projectInfos as $item)
                                    <div class="dropdown-list">
                                        <a class="dropdown-item"
                                            href="{{  route('project.show', $item['id'])}}">
                                            {{ $item['name'] }}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <div class="d-flex">
                        <button type="button" class="redirect-btn text-nowrap"
                            onclick="openPreviewSite({{ json_encode(route('preview.top', isset($project) ? $project->id : 0)) }}, {{ (!isset($project)  || !$project->topPage || $project->topPage->status == 1) ? false : true}}, {{ (!isset($project)  || !$project->complete_basic_setting) ? false : true}})"
                            @if (!isset($project)) disabled='disabled' @endif>
                            テストサイトを開く
                            <img src="/images/icons/group_button/button_2.svg" alt="" />
                        </button>
                        <button type="button" class="redirect-btn text-nowrap"
                            onclick="openPublishSite({{ json_encode(isset($project) ? $project->domain_publish : '') }})"
                            @if (!isset($project) || empty($project->domain_publish)) disabled='disabled' @endif>
                            公式サイトを開く
                            <img src="/images/icons/group_button/button_3.svg" alt="" />
                        </button>
                    </div>
                </div>

                <div class="user-options d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1" height="20" viewBox="0 0 1 20"
                        class="mr-30px">
                        <line id="Line_1691" data-name="Line 1691" y2="20" transform="translate(0.5)"
                            fill="none" stroke="#fff" stroke-width="1" opacity="0.4" />
                    </svg>

                    <a href="{{ route('project.index') }}" class="text-white mr-36 ml-30">プロジェクト一覧</a>

                    <div class="button-dropdown">
                        <button class="short-info d-flex" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <div class="col-2 d-flex align-items-center m-auto">
                                @if (!empty(auth()->user()->avatar))
                                    <img src="{{ auth()->user()->avatar }}" class="avatar-admin" alt="" />
                                @else
                                    <img src="/images/default/avatar.png" class="avatar-admin" alt="" />
                                @endif

                            </div>
                            <div class="col-8 text-left text-white box-name">
                                <p class="m-0 fs-12">{{ auth()->user()->company_name }}</p>
                                <p class="m-0 fs-10">{{ auth()->user()->person_in_charge }}</p>
                            </div>
                            <div class="col-2 d-flex align-items-center m-auto arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="7.207" height="13.414"
                                    viewBox="0 0 7.207 13.414">
                                    <path id="Path_8495" data-name="Path 8495" d="M0,12,6,6,0,0"
                                        transform="translate(0.707 0.707)" fill="none" stroke="#fff"
                                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                </svg>
                            </div>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <div class="dropdown-item">
                                <a href="{{ route('profile.show') }}">
                                    <svg id="settings" width="24" height="24" viewBox="0 0 24 24">
                                        <path id="Path_9201" data-name="Path 9201" d="M0,0H24V24H0Z"
                                            fill="none" />
                                        <path id="Path_9202" data-name="Path 9202"
                                            d="M10.325,4.317a1.724,1.724,0,0,1,3.35,0,1.724,1.724,0,0,0,2.573,1.066,1.725,1.725,0,0,1,2.37,2.37,1.724,1.724,0,0,0,1.065,2.572,1.724,1.724,0,0,1,0,3.35,1.724,1.724,0,0,0-1.066,2.573,1.725,1.725,0,0,1-2.37,2.37,1.724,1.724,0,0,0-2.572,1.065,1.724,1.724,0,0,1-3.35,0,1.724,1.724,0,0,0-2.573-1.066,1.725,1.725,0,0,1-2.37-2.37,1.724,1.724,0,0,0-1.065-2.572,1.724,1.724,0,0,1,0-3.35A1.724,1.724,0,0,0,5.383,7.752a1.725,1.725,0,0,1,2.37-2.37,1.723,1.723,0,0,0,2.572-1.065Z"
                                            fill="none" stroke="#000" stroke-linecap="round"
                                            stroke-linejoin="round" stroke-width="1" />
                                        <path id="Path_9203" data-name="Path 9203"
                                            d="M9,12a3,3,0,1,0,3-3,3,3,0,0,0-3,3" fill="none" stroke="#000"
                                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                    </svg>
                                    <span> アカウント設定</span>
                                </a>
                            </div>
                            <div class="dropdown-item">
                                <a href="{{ !empty($project) ? route('user-management.index', $project->id) : '#' }}">
                                    <svg id="user-plus" xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24">
                                        <path id="Path_9204" data-name="Path 9204" d="M0,0H24V24H0Z"
                                            fill="none" />
                                        <path id="Path_9205" data-name="Path 9205"
                                            d="M8,7a4,4,0,1,0,4-4A4,4,0,0,0,8,7" fill="none" stroke="#000"
                                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
                                        <path id="Path_9206" data-name="Path 9206" d="M16,19h6" fill="none"
                                            stroke="#000" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="1" />
                                        <path id="Path_9207" data-name="Path 9207" d="M19,16v6" fill="none"
                                            stroke="#000" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="1" />
                                        <path id="Path_9208" data-name="Path 9208" d="M6,21V19a4,4,0,0,1,4-4h4"
                                            fill="none" stroke="#000" stroke-linecap="round"
                                            stroke-linejoin="round" stroke-width="1" />
                                    </svg>
                                    <span> ユーザー招待</span>
                                </a>
                            </div>
                            <div class="dropdown-item">
                                <form action="/logout" method="POST" class="w-100">
                                    {{ csrf_field() }}
                                    <button type="submit">
                                        <svg id="logout" xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24">
                                            <path id="Path_9197" data-name="Path 9197" d="M0,0H24V24H0Z"
                                                fill="none" />
                                            <path id="Path_9198" data-name="Path 9198"
                                                d="M14,8V6a2,2,0,0,0-2-2H5A2,2,0,0,0,3,6V18a2,2,0,0,0,2,2h7a2,2,0,0,0,2-2V16"
                                                fill="none" stroke="#c00" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="1" />
                                            <path id="Path_9199" data-name="Path 9199" d="M9,12H21L18,9"
                                                fill="none" stroke="#c00" stroke-linecap="round"
                                                stroke-linejoin="round" stroke-width="1" />
                                            <path id="Path_9200" data-name="Path 9200" d="M18,15l3-3" fill="none"
                                                stroke="#c00" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="1" />
                                        </svg>
                                        <span> ログアウト</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ol>
    </div>
</header>

@if (isset($breadcrumbs))
    <nav class="breadcrumb d-flex align-items-center background-white mb-0" id="breadcrumb">
        @foreach ($breadcrumbs as $index => $item)
            <li>
                @if (!empty($item['url']))
                    <a class="link-breadcrumb" href="{{ $item['url'] }}">
                        <span>{{ $item['name'] }}</span>
                    </a>
                @else
                    <span class="text-black bold">{{ $item['name'] }}</span>
                @endif

                @if (count($breadcrumbs) - $index > 1)
                    <span class="breadcrumb-arrow">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right"
                            class="svg-inline--fa fa-angle-right fa-w-8" role="img"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="8" height="17">
                            <path fill="currentColor"
                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z">
                            </path>
                        </svg>
                    </span>
                @endif
            </li>
        @endforeach
    </nav>
@endif

@if (isset($project) && $project->timer && $routeName != 'project.index' && $diffInDays && $project->usage_plan == \App\Enums\UsagePlan::FREE)
    @push('javascript')
        <script>
            var targetDate = new Date(@json($project->timer));
            targetDate.setDate(targetDate.getDate() + 14)

            var countdown = setInterval(function() {
                var now = new Date();
                var dateString = now.toLocaleString('ja-JP', {
                    timeZone: 'Asia/Tokyo'
                });
                var timestamp = new Date(dateString).getTime();

                var remainingTime = targetDate - timestamp;
                var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                var hours = days * 24 + Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

                document.getElementById("countdown").innerHTML = hours + ":" + minutes +
                    ":" + seconds + "";

                if (remainingTime < 0) {
                    clearInterval(countdown);
                    document.getElementById("timer").setAttribute('style', 'display:none !important');
                }
            }, 1000);
        </script>
    @endpush
@endif