@extends('layouts.app')
@section('content')
    @php
        use Carbon\Carbon;
        use Illuminate\Support\Str;

        $banner = !empty($arPageDetails->szBannerImage)
            ? asset('uploads/innerBanner/' . $arPageDetails->szBannerImage)
            : asset('uploads/abouts/brief.jpg');

        $hasData = false;
    @endphp

    {{-- Banner --}}
    <section class="page-banner position-relative d-flex align-items-end"
        style="background-image:url('{{ $banner }}'); background-position:center;background-size:cover;background-repeat:no-repeat;min-height:450px;">

        <div class="position-absolute top-0 start-0 w-100 h-100 banner-overlay"></div>
        <div class="container position-relative text-white pb-5">

            <h1 class="display-3 fw-bold mb-3">
                {{ app()->getLocale() == 'hi'
                    ? $arPageDetails->szPageTitleHindi ?? $arPageDetails->szPageTitle
                    : $arPageDetails->szPageTitle }}
            </h1>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            {{ __('messages.home') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item active text-warning">
                        {{ $szLanguageCode == 'hi' ? 'नई रिलीज' : 'New Release' }}
                    </li>
                    <li class="breadcrumb-item active text-warning">
                        {{ app()->getLocale() == 'hi'
                            ? $arPageDetails->szPageTitleHindi ?? $arPageDetails->szPageTitle
                            : $arPageDetails->szPageTitle }}
                    </li>
                </ol>
            </nav>
        </div>
    </section>

    {{-- News Section --}}
    <section class="section-property py-5">
        <div class="container">
            <div class="row g-4">
                @forelse ($arDailyNews as $key => $news)
                    @php
                        $startDate = Carbon::createFromFormat('d/m/Y', trim($news->dtStartDate));
                        $endDate = Carbon::createFromFormat('d/m/Y', trim($news->dtEndDate));
                        if ($endDate->lt(today())) {
                        }

                        $hasData = true;
                        $title =
                            app()->getLocale() == 'hi'
                                ? (!empty($news->szHeadlinesHindi)
                                    ? $news->szHeadlinesHindi
                                    : $news->szHeadlines)
                                : $news->szHeadlines;
                        $content =
                            app()->getLocale() == 'hi'
                                ? (!empty($news->szContentHindi)
                                    ? $news->szContentHindi
                                    : $news->szContent)
                                : $news->szContent;

                        $image = public_path('uploads/news/' . $news->szImageName);
                        $imageUrl =
                            !empty($news->szImageName) && file_exists($image)
                                ? asset('uploads/news/' . $news->szImageName)
                                : asset('images/no-image.png');
                    @endphp

                    <div class="news-card" data-bs-toggle="modal"
                        data-bs-target="#newsModal{{ $key }}"style="cursor:pointer;">
                        <div class="news-image">
                            <img src="{{ $imageUrl }}" alt="{{ $title }}">
                        </div>
                        <div class="news-content">

                            <h3 class="news-title">{{ $title }}</h3>
                            <p class="news-desc">
                                {{ Str::limit(strip_tags($content), 50, '... ' . __('messages.read_more')) }}
                            </p>

                            <div class="news-footer">
                                <span class="news-date">
                                    {{ $startDate->format('d/m/Y') }}
                                </span>

                                @if (!empty($news->szLearnMoreLink))
                                    <a href="{{ $news->szLearnMoreLink }}" target="_blank" class="news-btn">
                                        {{ __('messages.read_more') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="newsModal{{ $key }}" tabindex="-1">
                        <div class="modal-dialog modal-xl modal-dialog-centered">

                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ $title }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>

                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-5">
                                            <img src="{{ $imageUrl }}" class="img-fluid rounded w-100">
                                        </div>
                                        <div class="col-md-7">
                                            <h2 class="fw-bold">
                                                {{ $title }}
                                            </h2>
                                            <p class="text-muted mb-3">
                                                <i class="fa fa-calendar"></i>
                                                {{ $startDate->format('d/m/Y') }}
                                            </p>
                                            <div class="mb-3">
                                                {!! $content !!}
                                            </div>
                                            @if (!empty($news->szLearnMoreLink))
                                                <a href="{{ $news->szLearnMoreLink }}" target="_blank"
                                                    class="btn btn-primary">
                                                    {{ __('messages.read_more') }}
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse

                @if (!$hasData)
                    <div class="col-12">
                        <div class="alert alert-warning text-center">
                            {{ __('messages.data_will_be_updated_soon') }}
                        </div>
                    </div>
                @endif
            </div>
               <div class="text-end mt-4 mb-4 container ">

                <a href="javascript:history.back()" class="btn btn-success">

                    <i class="fas fa-arrow-left me-2"></i>

                   {{__('messages.previous')}}

                </a>

            </div>
        </div>
    </section>
@endsection

<style>
    .news-card {
        display: flex;
        align-items: center;
        gap: 20px;
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 25px;
        transition: .3s;
        margin-top: 0px !important;
    }

    .news-card:hover {
        transform: translateY(-5px);
    }

    .news-image {
    width: 100%;
    max-width: 350px;
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
}

    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news-content {
        flex: 1;
    }

    .news-title {
        font-size: 26px;
        font-weight: 700;
        color: #24324b;
        margin-bottom: 10px;
    }

    .news-desc {
        font-size: 16px;
        color: #666;
        margin-bottom: 15px;
    }

    .news-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .news-date {
        font-size: 14px;
        color: #888;
    }

    .news-btn {
        padding: 10px 25px;
        border-radius: 30px;
        background: #3156a3;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }

    .news-btn:hover {
        color: #fff;
        background: #25478d;
    }

    @media (max-width:768px) {

        .news-card {
            flex-direction: column;
            align-items: flex-start;
        }

        .news-image {
            width: 100%;
            height: 220px;
        }

        .news-footer {
            width: 100%;
        }

        .news-title {
            font-size: 22px;
        }

    }
</style>