@extends('layouts.khtc')
@section('title')
    {{ $page->title }} | Kantipur Hotel Training Center
@endsection

@section('seo_meta')
    <!-- Primary Meta Tags -->
    <meta name="description" content="{{ $page->meta_description }}">
    <meta name="keywords" content="{{ $page->meta_keywords }}">
    <meta name="author" content="Kantipur Hotel Training Center">
    
    <!-- Facebook Open Graph -->
    <meta property="fb:pages" content="514126112091485"/>
    <meta property="fb:app_id" content="3126158117618521"/>
    <meta property="og:title" content="{{ $page->title }} | Kantipur Hotel Training Center"/>
    <meta property="og:url" content="{{ URL::current() }}"/>
    <meta property="og:description" content="{{ $page->meta_description }}"/>
    @if($page->image)
    <meta property="og:image" content="{{ asset('/uploads/'.$page->image) }}"/>
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    @endif
    <meta property="og:type" content="website"/>
    <meta property="og:site_name" content="Kantipur Hotel Training Center"/>
    <meta property="og:locale" content="en_US" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:site" content="@KantipurPkr"/>
    <meta name="twitter:creator" content="@KantipurPkr"/>
    <meta name="twitter:title" content="{{ $page->title }} | Kantipur Hotel Training Center"/>
    <meta name="twitter:description" content="{{ $page->meta_description }}"/>
    @if($page->image)
    <meta name="twitter:image" content="{{ asset('/uploads/'.$page->image) }}"/>
    @endif
    <meta name="twitter:url" content="{{ URL::current() }}"/>

    <!-- Canonical URL -->
    <link rel="canonical" href="{{ URL::current() }}" />
    <link rel="profile" href="http://gmpg.org/xfn/11">
@endsection

@section('breadcrumb')
    <!-- Start Page Title Area -->
    <div class="page-title-area" style="background-image:url('@if($page->banner){{ asset('/uploads/'.$page->banner) }} @else {{ asset('/assets/img/banner.png') }} @endif'); background-size: cover; background-position: center;">
        <div class="container">
            <div class="page-title-content">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $page->title }}</li>
                    </ol>
                </nav>
                <h1 class="display-4 text-white font-weight-bold">{{ $page->title }}</h1>
                @if($page->sub_heading)
                <p class="lead text-light">{{ $page->sub_heading }}</p>
                @endif
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->
@endsection

@section('main')
<section class="content-area">
    <div class="container">
        @auth
        <div class="row mb-3">
            <div class="col-12 text-end">
                @if($page instanceof \TCG\Voyager\Models\Post)
                    <a href="{{ route('voyager.posts.edit', $page->id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-edit"></i> Edit Post
                    </a>
                @elseif($page instanceof \App\Models\Page)
                    <a href="{{ route('pages.edit', $page->id) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-edit"></i> Edit Page
                    </a>
                @endif
            </div>
        </div>
        @endauth

        <div class="row align-items-center">
            @if ($page->image)
                <div class="col-lg-5 mb-4">
                    <div class="image-frame">
                        <img src="{{ asset('/uploads/'.$page->image) }}" class="featured-image" alt="{{ $page->title }}">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="text-content">
                        <span class="section-tag">{{ $page->title }}</span>
                        <h2 class="section-title">{{ $page->sub_heading }}</h2>
                        <div class="content-body">{!! $page->body !!}</div>
                        @if($page->cta_link && $page->cta_text)
                        <div class="cta-wrapper">
                            <a href="{{ $page->cta_link }}" class="cta-button">{{ $page->cta_text }} <i class="fas fa-arrow-right ml-2"></i></a>
                        </div>
                        @endif
                    </div>
                </div>
            @else
                <div class="col-12 text-center">
                    <span class="section-tag">{{ $page->title }}</span>
                    <h2 class="section-title">{{ $page->sub_heading }}</h2>
                    <div class="content-body mx-auto" style="max-width: 800px;">{!! $page->body !!}</div>
                    @if($page->cta_link && $page->cta_text)
                    <div class="cta-wrapper">
                        <a href="{{ $page->cta_link }}" class="cta-button">{{ $page->cta_text }} <i class="fas fa-arrow-right ml-2"></i></a>
                    </div>
                    @endif
                </div>
            @endif
        </div>
    </div>
</section>

@if($page->additional_content)
<section class="additional-content py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-12">
                {!! $page->additional_content !!}
            </div>
        </div>
    </div>
</section>
@endif
@endsection


@push('styles')
<style>
    /* Layout Structure */
    .content-area {
        padding: 80px 0;
    }
    
    .featured-image-wrap {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .image-frame {
        position: relative;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        transform: perspective(1000px) rotateY(-5deg);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .image-frame::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
        z-index: 1;
    }
    
    .featured-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .image-frame:hover {
        transform: perspective(1000px) rotateY(0deg) translateY(-5px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .image-frame:hover .featured-image {
        transform: scale(1.03);
    }
    
    /* Text Content Styling */
    .text-content {
        padding-left: 40px;
    }
    
    .section-tag {
        display: inline-block;
        font-size: 0.85rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #e67e22;
        font-weight: 600;
        margin-bottom: 15px;
    }
    
    .section-title {
        font-size: 2.2rem;
        line-height: 1.3;
        margin-bottom: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        position: relative;
        padding-bottom: 15px;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: #e67e22;
    }
    
    .content-body {
        line-height: 1.8;
        font-size: 1.05rem;
        color: #555;
    }
    
    .content-body p {
        margin-bottom: 1.5rem;
    }
    
    .cta-wrapper {
        margin-top: 2rem;
    }
    
    .cta-button {
        display: inline-block;
        background: #e67e22;
        color: white;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
    }
    
    .cta-button:hover {
        background: #d35400;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(230, 126, 34, 0.4);
        color: white;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 991.98px) {
        .text-content {
            padding-left: 30px;
        }
        
        .section-title {
            font-size: 1.8rem;
        }
    }
    
    @media (max-width: 767.98px) {
        .featured-image-wrap {
            margin-bottom: 40px;
        }
        
        .text-content {
            padding-left: 0;
        }
        
        .image-frame {
            transform: none;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .section-title {
            font-size: 1.6rem;
        }
    }
    
    @media (max-width: 575.98px) {
        .content-area {
            padding: 60px 0;
        }
        
        .section-title {
            font-size: 1.4rem;
        }
        
        .content-body {
            font-size: 1rem;
        }
    }
</style>
@endpush