@extends('user.layout')
@section('content')
    <div class="contact pt-2 overflow-hidden">
        <div class="container-fluid container-lg mb-5">
            <div class="row row-cols-1 row-cols-md-2 my-5 g-5">
                <div class="col">
                    <div class="card border-0 py-2" style="background-color: #ecf4f1;">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <div class="rounded-circle mb-3" style="background-color: #d0e4db; padding: 10px 17px 10px 17px;">
                                <i class="bi bi-telephone primary fs-3"></i>
                            </div>

                            <h4 class="card-title fw-bolder">Call Us Now</h4>
                            @php
                                $userTz = session('user_timezone', 'Asia/Dhaka');
                                $start = \Carbon\Carbon::createFromTimeString('09:00', 'Asia/Dhaka')->setTimezone($userTz)->format('H:i');
                                $end = \Carbon\Carbon::createFromTimeString('18:00', 'Asia/Dhaka')->setTimezone($userTz)->format('H:i');
                            @endphp
                            
                            <p class="card-text fw-semibold secondary">
                                Call us any time from <span id="opening-start" class="primary">{{ $start }}</span> till <span id="opening-end" class="primary">{{ $end }}</span>
                                (<span id="opening-timezone">{{ $userTz }}</span>) | Sat–Thu
                            </p>

                            <a class="btn btn-custom" href="tel:{{ $contactInfo->phone[0] }}" role="button"
                                style="width: 200px; color: white !important;">
                                <span>CALL NOW</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card border-0 py-2" style="background-color: #ecf4f1;">
                        <div class="card-body d-flex flex-column justify-content-center align-items-center">
                            <div class="rounded-circle mb-3"
                                style="background-color: #d0e4db; padding: 10px 17px 10px 17px;">
                                <i class="bi bi-envelope primary fs-3"></i>
                            </div>

                            <h4 class="card-title fw-bolder">Mail Us Now</h4>
                            <p class="card-text fw-semibold secondary">Email us anytime, we usually reply within 24 hours</p>

                            <a class="btn btn-custom" href="mailto:{{ $contactInfo->email[0] }}" role="button"
                                style="width: 200px; color: white !important;">
                                <span>MAIL NOW</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row row-cols-1 row-cols-md-2 contact-container py-4 rounded-2">
                <div class="col">
                    <div class="row gx-3 contact-details py-2">
                        <div class="col-1">
                            <div class="h-100 position-relative">
                                <div class="vr h-100 position-absolute top-50 start-50 translate-middle"></div>
                                <i
                                    class="bi bi-telephone rounded-circle px-2 py-1 mt-4 position-absolute top-0 start-50 translate-middle timeline-icon"></i>
                            </div>
                        </div>
                        <div class="col-11">
                            <div class="mb-4">
                                <h5>Phone</h5>
                                @foreach ($contactInfo->phone ?? [] as $phone)
                                    <h6 class="" style="font-size: small;">
                                        <a class="text-decoration-none"
                                            href="tel:{{ $phone }}">{{ $phone }}</a>
                                    </h6>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="h-100 position-relative">
                                <div class="vr h-100 position-absolute top-50 start-50 translate-middle"></div>
                                <i
                                    class="bi bi-envelope rounded-circle px-2 py-1 mt-4 position-absolute top-0 start-50 translate-middle timeline-icon"></i>
                            </div>
                        </div>
                        <div class="col-11">
                            <div class="mb-4">
                                <h5>Email</h5>
                                @foreach ($contactInfo->email ?? [] as $email)
                                    <h6 style="font-size: small;">
                                        <a class="text-decoration-none"
                                            href="mailto:{{ $email }}">{{ $email }}</a>
                                    </h6>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-1">
                            <div class="h-100 position-relative">
                                <div class="vr h-100 position-absolute top-50 start-50 translate-middle"></div>
                                <i
                                    class="bi bi-geo-alt rounded-circle px-2 py-1 mt-4 position-absolute top-0 start-50 translate-middle timeline-icon"></i>
                            </div>
                        </div>
                        <div class="col-11">
                            <div class="mb-4">
                                <h5>Address</h5>
                                @foreach ($contactInfo->address ?? [] as $address)
                                    <h6 class="" style="font-size: small;">
                                        <a class="text-decoration-none" href="{{ $contactInfo->map_direction[0] }}"
                                            target="_blank">{{ $address }}</a>
                                    </h6>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-1">
                            <div class="h-100 position-relative">
                                <div class="vr h-100 position-absolute top-50 start-50 translate-middle"></div>
                                <i
                                    class="bi bi-link-45deg rounded-circle px-2 py-1 mt-4 position-absolute top-0 start-50 translate-middle timeline-icon"></i>
                            </div>
                        </div>
                        <div class="col-11">
                            <div>
                                <h5>Social Media Link</h5>
                                <div class="fs-4 d-flex justify-content-start gap-3 social-icon mt-3">
                                    @foreach ($socialMedias as $social)
                                        <a href="{{ $social->link }}" target="_blank" rel="noopener noreferrer">
                                            <i class="bi bi-{{ $social->icon }} fs-3"></i>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card border-0 m-4 m-lg-0">
                        <div class="card-body">
                            <form action="{{ route('contact-store') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                @if ($errors->any())
                                    <div class="alert alert-danger" role="alert">{{ $errors->first() }}</div>
                                @endif

                                <div class="mb-3">
                                    <input type="text" class="form-control rounded-5" name="name" value="{{ old('name') }}" placeholder="Name"
                                        required>
                                </div>

                                <div class="mb-3">
                                    <input type="text" class="form-control rounded-5" name="phone" value="{{ old('phone') }}" placeholder="Phone"
                                        required>
                                </div>

                                <div class="mb-3">
                                    <input type="email" class="form-control rounded-5" name="email" value="{{ old('email') }}" placeholder="Email"
                                        required>
                                </div>

                                <div class="mb-3">
                                    <input type="text" class="form-control rounded-5" name="subject" value="{{ old('subject') }}"
                                        placeholder="Subject" required>
                                </div>

                                <div class="mb-3">
                                    <textarea class="form-control" name="message" rows="2" placeholder="Write message here..." required>{{ old('message') }}</textarea>
                                </div>

                                <button type="submit" class=" btn-custom border-0 text-white w-100">
                                    <span>Submit</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mapouter">
            <div class="gmap_canvas">
                <iframe loading="lazy" width="100%" height="400" id="gmap_canvas"
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7296.1163451009525!2d90.3847889!3d23.8875558!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5d458d62883%3A0x1c73968297f5455d!2sTriangle%20Engineers%20Ltd.!5e0!3m2!1sen!2sbd!4v1745690762939!5m2!1sen!2sbd"
                    frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        header .navbar,
        header .offcanvas {
            background-color: white;
        }

        header .nav-link {
            color: rgb(58, 57, 57);
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(function () {
            const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            if (sessionStorage.getItem('timezone_set') !== userTimeZone || $('#opening-timezone').text() !== userTimeZone) {
                $.ajax({
                    url: '/set-user-timezone',
                    type: 'POST',
                    data: {
                        timezone: userTimeZone,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.status === 'ok' && response.start && response.end && response.timezone) {
                            sessionStorage.setItem('timezone_set', userTimeZone);
                            $('#opening-start').text(response.start);
                            $('#opening-end').text(response.end);
                            $('#opening-timezone').text(response.timezone);
                        }
                    }
                });
            }
        });
    </script>
@endpush