<?php if (isset($component)) { $__componentOriginal01ba5f520775ea736a63d25ef8d075cf = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal01ba5f520775ea736a63d25ef8d075cf = $attributes; } ?>
<?php $component = App\View\Components\Layouts\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('layouts.app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\Layouts\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['meta' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($school->meta_tags)]); ?>

    <style>
        :root {
            --mv-dur: 300ms;
            --mv-ease: cubic-bezier(.2, .7, .2, 1);
        }

        /* نفس إحساس الscale اللي في الكود الأصلي */
        .modal.fade .modal-dialog {
            transform: scale(.95);
            transition: transform var(--mv-dur) var(--mv-ease), opacity var(--mv-dur) var(--mv-ease);
        }

        .modal.show .modal-dialog {
            transform: scale(1);
        }

        /* زرار التشغيل فوق الصورة */
        .mv-thumb {
            border-radius: 1.5rem;
            /* ~ rounded-3xl */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
            transition: box-shadow .3s ease-in-out;
        }

        .mv-play {
            transition: transform .3s ease-in-out;
        }

        .mv-btn:focus-visible {
            outline: 3px solid rgba(99, 102, 241, .35);
            outline-offset: 4px;
        }

        .mv-btn:hover .mv-play {
            transform: scale(1.08);
        }
    </style>


    <!-- Hero Section -->
    <section id="hero" class="vh-100 d-flex align-items-center justify-content-center text-center bg-dark text-white"
        style="background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('<?php echo e(asset('storage/' . $school->banner)); ?>') center center no-repeat;
    background-size: cover;">
        <div>
            <img src="<?php echo e(asset('storage/' . $school->logo)); ?>" class="mb-4 rounded-circle w-25" alt="Logo">
            <h1 class="display-6 fw-bold"><?php echo e($school->title); ?></h1>
            <p class="lead text-dark"><?php echo e($school->description); ?></p>
        </div>
    </section>

    <!-- Vision Section -->
    <section id="vision" class="py-5 bg-light">
        <div class="container text-center">
            <h1 class="fw-bold mb-4"><?php echo app('translator')->get('Our Vision'); ?></h1>
            <p class="mb-5"><?php echo e($school->vision); ?></p>
            <div class="row g-4">
                <?php if($school->clarity): ?>
                    <div class="col-md-4">
                        <div class="card h-100 shadow cursor-pointer">
                            <div class="card-body">
                                <i class="bi bi-eye fs-1 text-primary mb-3"></i>
                                <h5 class="card-title fw-bold"><?php echo app('translator')->get('Clarity'); ?></h5>
                                <p class="card-text"><?php echo e($school->clarity); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if($school->technology): ?>
                    <div class="col-md-4">
                        <div class="card h-100 shadow cursor-pointer">
                            <div class="card-body">
                                <i class="bi bi-gear fs-1 text-primary mb-3"></i>
                                <h5 class="card-title fw-bold"><?php echo app('translator')->get('Technology'); ?></h5>
                                <p class="card-text"> <?php echo e($school->technology); ?> </p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if($school->communication): ?>
                    <div class="col-md-4">
                        <div class="card h-100 shadow cursor-pointer">
                            <div class="card-body">
                                <i class="bi bi-globe2 fs-1 text-primary mb-3"></i>
                                <h5 class="card-title fw-bold"><?php echo app('translator')->get('Communication'); ?></h5>
                                <p class="card-text"> <?php echo e($school->communication); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>


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

    <!-- about school -->
    <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative overflow-hidden ps-5 pt-5 h-100" style="min-height: 400px;">
                        <img class="position-absolute w-100 h-100" src="<?php echo e(asset('storage/' . $school->about_image)); ?>"
                            alt="" style="object-fit: cover;">
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp pt-5" data-wow-delay="0.5s">
                    <div class="h-100">
                        <h3 class="text-primary text-uppercase mb-2 "><?php echo app('translator')->get('About schoo'); ?>l</h3>
                        <p class="fs-5" style="color: black">
                            <?php echo e($school->about); ?>

                        </p>

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

    <!-- Gallery Section -->
    <section id="gallery" class="py-5 bg-light">
        <div class="container text-center">
            <h1 class="fw-bold mb-4"><?php echo app('translator')->get('Our Gallery'); ?></h1>
            <p class="mb-5"><?php echo e($school->gallery_description); ?></p>
            <div class="row g-4">
                <!-- Image Item -->
                <?php $__currentLoopData = $school->images(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="col-sm-6 col-md-3">
                        <div class="card border-0 shadow-sm cursor-pointer" data-bs-toggle="modal"
                            data-bs-target="#galleryModal" data-image="<?php echo e(asset('storage/' . $image->file)); ?>">
                            <img src="<?php echo e(asset('storage/' . $image->file)); ?>"
                                class="card-img-top rounded w-100 image-school" alt="Gallery 1">
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <main class="container py-5">
        <div class="row g-4">
            <?php $__currentLoopData = $school->videos(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $video): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 d-flex justify-content-center">
                    <button type="button"
                        class="position-relative d-flex justify-content-center align-items-center border-0 bg-transparent mv-btn"
                        data-bs-toggle="modal" data-bs-target="#videoModal<?php echo e($index); ?>"
                        aria-label="Watch the video">

                        <!-- Placeholder for JS thumbnail -->
                        <canvas class="video-thumb img-fluid rounded-4 shadow"
                            data-src="<?php echo e(asset('storage/' . $video->file)); ?>">
                        </canvas>

                        <!-- Play button overlay -->
                        <svg class="position-absolute mv-play" xmlns="http://www.w3.org/2000/svg" width="72"
                            height="72">
                            <circle cx="36" cy="36" r="36" fill="#ffffff" fill-opacity=".9" />
                            <path
                                d="M44 36a1 1 0 0 0-.427-.82l-10-7A1 1 0 0 0 32 29v14a1 1 0 0 0 1.573.82l10-7A.995.995 0 0 0 44 36Z"
                                fill="#6366F1" />
                        </svg>
                    </button>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </main>

    <!-- Modals -->
    <?php $__currentLoopData = $school->videos(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $video): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="modal fade" id="videoModal<?php echo e($index); ?>" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content border-0 rounded-4 shadow-lg bg-black">
                    <div class="ratio ratio-16x9 rounded-4 overflow-hidden">
                        <video preload="metadata" loop controls playsinline>
                            <source src="<?php echo e(asset('storage/' . $video->file)); ?>" type="video/mp4" />
                        </video>
                    </div>
                </div>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

    <!-- Single Reusable Gallery Modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-white border-0 text-center position-relative">

                <!-- Close Button -->
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"
                    aria-label="Close"></button>

                <!-- Image -->
                <img id="galleryModalImage" src="" class="rounded image-school-popup" alt="Gallery Large">
            </div>
        </div>
    </div>


    <!-- Contact Us Section -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <h1 class="fw-bold text-center mb-4">Contact Us</h1>
            <p class="text-center mb-5">We would love to hear from you! Reach out for inquiries or more information.
            </p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form class="p-4 shadow rounded bg-white">
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter your name">
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone</label>
                            <input type="text" id="phone" class="form-control"
                                placeholder="Enter your Phone Number">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" id="email" class="form-control"
                                placeholder="Enter your email">
                        </div>
                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <input type="text" id="subject" class="form-control"
                                placeholder="Enter your Subject">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Your Message</label>
                            <textarea id="message" class="form-control" rows="5" placeholder="Write your message"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("canvas.video-thumb").forEach((canvas) => {
                const videoSrc = canvas.dataset.src;
                const video = document.createElement("video");

                video.src = videoSrc;
                video.muted = true; // required for autoplay in some browsers
                video.currentTime = 2; // grab frame at 2s (adjust as needed)

                video.addEventListener("loadeddata", () => {
                    const ctx = canvas.getContext("2d");
                    canvas.width = video.videoWidth / 2; // resize to half for performance
                    canvas.height = video.videoHeight / 2;
                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                });
            });
        });
    </script>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal01ba5f520775ea736a63d25ef8d075cf)): ?>
<?php $attributes = $__attributesOriginal01ba5f520775ea736a63d25ef8d075cf; ?>
<?php unset($__attributesOriginal01ba5f520775ea736a63d25ef8d075cf); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal01ba5f520775ea736a63d25ef8d075cf)): ?>
<?php $component = $__componentOriginal01ba5f520775ea736a63d25ef8d075cf; ?>
<?php unset($__componentOriginal01ba5f520775ea736a63d25ef8d075cf); ?>
<?php endif; ?>
<?php /**PATH D:\work\logic\virginia\resources\views/front/pages/school.blade.php ENDPATH**/ ?>