@extends('frontend.layouts.app')

@section('content')
    <!--==============================
    Breadcumb
============================== -->
    <div class="breadcumb-wrapper " data-bg-src="{{asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg')}}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Contact Us</h1>
                <p class="breadcumb-text">Linking life to learning</p>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{route('front.home')}}">Home</a></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!--==============================
    Contact Area
    ==============================-->
    <section class=" space-top space-extra-bottom ">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="info-style2">
                        <div class="info-icon"><img src="{{asset('frontend/coreui/assets/img/icon/c-b-1-1.svg')}}" alt="icon"></div>
                        <h3 class="info-title">Phone No</h3>
                        <p class="info-text"><a href="tel:04188116612" class="text-inherit">041-8811661-2</a> - <a href="tel:031150118552" class="text-inherit">0311-5011855</a>
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-style2">
                        <div class="info-icon"><img src="{{asset('frontend/coreui/assets/img/icon/c-b-1-2.svg')}}" alt="icon"></div>
                        <h3 class="info-title">Monday to Friday</h3>
                        <p class="info-text">08:00 AM to 02:30 PM</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-style2">
                        <div class="info-icon"><img src="{{asset('frontend/coreui/assets/img/icon/c-b-1-3.svg')}}" alt="icon"></div>
                        <h3 class="info-title">Email Address</h3>
                        <p class="info-text"><a href="mailto:principal.ucs@tuf.edu.pk"
                                                class="text-inherit">principal.ucs@tuf.edu.pk</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section><!--==============================
    Contact Area
    ==============================-->
    <section class=" space-extra-bottom ">
        <div class="container">
            <div class="row flex-row-reverse gx-60 justify-content-between">
                <div class="col-xl-auto">
                    <img src="{{asset('frontend/coreui/assets/img/about/con-2-1.jpg')}}" alt="girl" width="589" height="681">
                </div>

                <div class="col-xl col-xxl-6 align-self-center">
                    <div class="title-area">
                        <span class="sec-subtitle">Have Any questions? so plese</span>
                        <h2 class="sec-title">Feel Free to Contact!</h2>
                    </div>
                    <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}"
                          class="form-style3 layout2">
                        @csrf
                        <div class="row justify-content-between">
                            <div class="col-md-12form-group mb-3">
                                <label>Name <span class="required">(Required)</span></label>
                                <input name="name" id="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{old('name')}}">
                                @error('name')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group mb-3">
                                <label>Email Address <span class="required">(Required)</span></label>
                                <input name="email" id="email" type="email" class="form-control @error('email') is-invalid @enderror" value="{{old('email')}}">
                                @error('email')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group mb-3">
                                <label>Phone Number <span class="required">(Required)</span></label>
                                <input type="text" class="form-control @error('number') is-invalid @enderror"
                                       name="number" id="number" placeholder="03XX-XXXXXXX"
                                       data-inputmask="'mask': '0399-9999999'" value="{{old('number')}}"
                                       maxlength="12">
                                @error('number')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="col-12 form-group">
                                <label>Message <span class="required">(Required)</span></label>
                                <textarea name="message" id="message" cols="30" rows="10"
                                          placeholder="Type your message" class="form-control @error('message') is-invalid @enderror">{{old(('message'))}}</textarea>
                                @error('message')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            @include('frontend.layouts.myCaptcha')
                            <div class="col-auto form-group">
                                <button class="vs-btn" type="submit">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section><!--==============================
    Map Area
    ==============================-->
    <section class=" space-bottom">
        <div class="container">
            <div class="title-area">
                <h2 class="mt-n2">How To Find Us</h2>
            </div>
            <div class="map-style1">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4811.234350189244!2d73.07984860499518!3d31.495132567247232!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3922432170ff9e9f%3A0x73667a86c09854ab!2sUniversity%20Cambridge%20School!5e0!3m2!1sen!2s!4v1725428770218!5m2!1sen!2s"                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>
@endsection
@push('footer-scripts')
    <script src="{{ asset('manager/js/jquery.inputmask.bundle.js') }}"></script>

    <script>
        $(":input").inputmask();
    </script>

    {{-- Toastr : Script : Start --}}
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
    <script type="text/javascript">


        $(".btn-refresh").click(function(){
            $.ajax({
                type:'GET',
                url:'{{route('refresh_captcha')}}',
                success:function(data){
                    $(".captcha span").html(data.captcha);
                }
            });
        });


    </script>

@endpush