@extends('backend.global.layout')

@section('content')
    @include('backend.global.notifications')
    <br>
    <div class="page-edit-model d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            @include('backend.global.header-card')
            @include('backend.global.validation')
            <div class="content-row">
                <div class="card">
                    {!! Form::open(['url' => route('manager.pages.update', $page->id), 'method' => 'PUT', 'class' => 'form fv-plugins-bootstrap5 fv-plugins-framework', 'enctype' => 'multipart/form-data' ]) !!}
                    <div class="card-body border-top p-9">
                        <!--begin::Input group-->
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Nome</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="name" value="{{ $page->name }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($show_brand_inputs && $page_brand instanceof \App\Models\PageBrands\PageBrands)
{{--                            <div class="row mb-6">--}}
{{--                                <label--}}
{{--                                    class="col-lg-4 col-form-label required fw-bold fs-6">Logótipo</label>--}}
{{--                                <div class="col-lg-8">--}}
{{--                                    <div class="row">--}}
{{--                                        <div class="col-lg-12 fv-row fv-plugins-icon-container" style="margin-bottom: 5px;">--}}
{{--                                            <input type="file" name="logo_brand"--}}
{{--                                                   class="form-control m-input form-control-lg form-control-solid mb-3 mb-lg-0">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    @if(isset($page_brand->logo_uid))--}}
{{--                                        @include('backend.global.show-file-modal', ['route' => route('page_brands.logo', ['uid' => $page_brand->logo_uid, 'type' => 'brand'] ), 'input_name' => 'image_logo', 'title' => 'Logótipo'])--}}
{{--                                    @endif--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Banner</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container" style="margin-bottom: 5px;">
                                            <input type="file" name="banner_brand"
                                                   class="form-control m-input form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                    @if(isset($page_brand->banner_uid))
                                        @include('backend.global.show-file-modal', ['route' => route('page_brands.banner', ['uid' => $page_brand->banner_uid, 'type' => 'brand'] ), 'input_name' => 'banner', 'title' => 'Banner'])
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Titulo</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <input type="text" name="title_brand" value="{{ $page_brand->title }}"
                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Descrição</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <textarea name="description_brand" class="form-control m-input" style="width: 100%;min-height: 155px;"> {!! $page_brand->description !!}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-bold fs-6">Modelos de viaturas</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <select name="vehicles_models[]" class="form-control m-input" data-control="select2" multiple
                                                    data-placeholder="Escolha a opção">
                                                <option></option>
                                                @foreach ($models as $m)
                                                    <option value="{{ $m->id }}"
                                                            @if($page_brand->vehicles->contains(function ($vehicle) use ($m) {
                                                                return $vehicle->vehicle_model === $m->name;
                                                            })) selected @endif>
                                                        {{ $m->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-bold fs-6">Categorias das oportunidades</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <select name="campaign_category_ids[]" class="form-control m-input" data-control="select2" multiple
                                                    data-placeholder="Escolha a opção">
                                                <option></option>
                                                @foreach ($campaignCategories as $category)
                                                    <option value="{{ $category->id }}"
                                                        @if($page_brand->campaignCategories->contains($category->id)) selected @endif>
                                                        {{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-6">
                                <label
                                    class="col-lg-4 col-form-label required fw-bold fs-6">Em cima</label>
                                <div class="col-lg-8">
                                    <div class="row">
                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                            <div class="input-group">
                                                <div
                                                    class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                    <input name="order" class="form-check-input" type="checkbox" value="1" {{ $page_brand->order ? 'checked' : '' }} >
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        @endif



                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <div class="input-group">
                                            <div
                                                class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="1" {{ $page->visible ? 'checked' : '' }}
                                                name="visible">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        @if($show_brands)
                            <div class="card-body border-top p-9" id="page_brands_section">
                                <div class="row mb-6">
                                    <h4 class="col-lg-12 fw-bold fs-6 label-section">Marcas</h4>
                                </div>

                                {{--                            existing selected brands--}}
                                @foreach($page->brands as $page_brand)
                                    <div class="row mb-5">
                                        <div class="col-6">
                                            {{$page_brand->brand->name}}
                                        </div>
                                        <div class="col-6">
                                            <a href="{{route('manager.pages.edit', $page_brand->targetPage->hash)}}" class="btn btn-light-primary">
                                            <span class="svg-icon svg-icon-3">
                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path opacity="0.3"
                                                          d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z"
                                                          fill="currentColor"></path>
                                                    <path
                                                        d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z"
                                                        fill="currentColor"></path>
                                                </svg>
                                            </span> &nbsp
                                                Editar
                                            </a>
                                            <a href="javascript:void(0);" data-route="{{ route('manager.page-brands.delete', $page_brand->id) }}" class="btn btn-light-danger btn-delete">
                                                <i class="fas fa-trash-alt"></i> &nbsp
                                                Eliminar
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                                {{--                            end existing selected brands--}}

                                {{--                            brands selector--}}
                                <div class="border-top mt-10 mb-5"></div>
                                <div id="repeater_brands">
                                    <div class="row mb-6">
                                        <label
                                            class="col-lg-4 col-form-label fw-bold fs-6"> Marca</label>
                                        <div class="col-lg-8">
                                            <div class="row">
                                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                    <select name="selected_brands[]"
                                                            class="form-control select2">
                                                        <option></option>
                                                        @foreach($brands as $brand)
                                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mt-5">
                                    <a href="javascript:void(0);" onclick="addBrand()" class="btn btn-light-primary">
                                        <i class="fas fa-plus-circle"></i> &nbsp
                                        Adicionar Item
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="card-body border-top p-9">
                        <div class="row mb-6">
                            <h4 class="col-lg-12 fw-bold fs-6 label-section">SEO</h4>
                        </div>
                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Titulo SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="seo_title" value="{{ $page->seo_title }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Descrição SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <textarea name="seo_description"
                                                  class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">{{ $page->seo_description }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-6">
                            <label
                                class="col-lg-4 col-form-label fw-bold fs-6">Palavras-Chave SEO</label>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="seo_keywords" value="{{ $page->seo_keywords }}"
                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <a href="{{ route('manager.pages') }}" class="btn btn-light btn-active-light-primary me-2">Cancelar</a>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </div>
                    <!--end::Actions-->
                    <input type="hidden">
                    <div></div>
                    {!! Form::close() !!}
                </div>
            </div>

            <div class="content-row">
                <div class="card">

                    <div class="card-body border-top p-9">
                        <div class="row mb-6">
                            <h4 class="col-lg-4 fw-bold fs-6 label-section">BLOCOS DA PÁGINA</h4>

                            @role('super')
                            <div class="col-lg-8">
                                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#kt_modal_offer_a_deal" id="add_section_btn_dummy" class="btn btn-info" style="float: right">Adicionar Bloco</a>
                            </div>
                            @endrole
                        </div>
                        @include('backend.pages.snippets.components.type_selector')
                        <input type="hidden" name="num_sections" id="num_sections" value="{{ count($page->sections) }}">
                        <div class="accordion" id="sections_accordion">
                            @foreach($page->sections as $k=>$section)
                                @if(isset($section->components()->first()->type))
                                <div class="accordion-item" id="page_section_{{ ++$k }}">
                                    <h2 class="accordion-header" id="sections_accordion_header{{ $k }}">
                                        <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#sections_accordion_body{{ $k }}" aria-expanded="false" aria-controls="sections_accordion_body{{ $k }}">
                                            <span class="badge badge-light-primary">{{ \App\Models\Components\Components::TYPE_ARRAY[$section->components()->first()->type] }}</span>
                                            {{ $section->name }}
                                        </button>
                                    </h2>
                                    <div id="sections_accordion_body{{ $k }}" class="accordion-collapse collapse " aria-labelledby="sections_accordion_header{{ $k }}" data-bs-parent="#sections_accordion">
                                        <div class="accordion-body">
                                            <form action="{{ route('manager.pages.update-section', $section->id) }}" method="POST" class="form fv-plugins-bootstrap5 fv-plugins-framework" enctype="multipart/form-data">
                                            @method('PUT')
                                            @csrf
                                            <div class="row mb-6">
                                                <label
                                                    class="col-lg-4 col-form-label required fw-bold fs-6">Titulo da Secção</label>
                                                <div class="col-lg-8">
                                                    <div class="row">
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <input type="text" required name="section[{{ $k }}][name]" value="{{ $section->name }}"
                                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mb-6">
                                                <label
                                                    class="col-lg-4 col-form-label fw-bold fs-6">Descrição da Secção</label>
                                                <div class="col-lg-8">
                                                    <div class="row">
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <input type="text" name="section[{{ $k }}][description]" value="{{ $section->description }}"
                                                                   class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            @if($section->components()[0]->type == 2 || $section->components()[0]->type == 3 || $section->components()[0]->type == 4 ||
$section->components()[0]->type == 5 || $section->components()[0]->type == 6 || $section->components()[0]->type == 8 ||
$section->components()[0]->type == 10 || $section->components()[0]->type == 12 || $section->components()[0]->type == 14)
                                                <div class="row mb-6">
                                                    <label
                                                        class="col-lg-4 col-form-label required fw-bold fs-6">Tipo de Crops</label>
                                                    <div class="col-lg-8">
                                                        <div class="row">
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <select name="section[{{ $k }}][crop_group_id]" required
                                                                        class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                                    @foreach($crop_groups as $crop_group)
                                                                        <option value="{{ $crop_group->id }}" {{ $section->components()[0]->crop_group_id == $crop_group->id ? 'selected' : '' }}
                                                                        >{{ $crop_group->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            <input type="hidden" name="section[{{ $k }}][type]" value="{{ $section->components()[0]->type }}">

                                            <div class="row mb-6">
                                                <label
                                                    class="col-lg-4 col-form-label required fw-bold fs-6">Visivel</label>
                                                <div class="col-lg-8">
                                                    <div class="row">
                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                            <div class="input-group">
                                                                <div
                                                                    class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" {{ $section->visible ? 'checked' : '' }}
                                                                    name="section[{{ $k }}][visible]">
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>

                                                @role('super')
                                                <div class="row mb-6">
                                                    <label
                                                        class="col-lg-4 col-form-label required fw-bold fs-6">Layout Variavel</label>
                                                    <div class="col-lg-8">
                                                        <div class="row">
                                                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                                                <div class="input-group">
                                                                    <div
                                                                        class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
                                                                        <input type="text" name="section[{{ $k }}][layout]" value="{{ $section->layout }}"
                                                                               class="form-control form-control-lg form-control-solid mb-3 mb-lg-0">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                @endrole
                                                <hr>

                                                <div id="section_form_area_{{ $k }}">
                                                    @foreach($section->components() as $component)
                                                        @if($component->getSpecificComponent() == null)