@extends('admin.layouts.master')
@section('style')
    <style>
        .iphone {
            width: 544px;
            height: 280px;
            background: white;
            border-radius: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            position: relative;
            border: 10px solid black;
            overflow: hidden;
            overflow-y: scroll;
        }

        .notch {
            width: 8px;
            height: 110px;
            background: black;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .app-bar {
            width: 100%;
            height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 15px 15px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            font-weight: bold;
            position: relative;
        }

        .back-button {
            cursor: pointer;
            font-size: 22px;
            color: #333;
        }

        .title {
            flex-grow: 1;
            text-align: center;
            /*writing-mode: vertical-rl;*/
            /*transform: rotate(180deg);*/
        }

        .content {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            padding: 10px 20px;
            width: 100%;
            max-width: 100%;
            word-wrap: break-word;
            overflow-wrap: break-word;
            flex-grow: 1;
            display: flex;
            align-items: start;
            flex-direction: row;
            gap: 5px;
        }

        .content p {
            margin: 0;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            max-width: 100%;
        }

    </style>
@endsection
@section('content')
    @include('admin.dynamic-pages.partials.delete')

    @php
        $currentPage = $pages->currentPage();
        $lesson = $model;
        if(!$model instanceof \App\Models\Lesson) {
            $lesson = $model->lesson;
        }
    @endphp


    @if($currentPage <= $pages->lastPage() + 1)

        <div class="row justify-content-end mb-5">
            <div class="col-6 text-end">
                @if($currentPage > 1)
                    <a class="btn btn-modern"
                       href="{{route(\Illuminate\Support\Facades\Route::currentRouteName(), ['type' => $type, 'slug' => $model->slug, 'page' => $currentPage-1])}}">
                        {{__("dashboard.previous-page")}}
                    </a>
                @endif
                @if($pages->isNotEmpty())
                    <a class="btn btn-modern"
                       href="{{route(\Illuminate\Support\Facades\Route::currentRouteName(), ['type' => $type, 'slug' => $model->slug, 'page' => $currentPage+1])}}">
                        {{__("dashboard.next-page")}}
                    </a>
                @endif
            </div>
        </div>

        @if($pages->isEmpty())
            <div class="row">
                <div class="col">
                    @livewire('admin.create-inter-active-page', ['type' => $type, 'lesson' => $lesson, 'modelSlug' => $model->slug], key("$type-$model->id"))
                </div>
            </div>
        @endif

        @foreach($pages as $key => $page)
            <div class="row mb-3">
                <div class="col-12 text-center">
                    <h2 class="text-center">
                        @if($model instanceof \App\Models\Lesson)
                            {{__("dashboard.page-number")}} ({{$currentPage}}) {{__("dashboard.in")}} {{$lesson->title}}
                        @else
                            {{$type}} {{__("dashboard.number")}} ({{$currentPage}}) {{__("dashboard.in")}} {{$lesson->title}}
                        @endif
                    </h2>
                </div>
                <div class="col-12 mb-3">
                    <button class="btn btn-danger"
                            data-dynamic-page-id='{{$page->id}}'
                            data-bs-toggle='modal'
                            data-bs-target='#deleteDynamicPageModal'>
                        &nbsp;
                        <x-icons.delete/>
                        {{__("dashboard.remove-this-page")}}
                    </button>
                </div>
            </div>
            @livewire('admin.edit-inter-active-page', ['type' => $type, 'lesson' => $lesson, 'modelSlug' => $model->slug, 'page' => $page], key("$type-$model->id"))
        @endforeach


    @else
        <a href="{{route(\Illuminate\Support\Facades\Route::currentRouteName(), ['type' => $type, 'slug' => $model->slug, 'page' => $pages->lastPage()])}}"
           class="btn btn-modern">
            Go to last page !
        </a>
    @endif

@endsection