@extends('layouts.guest') @section('title', Session::get('lang', 'en') == 'en' ? 'Visual Component - Brand Guidelines' : 'Komponen Visual - Brand Guidelines') @section('content')

@if (Session::get('lang', 'en') == 'en') Visual Component @else Komponen Visual @endif

@if (Session::get('lang', 'en') == 'en') Visual components bring harmony and consistency, shaping brand identity at every point of interaction. @else Komponen visual menghadirkan harmoni dan konsistensi, membentuk identitas brand di setiap titik interaksi. @endif

@php $borderOpen = false; @endphp @forelse($layouts as $layout) {{-- SPECIAL HANDLING FOR DOWNLOAD LOGO --}} @if (isset($layout->card_type) && $layout->card_type === 'dwnldlogo') {{-- Open border if not already open --}} @if (!$borderOpen)
@php $borderOpen = true; $isFirstInBorder = true; @endphp @endif {{-- Add spacing for dwnldlogo if not first in border --}} @if ($borderOpen && !$isFirstInBorder)
@endif @php $isFirstInBorder = false; @endphp

{{ $layout->header }}

@if ($layout->description)

{!! $layout->description !!}

@endif
@if ($layout->visualComponents->count() > 0)
@foreach ($layout->visualComponents as $visualcomponent)
{{ $visualcomponent->header }}

{{ $visualcomponent->header }}

@if ($visualcomponent->description)
{!! $visualcomponent->description !!}
@endif @php $downloadLinks = $visualcomponent->links; $totalLinks = $downloadLinks->count(); @endphp
@endforeach
@else

@if (Session::get('lang', 'en') == 'en') No content available yet for this section. @else Belum ada konten tersedia untuk bagian ini. @endif

@endif
@else {{-- REGULAR LAYOUT HANDLING --}} @php $isInformational = in_array($layout->card_type, [ 'informational', 'info', 'info-r', 'info-rl', 'info-m', 'informational_right', 'informational_mixed', 'informational right', 'informational mixed', ]); $needsBorder = !$isInformational; @endphp {{-- Close border if moving from bordered to informational --}} @if ($borderOpen && $isInformational)
@php $borderOpen = false; @endphp @endif {{-- Open border if starting bordered section --}} @if ($needsBorder && !$borderOpen)
@php $borderOpen = true; $isFirstInBorder = true; @endphp @endif {{-- Informational without border --}} @if ($isInformational)
@endif
@php // Hide header dan description untuk cardtype informational dan dwnldsatu $hideHeader = in_array($layout->card_type, [ 'informational', 'info', 'info-r', 'info-rl', 'info-m', 'informational_right', 'informational_mixed', 'informational right', 'informational mixed', 'dwnldsatu', 'dwnlddua', ]); $headerStyle = $needsBorder ? 'margin-bottom: 25px; margin-top: 0; max-width: 100%; box-sizing: border-box;' : 'margin-bottom: 25px; margin-top: 20px; max-width: 100%; box-sizing: border-box;'; $descriptionStyle = 'margin-bottom: 35px; text-align: justify; max-width: 100%; box-sizing: border-box;'; @endphp {{-- Add spacing for bordered layouts (90px for 2nd+ layout in border) --}} @if ($needsBorder && $borderOpen && !$isFirstInBorder)
@endif @if ($needsBorder && $borderOpen) @php $isFirstInBorder = false; @endphp @endif @if (!$hideHeader)

{{ $layout->header }}

@if ($layout->description)

{!! $layout->description !!}

@endif @endif {{-- KONTEN --}} @if ($layout->visualComponents->count() > 0) @php $cardsPerRow = $layout->number_of_card_per_row; $gridClass = 'one-column-grid'; // Untuk card type guideline, selalu gunakan 4 kolom if ($layout->card_type === 'guideline') { $gridClass = 'four-column-grid'; } else { if ($cardsPerRow == 2) { $gridClass = 'two-column-grid'; } if ($cardsPerRow == 3) { $gridClass = 'three-column-grid'; } if ($cardsPerRow == 4) { $gridClass = 'four-column-grid'; } } @endphp
@foreach ($layout->visualComponents as $visualcomponent) @if (isset($layout->card_type) && in_array($layout->card_type, ['informational', 'info'])) @php // Determine layout: vertical if 2 columns, horizontal otherwise $cardClass = $cardsPerRow == 2 ? 'informational-card informational-card-vertical' : 'informational-card'; @endphp @php $descriptionText = strip_tags($visualcomponent->description); $hasMoreContent = strlen($descriptionText) > 400; $limitedHtml = $visualcomponent->description; if ($hasMoreContent) { $limitedHtml = Str::limit($descriptionText, 400, '...'); } @endphp
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

{!! $hasMoreContent ? $limitedHtml : $visualcomponent->description !!}
@if ($hasMoreContent) @if (Session::get('lang', 'en') == 'en') View Detail @else Lihat Detail @endif @endif
@elseif(isset($layout->card_type) && in_array($layout->card_type, ['informational_right', 'informational right', 'info-r'])) @php $descriptionText = strip_tags($visualcomponent->description); $hasMoreContent = strlen($descriptionText) > 400; $limitedHtml = $visualcomponent->description; if ($hasMoreContent) { $limitedHtml = Str::limit($descriptionText, 400, '...'); } @endphp
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

{!! $hasMoreContent ? $limitedHtml : $visualcomponent->description !!}
@if ($hasMoreContent) @if (Session::get('lang', 'en') == 'en') View Detail @else Lihat Detail @endif @endif
@elseif(isset($layout->card_type) && in_array($layout->card_type, ['informational_mixed', 'informational mixed', 'info-m', 'info-rl'])) @php // Determine position based on index (even/ganjil = left, odd/genap = right) $isEven = $loop->index % 2 === 0; // Ganjil (index 0,2,4...) = gambar kiri, Genap (index 1,3,5...) = gambar kanan $cardClass = $isEven ? 'informational-card-left' : 'informational-card-right'; $descriptionText = strip_tags($visualcomponent->description); $hasMoreContent = strlen($descriptionText) > 400; $limitedHtml = $visualcomponent->description; if ($hasMoreContent) { $limitedHtml = Str::limit($descriptionText, 400, '...'); } @endphp
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

{!! $hasMoreContent ? $limitedHtml : $visualcomponent->description !!}
@if ($hasMoreContent) @if (Session::get('lang', 'en') == 'en') View Detail @else Lihat Detail @endif @endif
@elseif(isset($layout->card_type) && $layout->card_type === 'guideline')
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

@if ($visualcomponent->description)

{!! $visualcomponent->description !!}

@endif
@elseif(isset($layout->card_type) && $layout->card_type === 'dwnldsatu')
@if ($loop->first)

{{ $layout->header }}

{!! $layout->description !!}

@endif
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

@if ($visualcomponent->description)
{!! $visualcomponent->description !!}
@endif
@php $downloadLinks = $visualcomponent->links; $totalLinks = $downloadLinks->count(); $getFileTypeLabel = function ($filePath) { $ext = strtoupper(pathinfo($filePath, PATHINFO_EXTENSION)); $labels = [ 'PDF' => 'PDF Document', 'PNG' => 'PNG Image', 'JPG' => 'JPG Image', 'JPEG' => 'JPEG Image', 'SVG' => 'SVG Vector', 'AI' => 'Adobe Illustrator', 'PSD' => 'Photoshop Document', 'EPS' => 'EPS Vector', 'DOCX' => 'Word Document', 'DOC' => 'Word Document', 'ZIP' => 'Compressed Archive', 'RAR' => 'Compressed Archive', ]; return $labels[$ext] ?? $ext . ' File'; }; @endphp @if ($totalLinks === 0) @else
@if ($totalLinks > 1) @if (Session::get('lang', 'en') == 'en') Download All as ZIP @else Unduh Semua sebagai ZIP @endif @endif @foreach ($downloadLinks as $link) @php $fileExt = strtoupper( pathinfo( $link->address, PATHINFO_EXTENSION, ), ); $isPhotopeaFile = in_array($fileExt, [ 'PNG', 'JPG', 'JPEG', 'SVG', ]); $showPhotopeaBtn = $visualcomponent->photopea == 1 && $isPhotopeaFile; @endphp
{{ $fileExt }}
@if ($showPhotopeaBtn) @if (Session::get('lang', 'en') == 'en') Photopea @else Photopea @endif @endif
@endforeach
@endif
@elseif(isset($layout->card_type) && $layout->card_type === 'dwnlddua') @if ($loop->first)

{{ $layout->header }}

{!! $layout->description !!}

@endif
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

@if ($visualcomponent->description)
{!! $visualcomponent->description !!}
@endif
@php $downloadLinks = $visualcomponent->links; $totalLinks = $downloadLinks->count(); $getFileTypeLabel = function ($filePath) { $ext = strtoupper(pathinfo($filePath, PATHINFO_EXTENSION)); $labels = [ 'PDF' => 'PDF Document', 'PNG' => 'PNG Image', 'JPG' => 'JPG Image', 'JPEG' => 'JPEG Image', 'SVG' => 'SVG Vector', 'AI' => 'Adobe Illustrator', 'PSD' => 'Photoshop Document', 'EPS' => 'EPS Vector', 'DOCX' => 'Word Document', 'DOC' => 'Word Document', 'ZIP' => 'Compressed Archive', 'RAR' => 'Compressed Archive', ]; return $labels[$ext] ?? $ext . ' File'; }; @endphp @if ($totalLinks === 0) @else
@if ($totalLinks > 1) @if (Session::get('lang', 'en') == 'en') Download All as ZIP @else Unduh Semua sebagai ZIP @endif @endif @foreach ($downloadLinks as $link) @php $fileExt = strtoupper( pathinfo($link->address, PATHINFO_EXTENSION), ); $isPhotopeaFile = in_array($fileExt, [ 'PNG', 'JPG', 'JPEG', 'SVG', ]); $showPhotopeaBtn = $visualcomponent->photopea == 1 && $isPhotopeaFile; @endphp
{{ $fileExt }}
@if ($showPhotopeaBtn) @if (Session::get('lang', 'en') == 'en') Photopea @else Photopea @endif @endif
@endforeach
@endif
@if ($loop->last)
@endif @elseif(isset($layout->card_type) && $layout->card_type === 'slider')
@foreach ($layout->mockups as $content) @php $sliderImages = $content->links->where('type', 'slider_image'); $totalImages = 1 + $sliderImages->count(); @endphp
@if ($totalImages > 1)
{{ $content->header }}
@foreach ($sliderImages as $link)
{{ $content->header }}
@endforeach
@else {{ $content->header }} @endif

{{ $content->header }}

{{--

{!! $content->description !!}

--}}
@endforeach
@php break; @endphp @elseif(isset($layout->card_type) && $layout->card_type === 'carousel') @php static $carouselIndex = 0; @endphp
@foreach ($layout->visualComponents as $carouselBrand)
{{ $carouselBrand->title }}
@endforeach
@php $carouselIndex++; break; // Only show carousel once per layout @endphp @else
{{ $visualcomponent->title }}

{{ $visualcomponent->header }}

{!! $visualcomponent->description !!}
@endif @endforeach
@else

@if (Session::get('lang', 'en') == 'en') No content available yet for this section. @else Belum ada konten tersedia untuk bagian ini. @endif

@endif
{{-- Close section for informational cards --}} @if ($isInformational)
@endif @endif {{-- End of @else regular layout handling --}} @empty {{-- kosongkan karena selalu ada layout --}} @endforelse {{-- Close border if still open at end --}} @if ($borderOpen)
@endif
@endsection