{{-- @extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h2>{{ $interview->title }}</h2>
    <h4>Interview with {{ $interview->interviewee }}</h4>
    @if ($interview->photo)
        <img src="{{ asset('storage/' . $interview->photo) }}" class="img-fluid mb-3" alt="{{ $interview->interviewee }}">
    @endif
    <p>{{ $interview->content }}</p>
    <a href="{{ route('interviews.index') }}" class="btn btn-secondary">Back to Interviews</a>
</div>
@endsection --}}
{{-- @extends('layouts.app')

@section('content')
    <div class="container">
        <h1>{{ $interview->title }}</h1>
        <h3>Interviewed by: {{ $interview->interviewee }}</h3>
        <img src="{{ $interview->photo }}" alt="Interview Image" class="img-fluid">
        <p>{{ $interview->content }}</p>
    </div>
@endsection --}}



@extends('layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

    <!-- Bootstrap JS (Includes Popper.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        .container {
            width: 1800px !important;
        }

        .card-img-top {
            width: 100%;
            height: 460px;
            object-fit: cover;
            -o-object-fit: cover;
            padding: 4px;

        }

        .poe {
            display: inline-block;
            /* Makes the container shrink to the width of the content */
            background-color: green;
            /* Red background for the text box */
            color: white;
            /* White text */
            padding: 5px 10px;
            /* Padding around the text */
            font-family: Arial, sans-serif;
            /* Font styling */
            font-size: 1rem;
            /* margin-bottom: 4rem; */
        }

        .he {
            font-family: AGaramondPro, Adobe Garamond Pro, garamond, Times, serif;
            font-size: 50px;
            line-height: 1;
            color: #205781;
        }

        .gele {
            font-family: AGaramondPro, Adobe Garamond Pro, garamond, Times, serif, italic !important;
            font-size: 12px !important
        }

        .dark-mode .container {
            background-color: black;
            color: white;
        }

        .dark-mode .card {
            background-color: rgb(53, 52, 52);
            color: white;

        }

        .dark-mode .gele {

            color: rgb(183, 180, 180) !important;
        }

        #news-cards {
            background-color: #3D3D3D !important;


            color: #b5b0b0;
        }

        #news-cards .source {

            color: #e6e1e1;
        }

        ul#news-cards {
            list-style-type: none;
            padding: 0;
            max-width: 1900px !important;
            margin: 0 auto;

            /* margin-top: -10px !important; */

        }

        ul#news-cards li {
            background-color: white;
            padding: 2px;
            margin: 5px 0;
        }

        ul#news-cards a {
            text-decoration: none;
            color: black;
            font-size: 1.2rem;
            font-family: Georgia, 'Times New Roman', Times, serif;
            margin-top: -10px !important;
        }

        ul#news-cards a:hover {
            /* transform: scale(1.05); */
            /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); */
            text-decoration: underline;
            /* Add underline on hover */

        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            ul#news-cards li {
                font-size: 12px !important;
            }
        }

        body.dark-mode #news-cards li {
            background-color: rgb(53, 52, 52) !important;
            color: #9ea0a1;
        }

        body.dark-mode #news-cards {
            background-color: black !important;
            color: #9ea0a1;
        }

        body.dark-mode #news-cards a {

            color: #9ea0a1;
        }

        .nav-link {
            text-transform: uppercase !important;
        }

        h1.name {
            /* writing-mode: vertical-lr;
                                                                                                                                                          text-orientation: mixed; */
            font-family: 'Playfair Display', serif;
            font-weight: normal;
            letter-spacing: -10.2px !important;
            font-size: 110px;
            margin-top: -1rem;

        }

        .summary-container {
            font-size: 28px !important;
            color: #333;
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .summary-container p {
            margin: 10px 0;
            color: #212020;
            font-style: italic;
            font-size: 20px;

        }

        .divider-3 {
            border-bottom: 3px solid red;
            border-top: 3px solid red;
            background-color: #161616;
            height: 0.2px !important;
            margin: 0.5em 0px 1.5em;
            width: 100px !important;
            margin: 1px auto;
            margin-bottom: -50px;
        }

        .divider-3 span {
            display: block;
            width: 50px;
            height: 10px;
            background-color: rgb(106, 106, 228);
            margin-top: -4px !important;
        }


        #butt {
            position: -webkit-sticky;
            /* For Safari */
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
            /* Ensures the header stays above other content */
            background-color: #fff;
            /* Set your desired background color */
            /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
            /* Optional: Adds a subtle shadow for better visibility */


        }

        .dark-mode .container {
            color: rgb(183, 180, 180) !important;
            background-color: #212020 !important;
            margin: 1px auto !important;
        }

        .interview-content span {
            all: unset;
            /* removes inline font-size, color, etc. */
            font-size: 14pt;
            /* set your own font size */
            color: inherit;
            /* set your own color */
        }

        .interview-content p {
            font-size: 14pt;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .interview-content strong {
            font-weight: bold;
        }
    </style>
    <div class="divider-3"></div>

    @include('partials.navbar')
    @include('articles.partials.home-css')

    {{-- <div class="text-center mt-4" id="butt">
        <a href="{{ route('home') }}" class="btn btn-outline-primary">← Back to Homepage</a>
        <br />
    </div> --}}
    <div class="container mt-5" style="width: 1900px !important">

        <div class=" mt-3">
            <div class="">
                <div class="card  p-4 ">

                    <div class="d-flex align-items-start">
                        <img src="{{ asset("storage/{$interview->photo}") }}" alt="Interview Image"
                            class="card-img-top me-3" style="width: 300px; height: 400px !important;">
                        <div>
                            <h2 class="he"
                                style="font-family: Escrow Condensed, Times New Roman, serif; color: #205781; font-size:50px ;">
                                {{ $interview->title }}</h2>
                            <div class="summary-container" style="font-style: italic">
                                {!! $interview->summary !!}
                            </div>
                            <p><img src="https://static.semafor.com/_next/static/media/icon-flagship.fce86feb.svg"
                                    style="width:19px"> <span style="color: blue">Estimated Reading
                                    Time:{{ $readingTime }}</span> |
                                <span style="color:green">Total Words:</span> {{ $wordCount }} |
                                <span class="text-mute" style="font-size: 0.9rem;mrgin-top:-1rem; color:brown">
                                    Published: {{ \Carbon\Carbon::parse($interview->created_at)->format('F j, Y') }}
                                </span>
                            </p>

                        </div>
                    </div>
                    <div class="interview-content" style="font-size: 18px">
                        {!! preg_replace('/<span[^>]*>/', '', preg_replace('/<\/span>/', '', $interview->content)) !!}
                    </div>

                    <br />
                    <div class=" mt-4">
                        <h2>Get in Touch!</h2>
                        <p>Want to hear more from <strong>{{ $interview->interviewee }}</strong>? Reach out at

                        </p>
                        <ul class="list-inline">
                            @if ($interview->twitter_handle)
                                <li class="list-inline-item">
                                    <a href="https://twitter.com/{{ $interview->twitter_handle }}" target="_blank"
                                        class="social-link text-decoration-none">
                                        <i class="bi bi-twitter" style="color: #1DA1F2 "></i>
                                    </a>
                                </li>
                            @endif
                            @if ($interview->linkedin_profile)
                                <li class="list-inline-item">
                                    <a href="{{ $interview->linkedin_profile }}" target="_blank"
                                        class="social-link text-decoration-none">
                                        <i class="bi bi-instagram" style="color:red"></i>
                                    </a>
                                </li>
                            @endif
                            @if ($interview->email)
                                <li class="list-inline-item">
                                    <a href="mailto:{{ $interview->email }}" class="social-link text-decoration-none">
                                        <i class="bi bi-envelope-fill" style="color:black"></i>
                                    </a>
                                </li>
                            @endif

                            @if ($interview->facebook_profile)
                                <li class="list-inline-item">
                                    <a href="{{ $interview->facebook_profile }}" class="social-link "><i
                                            class="bi bi-facebook" style="color:red"></i></a>
                                </li>
                            @endif
                            @if ($interview->phone_number)
                                <li class="list-inline-item">
                                    <a href="tel:{{ $interview->phone_number }}" class="social-link">
                                        <i class="bi bi-telephone" style="color: black;"></i>
                                    </a>
                                </li>
                            @endif
                        </ul>
                    </div>
                    @if ($interview->interviewer)
                        <p class="po" style="text-transform: capitalize; text-align: right; color:#41644A">
                            &copy;{{ $interview->interviewer }} {{ date('Y') }}
                        </p>
                    @endif
                </div>
                @if (session('success'))
                    <div class="alert alert-success" role="alert" style="background-color: #28a745; color: white;">
                        {{ session('success') }}
                    </div>
                @endif
                <br />
                {{-- @include('comments.index') --}}
                <br />
                <br />
                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $comments->links('pagination::bootstrap-5') }}
                </div>

            </div>
            <style>
                .poe {
                    display: inline-block;
                    /* Makes the container shrink to the width of the content */
                    background-color: #41644A;
                    /* Red background for the text box */
                    color: white;
                    /* White text */
                    padding: 5px 8px;
                    /* Padding around the text */
                    font-family: Arial, sans-serif;
                    /* Font styling */
                    font-size: 1rem;
                    width: 50%;

                    /* margin-bottom: 4rem; */
                }

                .list-inline-item {
                    margin-right: 20px;
                }

                .social-link {
                    font-size: 1.2rem;
                    color: #007bff;
                    display: inline-flex;
                    align-items: center;
                    transition: color 0.3s ease;
                }

                .social-link:hover {
                    color: #0056b3;
                    text-decoration: underline;
                }

                .social-link i {
                    margin-right: 8px;
                    font-size: 1.4rem;
                }

                /* Twitter link color */
                .twitter-link {
                    color: #1DA1F2 !important;
                    /* Official Twitter blue */
                }

                /* LinkedIn link color */
                .linkedin-link {
                    color: #0077B5;
                    /* Official LinkedIn blue */
                }

                /* Email link color */
                .email-link {
                    color: #D44638;
                    /* A common red color used for email icons */
                }
            </style>
            <div class="mt-5">
                <h3 class="text-center text-secondary">Recent Interviews</h3>
                <br />
                <div class="row">
                    @foreach ($interviews as $interview)
                        <div class="col-md-4">
                            <span style="text-transform: uppercase">
                                {{ \Carbon\Carbon::parse($interview->created_at)->format('F  Y') }}</span>
                            <div class="card mb-3 shadow-sm h-100">
                                <img src="{{ asset("storage/{$interview->photo}") }}" alt="Interview Image"
                                    class="card-img-top me-3" style="width: 100%;height:400px !important">
                                <p class="poe" style="margin-top:-4rem !important; text-transform: uppercase;">
                                    {{ $interview->interviewee }}</p>
                                <div class="card-body">
                                    <h5 class="card-title">{{ $interview->title }}</h5>
                                    <a href="{{ route('interviews.show', $interview->id) }}"
                                        class="btn btn-primary btn-sm">Read
                                        More</a>
                                </div>
                            </div>
                        </div>
                        <br />
                        <br />
                    @endforeach

                </div>
            </div>
            <br />
        </div>
    </div>
    <br />
@endsection

<br />
<script>
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');

        var moonIcon = document.getElementById('moon-icon');
        var sunIcon = document.getElementById('sun-icon');

        if (document.body.classList.contains('dark-mode')) {
            moonIcon.style.display = 'none';
            sunIcon.style.display = 'inline';
        } else {
            moonIcon.style.display = 'inline';
            sunIcon.style.display = 'none';
        }
    }
</script>