@extends('layouts.master')
@section('title', 'Contact Us')
@section('content')

    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('assets/img/inner/breadcrumb.jpg');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Contact Us</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li>
                        <a href="{{ route('home') }}">
                            Home
                        </a>
                    </li>
                    <li>
                        <i class="fa-solid fa-chevron-right"></i>
                    </li>
                    <li>
                        Contact Us
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Contact Section Start -->
    <section class="bt-contact-section section-padding fix">
        <div class="container">
            <div class="contact-wrapper">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="bt-contact-content">
                            <div class="section-title mb-0">
                                <h6 class="wow fadeInUp">Contact Information</h6>
                            </div>
                            <ul class="list-unstyled ps-0 my-4 wow fadeInUp" data-wow-delay=".4s">
                                <!-- Phone -->
                                <li class="d-flex align-items-start mb-4 bg-light p-3 rounded shadow-sm">
                                    <div class="icon text-primary me-3 flex-shrink-0 mt-1">
                                        <i class="fa-light fa-phone fa-lg"></i>
                                    </div>
                                    <div class="content">
                                        <h5 class="fw-bold mb-1 fs-6 text-muted text-uppercase">Phone No:</h5>
                                        <a href="tel:+94112301982"
                                            class="text-decoration-none fw-semibold fs-5 text-dark hover-primary">(+94) 112
                                            301 982</a>
                                    </div>
                                </li>

                                <!-- Email -->
                                <li class="d-flex align-items-start mb-4 bg-light p-3 rounded shadow-sm">
                                    <div class="icon text-primary me-3 flex-shrink-0 mt-1">
                                        <i class="fa-light fa-envelope fa-lg"></i>
                                    </div>
                                    <div class="content">
                                        <h5 class="fw-bold mb-1 fs-6 text-muted text-uppercase">Write email</h5>
                                        <a href="mailto:study@iccslk.org"
                                            class="text-decoration-none fw-semibold fs-5 text-dark hover-primary">study@iccslk.org</a>
                                    </div>
                                </li>

                                <!-- Location -->
                                <li class="d-flex align-items-start mb-4 bg-light p-3 rounded shadow-sm">
                                    <div class="icon text-primary me-3 flex-shrink-0 mt-1">
                                        <i class="fa-light fa-location-dot fa-lg"></i>
                                    </div>
                                    <div class="content">
                                        <h5 class="fw-bold mb-1 fs-6 text-muted text-uppercase">Location:</h5>
                                        <p class="mb-0 fw-medium text-secondary lh-base">
                                            <span class="text-dark fw-semibold d-block">ICCSSL Campus</span>
                                            No. 546/4, Galle Road, Colombo 3
                                        </p>
                                    </div>
                                </li>

                                <!-- Hours -->
                                <li class="d-flex align-items-start mb-4 bg-light p-3 rounded shadow-sm">
                                    <div class="icon text-primary me-3 flex-shrink-0 mt-1">
                                        <i class="fa-light fa-clock fa-lg"></i>
                                    </div>
                                    <div class="content w-100">
                                        <h5 class="fw-bold mb-1 fs-6 text-muted text-uppercase">Open Hours:</h5>
                                        <div class="row g-1 text-secondary fw-medium lh-base">
                                            <div class="col-sm-5 col-md-4 text-dark">Monday - Friday:</div>
                                            <div class="col-sm-7 col-md-8">9:00 am - 4:30 pm</div>
                                            <div class="col-sm-5 col-md-4 text-dark">Saturday - Sunday:</div>
                                            <div class="col-sm-7 col-md-8 text-danger fw-semibold">Closed</div>
                                        </div>
                                    </div>
                                </li>

                                <!-- Socials -->
                                <li class="d-flex align-items-start mb-0 bg-light p-3 rounded shadow-sm">
                                    <div class="icon text-primary me-3 flex-shrink-0 mt-1">
                                        <i class="fa-light fa-share-nodes fa-lg"></i>
                                    </div>
                                    <div class="content">
                                        <h5 class="fw-bold mb-2 fs-6 text-muted text-uppercase">Social Media:</h5>
                                        <div class="d-flex flex-wrap gap-2 social-icon">
                                            <a href="https://www.facebook.com/profile.php?id=100063689881402"
                                                class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;" aria-label="Facebook">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <a href="https://www.instagram.com/iccs_sri_lanka/"
                                                class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;" aria-label="Instagram">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                            <a href="#"
                                                class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;" aria-label="Twitter">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                            <a href="#"
                                                class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;" aria-label="LinkedIn">
                                                <i class="fab fa-linkedin-in"></i>
                                            </a>
                                            <a href="#"
                                                class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 36px; height: 36px;" aria-label="YouTube">
                                                <i class="fab fa-youtube"></i>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="bt-contact-items pt-2 ">
                            <h2 class="wow fadeInUp" data-wow-delay=".2s" style="padding-bottom: 10px;">Keep In Touch, We
                                Want To Hear From You</h2>
                            <div class="section-title mb-0">
                                <br>
                                <h6 class="wow fadeInUp">Send Us Message</h6>
                            </div>
                            <form action="#" id="contact-form" class="contact-form-box p-2 p-md-4">
                                <div class="row g-4">

                                    <div class="col-md-6 wow fadeInUp" data-wow-delay=".3s">
                                        <div class="form-clt position-relative">
                                            <label for="first_name"
                                                class="form-label fw-semibold text-secondary d-flex align-items-center small mb-2">
                                                First Name <i class="fa-solid fa-asterisk text-danger ms-1"
                                                    style="font-size: 0.6rem;"></i>
                                            </label>
                                            <input type="text" name="first_name" id="first_name"
                                                class="form-control form-control-lg bg-light border-0 px-3 py-2.5 fs-6 rounded shadow-sm"
                                                placeholder="Enter your first name" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 wow fadeInUp" data-wow-delay=".3s">
                                        <div class="form-clt">
                                            <label for="last_name"
                                                class="form-label fw-semibold text-secondary d-flex align-items-center small mb-2">
                                                Last Name <i class="fa-solid fa-asterisk text-danger ms-1"
                                                    style="font-size: 0.6rem;"></i>
                                            </label>
                                            <input type="text" name="last_name" id="last_name"
                                                class="form-control form-control-lg bg-light border-0 px-3 py-2.5 fs-6 rounded shadow-sm"
                                                placeholder="Enter your last name" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 wow fadeInUp" data-wow-delay=".5s">
                                        <div class="form-clt">
                                            <label for="email2"
                                                class="form-label fw-semibold text-secondary d-flex align-items-center small mb-2">
                                                Your Email <i class="fa-solid fa-asterisk text-danger ms-1"
                                                    style="font-size: 0.6rem;"></i>
                                            </label>
                                            <input type="email" name="email" id="email2"
                                                class="form-control form-control-lg bg-light border-0 px-3 py-2.5 fs-6 rounded shadow-sm"
                                                placeholder="name@example.com" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6 wow fadeInUp" data-wow-delay=".6s">
                                        <div class="form-clt">
                                            <label for="phone"
                                                class="form-label fw-semibold text-secondary d-flex align-items-center small mb-2">
                                                Phone Number <i class="fa-solid fa-asterisk text-danger ms-1"
                                                    style="font-size: 0.6rem;"></i>
                                            </label>
                                            <input type="tel" name="phone" id="phone"
                                                class="form-control form-control-lg bg-light border-0 px-3 py-2.5 fs-6 rounded shadow-sm"
                                                placeholder="e.g., +94 XX XXX XXXX" required>
                                        </div>
                                    </div>

                                    <div class="col-12 wow fadeInUp" data-wow-delay=".8s">
                                        <div class="form-clt">
                                            <label for="message"
                                                class="form-label fw-semibold text-secondary d-flex align-items-center small mb-2">
                                                Message Here <i class="fa-solid fa-asterisk text-danger ms-1"
                                                    style="font-size: 0.6rem;"></i>
                                            </label>
                                            <textarea name="message" id="message" rows="5"
                                                class="form-control bg-light border-0 px-3 py-3 fs-6 rounded shadow-sm"
                                                placeholder="Type your inquiry details here..." required></textarea>
                                        </div>
                                    </div>

                                    <div class="col-12 wow fadeInUp mt-4" data-wow-delay=".9s">
                                        <button type="submit"
                                            class="btn btn-primary btn-lg theme-btn px-4 py-3 fw-bold shadow-sm d-inline-flex align-items-center justify-content-center w-100 w-sm-auto">
                                            Send Message
                                            <i class="far fa-arrow-right ms-2" aria-hidden="true"></i>
                                        </button>
                                    </div>

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

    <div class="map-area">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4698.424379004002!2d79.84899757568127!3d6.90124641865694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2595e2977d5f1%3A0x2811e1fd2b718d64!2sInstitute%20of%20Chartered%20Corporate%20Secretaries!5e1!3m2!1sen!2slk!4v1783758457895!5m2!1sen!2slk"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="strict-origin-when-cross-origin"></iframe>
    </div>

    <div class="marquee-section">
        <div class="mycustom-marque theme-green-bg-1">
            <div class="scrolling-wrap">
                @foreach ($programCategories as $programCategory)
                    <div class="comm">
                        <div class="cmn-textslide text-color-2">
                            <img src="assets/img/home-1/icon1.png" alt="img">
                            {{ $programCategory->name }}
                        </div>
                    </div>
                @endforeach
                @foreach ($programCategories as $programCategory)
                    <div class="comm">
                        <div class="cmn-textslide text-color-2">
                            <img src="assets/img/home-1/icon1.png" alt="img">
                            {{ $programCategory->name }}
                        </div>
                    </div>
                @endforeach
                @foreach ($programCategories as $programCategory)
                    <div class="comm">
                        <div class="cmn-textslide text-color-2">
                            <img src="assets/img/home-1/icon1.png" alt="img">
                            {{ $programCategory->name }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection