@extends('layouts/default')

{{-- Page title --}}
@section('title')

    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/owl.carousel/css/owl.carousel.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/owl.carousel/css/owl.theme.css') }}">
    <style>
        /* CRITICAL: Ensures the carousel images are responsive and the container scales */
        #owl-demo {
            height: 400px; /* Base height for desktop */
            overflow: hidden;
        }

        #owl-demo .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Mobile adjustment for carousel height */


        /* Tabbular Fix: Ensure tabs stack on mobile */
    </style>



@stop

{{-- slider --}}
@section('top')
    <div id="owl-demo" class="owl-carousel owl-theme">
        <div class="item"><img src="{{ asset('assets/images/help40.jpg') }}" alt="slider-image"></div>
        <div class="item"><img src="{{ asset('assets/images/help50.jpg') }}" alt="slider-image"></div>
        <div class="item"><img src="{{ asset('assets/images/help60.jpg') }}" alt="slider-image"></div>
        <div class="item"><img src="{{ asset('assets/images/help80.jpeg') }}" alt="slider-image"></div>
    </div>
    {{-- START: Menu Toggle Button (Added here, fixed position via CSS) --}}
    <button type="button" class="btn btn-primary" id="mobile-menu-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    {{-- END: Menu Toggle Button --}}
@stop

{{-- content --}}
@section('content')
    <div class="container">
        {{-- ... (Your content rows remain here) ... --}}

        <div class="row">
            <div class="text-center">
                <h3 class="border-primary"><span class="heading_border bg-primary">Our Services</span></h3>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="box">
                    <div class="box-icon">
                        <i class="livicon icon" data-name="desktop" data-size="55" data-loop="true" data-c="#01bc8c" data-hc="#01bc8c"></i>
                    </div>
                    <div class="info">
                        <h3 class="success text-center"> Technical Support & Maintenance </h3>
                        <p>  These requests typically involve issues that need to be resolved to ensure smooth operation of IT services. They can include:

                            Hardware Repairs: Issues with computers, printers, or other equipment.<br>
                            Software Updates: Requests to update software applications or operating systems.<br>
                            System Performance: Problems like slow performance or system crashes.
                            User Access Issues: Problems with user accounts, permissions, or logins.

                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="box">
                    <div class="box-icon box-icon1">
                        <i class="livicon icon1" data-name="gears" data-size="55" data-loop="true" data-c="#418bca" data-hc="#418bca"></i>
                    </div>
                    <div class="info">
                        <h3 class="primary text-center">Network & Insfrastracture</h3>
                        <p> Network Requests
                            Network requests focus on connectivity and network-related services. Common requests include:

                            Network Connectivity Issues: Problems connecting to Wi-Fi or local networks.
                            VPN Setup: Requests to set up or troubleshoot Virtual Private Networks.
                            Firewall Configurations: Adjustments to network security settings.
                            Network Hardware Installation: Requests for installing routers, switches, or access points.</p>


                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="box">
                    <div class="box-icon box-icon2">
                        <i class="livicon icon1" data-name="doc-portrait" data-size="55" data-loop="true" data-c="#f89a14" data-hc="#f89a14"></i>
                    </div>
                    <div class="info">
                        <h3 class="warning text-center">Software Developement </h3>
                        <p>
                            These requests involve the installation and configuration of software applications. They can include:

                            New Software development: Requests to develop new applications or tools.
                            License Management: Handling software licenses and renewals.
                            Configuration: Setting up software according to user needs or organizational standards.
                            Training Requests: Asking for training on new software tools.</p>


                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="box">
                    <div class="box-icon box-icon3">
                        <i class="livicon icon1" data-name="folder-open" data-size="55" data-loop="true" data-c="#FFD43C" data-hc="#FFD43C"></i>
                    </div>
                    <div class="info">
                        <h3 class="green text-center">System Administration</h3>
                        <p> Domain Request for Installing the Specific System of the university so Desired Domain Name: The specific domain name being requested.
                            Purpose: Reason for the domain (e.g., new project, website, application).
                            Duration: How long the domain is needed (e.g., one year, multi-year).
                            Registrar Information: If applicable, details about the registrar being used</p>

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

        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box" style="text-align: left;">
                <div class="box-icon box-icon3">
                    <i class="livicon icon1" data-name="folder-open" data-size="55" data-loop="true" data-c="#FFD43C" data-hc="#FFD43C"></i>
                </div>
                <div class="info">

                    <h3 class="green text-center">E-Learning & Digital Literacy</h3>
                    <p>
                        Domain Request for Installing the Specific System of the university so Desired Domain Name: The specific domain name being requested.<br>
                        Purpose: Reason for the domain (e.g., new project, website, application).<br>
                        Duration: How long the domain is needed (e.g., one year, multi-year).<br>
                        Registrar Information: If applicable, details about the registrar being used
                    </p>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="box" style="text-align: left;">
                <div class="box-icon box-icon3">
                    <i class="livicon icon1"
                       data-name="laptop"
                       data-size="45"
                       data-loop="true"
                       data-c="#FFD43C"
                       data-hc="#FFD43C">
                    </i>

                </div>
                <div class="info">

                    <h3 class="green text-center">Training & Consultancy</h3>
                    <p>
                        Domain Request for Installing the Specific System of the university so Desired Domain Name: The specific domain name being requested.<br>
                        Purpose: Reason for the domain (e.g., new project, website, application).<br>
                        Duration: How long the domain is needed (e.g., one year, multi-year).<br>
                        Registrar Information: If applicable, details about the registrar being used
                    </p>

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

    </div>

    <div class="container">
        <div class="text-center mb-4">
            <h3 class="border-success">
                <span class="heading_border bg-success">Contact Persons</span>
            </h3>
        </div>

        <div class="row g-4"> <!-- g-4 adds spacing between columns and rows -->

            <!-- ICT Director -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(127,248,64,0.04); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">ICT Directorate Director</font> </h3>
                    <h4>Lijalem Megibaru</h4>
                    <p>Phone: 0913485519<br>Email: lijalemegibaru@gmail.com</p>
                </div>
            </div>
            <input type="text" name="username" value="JohnDoe" style="visibility:hidden;">
            <!-- Maintenance Team Leader -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(126,248,47,0.04); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">Maintenance Team Leader</font></h3>
                    <h4>Gashaw Adane (Team Leader)</h4>
                    <p>Phone: 0913577797<br>Email: gaad.dmuict@gmail.com</p>
                </div>
            </div>


            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(234,227,17,0.07); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">Network Team Leader</font></h3>
                    <h4>Belayneh Mamo</h4>
                    <p>Phone: 0913199115<br>Email: belaynehmamo@gmail.com</p>
                </div>
            </div>

            <input type="text" name="username" value="JohnDoe" style="visibility:hidden;">

            <!-- Software Team Leader -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(186,234,69,0.04); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">Software Development Team Leader</font></h3>
                    <h4>Getachew Kumie</h4>
                    <p>Phone: 0912400524<br>Email: getachewkumie@gmail.com</p>
                </div>
            </div>
            <input type="text" name="username" value="JohnDoe" style="visibility:hidden;">
            <!-- System Admin Team Leader -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(158,255,99,0.02); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">System Adminstrator Team Leader</font></h3>
                    <h4>Nigstie Abebe</h4>
                    <p>Phone: 0978401414</p>
                </div>
            </div>
            <input type="text" name="username" value="JohnDoe" style="visibility:hidden;">
            <!-- Teaching Learning -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(0,121,253,0.01); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">Teaching Learning Team Leader</font></h3>
                    <h4>Tsehaynesh Getachew</h4>
                    <p>Phone: 0913087683<br>Email: Tsehaynesh@gmail.com</p>
                </div>
            </div>
            <input type="text" name="username" value="JohnDoe" style="visibility:hidden;">
            <!-- Infrastructure -->
            <div class="col-sm-12 col-md-4">
                <div class="card p-3 mb-4" style="border: 2px solid rgba(0,123,255,0); border-radius: 5px; background-color: #f8f9fa; height: 200px;">
                    <h3><font color="#a52a2a">Infrastructure Team Leader</font></h3>
                    <h4>Gizachew Yayeh</h4>
                    <p>Phone: 0910178432</p>
                </div>
            </div>

        </div>

    </div>

    <br>
    <br>
    <!-- Video Section -->
    <div class="container-fluid mt-5 mb-5 px-0">
        <div class="video-container">
            <video id="aboutVideo" class="w-100" preload="metadata" poster="{{ asset('assets/images/tumb.jpg') }}">
                <source src="{{ asset('assets/images/index.mp4') }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="play-button" id="playButton">
                <i class="fa fa-play"></i>
            </div>
        </div>
    </div>

    <!-- Video Section -->
    {{--<div class="container-fluid mt-5 mb-5 px-0">--}}
    {{--<div class="video-container">--}}
    {{--<video id="aboutVideo" class="w-100" poster="{{ asset('assets/images/video-thumbnail.jpg') }}">--}}
    {{--<source src="{{ asset('assets/images/index.mp4') }}" type="video/mp4">--}}
    {{--Your browser does not support the video tag.--}}
    {{--</video>--}}
    {{--<div class="play-button" id="playButton">--}}
    {{--<i class="fa fa-play"></i>--}}
    {{--</div>--}}
    {{--</div>--}}
    {{--</div>--}}
    <style>
        .video-container {
            position: relative;
            width: 80%;            /* reduce width to 80% of container */
            max-width: 700px;      /* limit max width */
            margin: 0 auto;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
        }

        .video-container video {
            width: 100%;
            height: 360px;         /* reduce height */
            object-fit: cover;
            border-radius: 15px;
            display: block;
        }

        /* Play button style */
        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 50px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .play-button:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        /* Make it smaller on mobile */
        @media (max-width: 768px) {
            .video-container {
                width: 95%;
                max-width: 400px;
            }

            .video-container video {
                height: 220px;
            }

            .play-button {
                font-size: 35px;
                padding: 15px;
            }
        }


    </style>
@stop

{{-- footer scripts --}}
@section('footer_scripts')
    <script type="text/javascript" src="{{ asset('assets/vendors/owl.carousel/js/owl.carousel.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/frontend/carousel.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/frontend/index.js') }}"></script>
    {{-- START: Custom Script for Menu Toggle --}}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const video = document.getElementById('aboutVideo');
            const playButton = document.getElementById('playButton');

            playButton.addEventListener('click', function() {
                if (video.paused) {
                    video.play();
                    playButton.style.display = 'none';
                }
            });

            video.addEventListener('ended', function() {
                playButton.style.display = 'block';
            });
        });
    </script>


    <script type="text/javascript">
        $(document).ready(function() {
            var $toggleBtn = $('#mobile-menu-toggle');

            $toggleBtn.on('click', function(e) {
                e.preventDefault();
                // This will add or remove the 'menu-open' class to the body element.
                // The main layout CSS must define what happens when 'body.menu-open' is active.
                $('body').toggleClass('menu-open');
            });

            // Clean up the body class if the screen size exceeds the mobile breakpoint
            $(window).on('resize', function() {
                if ($(window).width() >= 992) {
                    $('body').removeClass('menu-open');
                }
            });
        });
    </script>
    {{-- END: Custom Script for Menu Toggle --}}
@stop