@extends('layout')
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">Vendor Details</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li>
                        <a href="{{ url('/vendors') }}">Vendors</a>
                    </li>
                    <li>
                        <a href="#!">Vendor Details</a>
                    </li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <a href="{{ route('vendors.edit', $vendor->id) }}" class="dashboard_main-btn">
                    Quick Action
                    <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                </a>
            </div>
        </div>
        <div class="dashboard_main-body">
            <div class="details-card">
                <div class="vendor_details-head">
                    <h2 class="vendor_details-title">
                        {{ $vendor->name }}
                    </h2>
                    <span class="vendor_details-date">
                        Created at {{ $vendor->created_at->format('d M, Y') }}
                    </span>
                    <span
                        class="vendor_details-status {{ $vendor->status == 'active' ? 'active_status' : $vendor->status }}">
                        <i class="icon">
                            @if ($vendor->status == 'active')
                                <img src="{{ asset('assets/images/icons/check_circle.svg') }}" alt="icon" class="svg" />
                            @else
                                <img src="{{ asset('assets/images/icons/times_circle.svg') }}" alt="icon" class="svg" />
                            @endif
                        </i>
                        {{ $vendor->status }}
                    </span>
                </div>
                <div class="vendor_details-body">
                    <div class="vendor_details-media">
                        <div class="vendor_details-img"
                            style="background-color: {{ $vendor->tertiary_color ?? '#f4f6f8' }}">
                            <img src="{{ $vendor->getFirstMediaUrl('logo') ?: asset('assets/images/media.png') }}"
                                alt="media" class="img-contain" width='60%'/>
                        </div>
                        <div class="vendor_details-colors">
                            <div class="vendor_details-color_item"
                                style="background-color: {{ $vendor->primary_color ?? '#3790ab' }}"></div>
                            <div class="vendor_details-color_item"
                                style="background-color: {{ $vendor->secondary_color ?? '#f9c86c' }}"></div>
                            <div class="vendor_details-color_item"
                                style="background-color: {{ $vendor->tertiary_color ?? '#c5ccd3' }}"></div>
                        </div>
                    </div>
                    <div class="vendor_details-info">
                        <ul class="vendor_details-list">
                            <li>
                                <span class="title">ID</span>
                                <span class="value">
                                    VD-{{ str_pad($vendor->id, 6, '0', STR_PAD_LEFT) }}
                                </span>
                                <button class="copy-btn" type="button"
                                    onclick="navigator.clipboard.writeText('VD-{{ str_pad($vendor->id, 6, '0', STR_PAD_LEFT) }}')">
                                    <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon" class="svg" />
                                </button>
                            </li>
                            <li>
                                <span class="title">Phone</span>
                                <span class="value">
                                    <a href="tel:{{ $vendor->phone }}" class="en">
                                        {{ $vendor->phone }}
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span class="title">Email</span>
                                <span class="value">
                                    <a href="mailto:{{ $vendor->email }}" class="en">
                                        {{ $vendor->email }}
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span class="title">Website</span>
                                <span class="value">
                                    <a href="{{ $vendor->website }}" class="en" target="_blank">
                                        {{ $vendor->website ?? '—' }}
                                    </a>
                                </span>
                            </li>
                        </ul>
                        <p class="vendor_details-desc">
                            {{ $vendor->description ?? 'No description available.' }}
                        </p>

                        <div class="vendor_details-address">
                            <p class="address-text">
                                <span class="title">Address</span>
                                <span class="value">
                                    {{ $vendor->location ?? 'No location added.' }}
                                </span>
                            </p>
                            <div class="address-map">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWnEgtFGwE3ilBsQW4JA6fmep0HlpAky4&callback=initMap&libraries=places"
        async defer></script>
    <script>
        function initMap() {
            var lat = {{ $vendor->lat ?? 31.046944 }};
            var lng = {{ $vendor->lon ?? 31.402676 }};
            const myLatlng = {
                lat: lat,
                lng: lng
            };
            const map = new google.maps.Map(
                document.getElementById("map"), {
                    zoom: 21,
                    center: myLatlng,
                    draggable: true,
                    scrollwheel: true,
                    disableDoubleClickZoom: false,
                    zoomControl: true,
                }
            );
        }
    </script>
@endsection