@extends('layouts.public.app')

@section('title', @$supplier['company'] . ' Contact | Chemical Wholesale')
@section('description', 'Contact ' . @$supplier['company'] . ' on Chemical Wholesale')
@section('keywords', @$supplier['company'] ?: 'Chemical Wholesale')
@section('metaimage', @$supplier['getLogo']['path'] ? asset(@$supplier['getLogo']['path']) : asset('img/logo-lg2.png'))

@section('content')
    <div class="greybg pb-4">

        @include('public.supplier.supplier-page-header')

        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-8">
                    <div class="detail-page-card mb-3">
                        <div class="detail-page-card-header">
                            Contact Information
                        </div>

                        <div class="detail-page-card-body">
                            @if (@$supplier['contact_person_name'])
                                <div class="contact-person">
                                    <img src="{{ @$supplier['getcontactimage']['path'] }}" alt="img"
                                        class="contact-image border" onerror="src='/assets/img/noimg.jpg'">
                                    <div>
                                        <div class="contact-name">{{ @$supplier['contact_person_name'] }}</div>
                                        <div class="contact-desg">{{ @$supplier['contact_person_post'] }}</div>
                                    </div>
                                </div>
                            @endif

                            <table class="table table-bordered mt-3 table-type1">
                                <tr>
                                    <td>Company Phone</td>
                                    <td>
                                        @guest
                                            <a data-bs-toggle="modal" data-bs-target="#login" class="text-primary">Login to View
                                                Details</a>
                                        @endguest
                                        @auth
                                            <a class="text-dark"
                                                class="text-primary">{{ @$supplier['company_phone'] ?: 'N.A' }}</a>
                                        @endauth
                                    </td>
                                </tr>
                                <tr>
                                    <td>Company Mobile</td>
                                    <td>
                                        @guest
                                            <a data-bs-toggle="modal" class="text-primary" data-bs-target="#login">Login to View
                                                Details</a>
                                        @endguest
                                        @auth
                                            <a class="text-dark">{{ @$supplier['company_phone'] ?: 'N.A' }}</a>
                                        @endauth
                                    </td>
                                </tr>
                                <tr>
                                    <td>Company Email</td>
                                    <td>
                                        @guest
                                            <a data-bs-toggle="modal" class="text-primary" data-bs-target="#login">Login to View
                                                Details</a>
                                        @endguest
                                        @auth
                                            <a class="text-dark">{{ @$supplier['company_email'] ?: 'N.A' }}</a>
                                        @endauth
                                    </td>
                                </tr>
                                <tr>
                                    <td>Company Website</td>
                                    <td>{{ @$supplier['company_url'] ?: 'N.A' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="detail-page-card mb-3">
                        <div class="detail-page-card-header">
                            Quick Action
                        </div>

                        <div class="detail-page-card-body">
                            <div class="company-card pb-3" style="border-bottom:1px solid #ddd">
                                <img src="{{ @$supplier['getLogo']['path'] }}" alt="img"
                                    class="company-card-img border" onerror="src='/assets/img/noimg.jpg'">
                                <div>
                                    <div class="company-card-name">
                                        {{ @$supplier['company'] }}
                                    </div>
                                    <img src="/assets/img/icons/verified.png" alt="verified" style="height:20px">
                                </div>
                            </div>
                            <div class="pt-3 pb-2">
                                <a href="" data-bs-toggle="modal" data-bs-target="#guest-send-inquiry"
                                    class="btn-chatnow d-block">
                                    <i class="bi bi-chat-right-dots-fill pe-2"></i>
                                    Send Inquiry</a>
                                {{--
                                <a data-bs-toggle="modal" data-bs-target="#contact-success" class="btn-outline-grey">Send
                                    Inquiry</a> --}}
                            </div>
                            {{--
                            <div class="">
                                <a href="" class="btn-outline-red d-block">Report Supplier</a>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>

            {{--
            <div class="detail-page-card mb-3">
                <div class="detail-page-card-header">
                    Location
                </div>
                <div class="detail-page-card-body">
                    <h4 style="font-size: 22px; font-weight: 600" class="mb-3"><i class="bi bi-crosshair me-2"></i>
                        Thrissur, India</h4>
                    <iframe style="border-radius: 10px"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15359793.915836886!2d65.57852277574838!3d19.96861807134049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1712330997566!5m2!1sen!2sin"
                        width="100%" height="400" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div> --}}


        </div>
    </div>
    @guest
        <div class="modal fade" id="guest-send-inquiry" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="text-center">
                            <p class="text-danger fs-1 mb-3"><i class="bi bi-info-circle"></i></p>
                            <h5 class="fw-bold">Sign up as a buyer to contact supplier.</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endguest
    @auth
        <div class="modal fade" id="guest-send-inquiry" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="text-center">
                            <p class="text-success fs-1"><i class="bi bi-envelope"></i></p>
                            <h5 class="fw-bold mb-3">{{ @$supplier['company'] ?: 'Supplier-contact' }}</h5>
                        </div>
                        <div>
                            <form action="{{ route('public.supplier.sendmessage') }}" method="post">
                                @csrf
                                <div class="row pb-2">
                                    <input type="text" name="business_id" value="{{ @$supplier['id'] }}" hidden>
                                    <div class="col-12">
                                        <label class="contact-label">Your Message</label>
                                        <textarea class="contact-textarea" name="message" maxlength="1000" required></textarea>
                                    </div>
                                </div>
                                <div class="row pb-0">
                                    <div class="col-12">
                                        <button href="javascript:void(0)" type="submit"
                                            class="btn-viewall border-0"><b>Submit</b></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="contact-success" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="text-center">
                            <img src="{{ asset('assets/img/icons/emailsent.png') }}" alt="email sent"
                                style="width: 120px;height:auto">
                            <h5 class="fw-bold my-4">Your message sent successfully.</h5>
                            <a href="{{ route('public.chat') }}" class="btn-viewall btn-sm py-2 mb-3">View Message</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endauth
@endsection
@push('css')
@endpush
@push('js')
    <script>
        $('textarea[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "maxlength",
            limitReachedClass: "maxlength-red"
        });
    </script>

    <script>
        $('form').submit(function(e) {
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.html('<span class="spinner me-2"></span>Sending');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Submit');
            }, 1000);
        });
    </script>
    @if (session('success'))
        <script>
            window.onload = function() {
                $('#contact-success').modal('show');
            }
        </script>
    @endif
@endpush