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

    <section class="h-[250px] p-10 text-white bg-cover bg-center"
        style="background-image: url('{{ asset('assets/img/business-hours.jpg') }}');">
        <div class="h-full flex flex-col space-y-5 justify-center">
            <p class="text-3xl font-semibold">Goodwill Whistle Blower</p>
            <p class="text-xl">Let's Connect</p>
        </div>
    </section>

    <section class="-mt-16 mb-10 w-full flex justify-center">
        <div class="p-10 flex flex-col space-y-8 bg-white shadow-xl rounded-md w-[1116px] ">
            <div class=" text-[#004d6e] flex justify-between flex-row p-4 rounded-t-lg">
                <span class="text-2xl font-bold ">Head Office</span>
                <div class="flex flex-row justify-between">
                    <span>
                        Goodwill Complex, Hattisar Sadak, Kathmandu 44600
                    </span>
                </div>
            </div>
            @component('frontend.layouts.whistleblowerform')
            @endcomponent
            @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">
                                    <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>
    </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>
        $(document).ready(function() {

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

            $.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");

            // Initialize validation
            $("#whistleblowerForm").validate({
                rules: {
                    full_name: {
                        required: function(element) {
                            return !$('#is_anonymous').is(':checked');
                        },
                        lettersWithSpaces: true,
                        minlength: 3
                    },
                    email: {
                        required: function(element) {
                            return !$('#is_anonymous').is(':checked');
                        },
                        email: true
                    },
                    mobile: {
                        required: function(element) {
                            return !$('#is_anonymous').is(':checked');
                        },
                        digits: true,
                        nepalPhone: true,
                        minlength: 9,
                        maxlength: 10
                    },
                    subject: {
                        required: true
                    },
                    lodged: {
                        required: function(element) {
                            return $('#subject').val() === 'Human Resource';
                        }
                    },
                    issue: {
                        required: true
                    }
                },
                messages: {
                    full_name: {
                        required: "Please enter your full name",
                        lettersWithSpaces: "Only letters and spaces are allowed",
                        minlength: "Full name must be at least 3 characters long"
                    },
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    },
                    mobile: {
                        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"
                    },
                    subject: {
                        required: "Please select a subject"
                    },
                    lodged: {
                        required: "Please select whom the issue is lodged against"
                    },
                    issue: {
                        required: "Please describe the issue"
                    }
                },
                errorPlacement: function(error, element) {
                    error.addClass('text-red-600 text-xs mt-1');
                    error.insertAfter(element);
                },
                highlight: function(element) {
                    $(element).addClass('border-red-500');
                },
                unhighlight: function(element) {
                    $(element).removeClass('border-red-500');
                }
            });

            // Re-validate lodged field on subject change
            $('#subject').on('change', function() {
                if ($(this).val() !== 'Human Resource') {
                    $('#lodged').val('');
                }
                $('#lodged').valid();
            });

            // Toggle anonymous fields disable/enable for validation
            $('#is_anonymous').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#full_name, #email, #mobile').val('').valid();
                }
            });

        });
    </script>
@endpush