@extends('frontend.layouts.partials.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section class="shadow-xl">
        <div class="px-4 lg:px-10 py-8 flex justify-between items-center">
            <p class="lg:text-3xl text-[#005aab] font-bold pl-2 lg:pl-10 max-w-xl">"Let's Connect: Your Questions, Our
                Answers – Reach Out to Us Today!"</p>
            <img src="{{ asset('assets/img/contact-us.jpg') }}" class="w-1/4" alt="">
        </div>
    </section>

    <section>
        <div class="mt-12 px-12">
            <div class="flex flex-col space-y-5 lg:space-y-6  lg:space-x-12 lg:items-center ">
                <!-- form -->
                <div class="shadow-xl rounded-lg py-12 bg-white">
                    @component('frontend.layouts.contactform', ['branches' => $branches, 'products' => $products])
                    @endcomponent
                </div>

                @if ($teamMembers->isNotEmpty())
                    <section class="mx-10 flex flex-col items-center mb-12">
                        <div class="container mx-auto">
                            <div class="text-center mb-6 p-4">
                                <h3 class="text-[#EF5824] uppercase text-2xl mt-5 lg:mt-0 font-semibold">
                                    Team
                                </h3>
                                <h4 class="text-2xl lg:text-3xl font-bold">Some of the people you'll be working with</h4>

                                <div class="text-gray-900 text-3xl md:text-4xl font-bold"></div>
                            </div>

                            <div
                                class="flex flex-col lg:flex-row gap-6 flex-wrap justify-center mx-auto items-center text-center">

                                @foreach ($teamMembers as $team)
                                    <div
                                        class="overflow-hidden flex flex-col justify-between items-center gap-2 p-5 bg-gray-100 border-gray-100 rounded-2xl h-[480px] w-[300px] md:w-[400px] shadow-md mb-6">
                                        <div class="text-brandBlue leading-tight font-bold m-1 line-clamp-2">
                                            {{ $team->designation->name }}</div>

                                        <img src="{{ asset('storage' . $team->photo) }}"
                                            class="w-48 h-48 rounded-full object-cover border-gray-400 border-2">
                                        <div class="text-gray-900 text-lg font-bold leading-tight">{{ $team->name }}</div>
                                        {{-- <div class="text-gray-600 text-center leading-tight">Executive Manager</div> --}}
                                        <div
                                            class="flex flex-col items-start gap-3 mt-2 w-auto h-auto text-gray-600 leading-tight">
                                            <div class="flex space-x-3 items-center">
                                                <img src="{{ asset('assets/img/location-footer.png') }}" class="w-5"
                                                    alt="location" />
                                                <p class="max-w-xs">{{ $team->address }}</p>
                                            </div>
                                            <div class="flex space-x-3 items-center">
                                                <img src="{{ asset('assets/img/phone.png') }}" class="w-5"
                                                    alt="phone" />
                                                <p class="max-w-xs">{{ $team->contact }}</p>
                                            </div>
                                            <div class="flex space-x-3 items-center">
                                                <img src="{{ asset('assets/img/email(2).png') }}" class="w-5"
                                                    alt="email" />
                                                <p class="max-w-xs">{{ $team->email }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </section>
                @endif
            </div>
        </div>
    </section>

    <section class="w-full">

        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56536.26716072661!2d85.29305949177649!3d27.67042092711654!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1906629bf3b7%3A0xc696cf8906c9150c!2sGoodwill%20Finance%20Ltd.!5e0!3m2!1sen!2snp!4v1705993528532!5m2!1sen!2snp"
            class="w-full" height="400" style="border:0;" allowfullscreen="true" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>

    </section>
@endsection

@push('scripts')
    <script>
        //jquery validation
        $(document).ready(function() {

            $.validator.addMethod("lettersWithSpaces", function(value, element) {
                return this.optional(element) || /^[a-zA-Z]*\s+[a-zA-Z]*$/.test(value);
            }, "Only letters and spaces are allowed, with at least one space.");


            $.validator.addMethod("nepalPhone", function(value, element) {
                return this.optional(element) || /^(98|97|96)[0-9]{8}$|^01[0-9]{7}$/.test(value);
            }, "Please enter a valid Nepali phone number");

            $.validator.addMethod("accountNumber", function(value, element) {
                return this.optional(element) || /^[\d-]+$/.test(value);
            }, "Please enter a valid account number (digits and optional dashes only)");





            // Initialize validation
            $("#contactForm").validate({
                rules: {
                    full_name: {
                        required: true,
                        lettersWithSpaces: true,
                        minlength: 3
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    contact: {
                        required: true,
                        digits: true,
                        nepalPhone: true,
                        minlength: 9,
                        maxlength: 10
                    },
                    branch_id: {
                        required: true
                    },
                    product_id: {
                        required: true
                    },
                    account_number: {
                        accountNumber: true

                    },
                    feedback: {
                        required: true
                    }
                },
                messages: {
                    full_name: {
                        required: "Please enter your full name",
                        lettersWithSpaces: "You must type your full name"
                    },
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    },
                    contact: {
                        required: "Please enter your phone number",
                        digits: "Only numbers are allowed",
                        nepalPhone: "Please enter a valid Nepali phone number",
                        minlength: "Nepali phone number must be at least 9 digits long",
                        maxlength: "Nepali phone number can be at most 10 digits long"
                    },
                    branch_id: {
                        required: "Please select a branch.At least one branch should be selected"
                    },
                    product_id: {
                        required: "Please select a product.At least one product should be selected"
                    },
                    account_number: {
                        accountNumber: "Please enter a valid account number (digits with optional dashes)"
                    },
                    feedback: {
                        required: "Please enter your feedback"
                    }
                },

                onkeyup: function(element) {
                    this.element(element);
                },

                errorPlacement: function(error, element) {
                    error.addClass('text-[#ff0000] text-xs');
                    error.insertAfter(element);
                },

                highlight: function(element) {
                    $(element).css({
                        "border-color": "#f44336 ",
                        "box-shadow": "0 0 0 0.2rem rgba(244, 67, 54, 0.25)"
                    });
                },
                unhighlight: function(element) {
                    $(element).css({
                        "border-color": "#4CAF50 ",
                        "box-shadow": "0 0 0 0.2rem rgba(76, 175, 80, 0.25) "
                    });
                },
            });
        });
    </script>
@endpush