@extends('console_layouts.master')
@section('title')
    {{ $page->name }}
@endsection
@section('css')
    <style>

        .item-action>div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.25rem;
            width: 2em;
            height: 2em;
            transition: transform .3s ease-out;
        }
        .item-action>div:hover{
            transform: scale(1.2);
        }

        .item-action .reorder-button{
            color: rgb(123, 112, 161);
            cursor: move;
        }

        .item-action .delete-button{
            cursor: pointer;
        }


        .image-input {
            display: none;
        }

        .image-upload-button {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            width: 50px;
            background-color: rgb(208, 208, 208);
            cursor: pointer;
            border-radius: 50%;
        }

        .image-upload-button .icon {
            font-size: 25px;
        }

        .image_preview {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            position: relative;
            display: inline-block;
            border-radius: 20%;
            margin: 10px;
            cursor: move;
        }

        .image_preview img {
            display: block;
            height: 100%;
            /* Adjust width as necessary */
            border-radius: 1em;
        }

        .del_btn {
            position: absolute;
            top: 1%;
            right: 1%;
            color: white;
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 24px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        .del_btn:hover {
            transform: scale(1.1);
            /* Increase size slightly */
            transition: transform .1s ease;
        }

        .toggle-arrow {
            transition: transform 0.3s;
        }

        .collapsed .toggle-arrow {
            transform: rotate(180deg);
        }


    </style>
    <link href="{{ asset('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
        編輯頁面
        @endslot
        @slot('title')
            {{ $page->name }}
        @endslot
    @endcomponent
    
        <div class="row mb-5">
            <div class="col-lg-12">
                <form>
                @foreach ($page->blocks as $block)
                @if($block->editable == 'ture')
                    <div class="card">
                        <div class="card-body block_edit p-3 gap-2" data-id={{ $block->block_id }}>
                            <div class="row collapsed p-3" data-bs-toggle="collapse" role="button" href="#block-content-{{ $block->block_id }}" aria-expanded="false">
                                <div class="col-11 d-flex align-items-center">
                                    <h5 class="m-auto fw-bold text-primary fs-18">{{ $block->title ?? '區塊' }}</h5>
                                </div>
                                <div class="col-1 text-end d-flex justify-content-center align-items-center" >
                                    <i class="toggle-arrow ri-arrow-up-s-line" style="font-size: 1.5em;"></i>
                                </div>
                            </div>
                            <div  id="block-content-{{ $block->block_id }}" class="collapse">
                                <div class="field-wrapper">
                                @foreach ($block->block_data->field->field as $field_name => $field_value)