<?php
declare(strict_types=1);



/**
 * ============================
 * BOOTSTRAP
 * ============================
 */
require_once __DIR__ . '/../config/constants.php';
require_once __DIR__ . '/../security/auth_guard.php';

/**
 * Dealer ID
 */
$dealerId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($dealerId <= 0) {
    header('Location: ' . ADMIN_BASE_URL . 'dealers/list.php');
    exit;
}

/**
 * Layout
 */
include __DIR__ . '/../partials/main.php';
?>

<head>
    <?php includeFileWithVariables(__DIR__ . '/../partials/title-meta.php', ['title' => 'View Dealer']); ?>
    <?php include __DIR__ . '/../partials/head-css.php'; ?>

    <link rel="stylesheet" href="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.css">

    <style>
        .dealer-details-scroll {
            max-height: 300px;
            overflow-y: auto;
        }
        #dealerMap {
            height: 300px;
            width: 100%;
            border-radius: 8px;
        }
    </style>
</head>

<body>
<div id="layout-wrapper">

<?php
include __DIR__ . '/../partials/header.php';
include __DIR__ . '/../partials/sidebar.php';
include __DIR__ . '/../partials/horizontal.php';
?>

<main class="app-wrapper">
<div class="container-fluid">

<?php includeFileWithVariables(__DIR__ . '/../partials/page-title.php', [
    'title_sub' => 'Dealers',
    'title'     => 'View Dealer'
]); ?>

<!-- ACTIONS -->
<div class="d-flex justify-content-end gap-2 mb-4">
    <a href="<?= ADMIN_BASE_URL ?>dealers/list.php" class="btn btn-light">
        ← Back to List
    </a>
    <a href="<?= ADMIN_BASE_URL ?>dealers/edit.php?id=<?= $dealerId ?>" class="btn btn-primary">
        Edit Dealer
    </a>
</div>

<!-- IMAGES + SUMMARY -->
<div class="row">
    <div class="col-xl-5">
        <div class="card">
            <div class="card-body">
                <div class="swiper dealerSwiper">
                    <div class="swiper-wrapper" id="dealerImages"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-7">
        <div class="card">
            <div class="card-body">
                <h3 id="dealerName"></h3>
                <?= DEALERS_BASE_URL ?><p id="slug"></p>

                <div class="row mt-3">
                    <div class="col-md-6"><strong>Dealer Type:</strong> <span id="dealerType"></span></div>
                    <div class="col-md-6"><strong>Status:</strong> <span id="dealerStatus"></span></div>

                    <div class="col-md-6 mt-2"><strong>Approval:</strong> <span id="approvalStatus"></span></div>
                    <div class="col-md-6 mt-2"><strong>Content:</strong> <span id="contentStatus"></span></div>

                    <div class="col-md-6 mt-2"><strong>CST Manager:</strong> <span id="cstName"></span></div>
                    <div class="col-md-6 mt-2"><strong>Created At:</strong> <span id="createdAt"></span></div>
                </div>

                <hr>

                <h6>Contact</h6>
                <p><strong>Contact Person:</strong> <span id="contactPerson"></span></p>
                <p><strong>Email:</strong> <span id="dealerEmail"></span></p>
                <p><strong>Phone:</strong> <span id="dealerPhone"></span></p>

                <h6 class="mt-3">Address</h6>
                <p id="dealerAddress"></p>
            </div>
        </div>
    </div>
</div>

<!-- TABS -->
<div class="card mt-4">
<div class="card-body">

<ul class="nav nav-tabs nav-tabs-custom nav-primary">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#tab-details">Details</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-location-seo">Location & SEO</a>
    </li>
</ul>

<div class="tab-content mt-4">

<!-- DETAILS -->
<div class="tab-pane fade show active" id="tab-details">
    <h6>Dealer Description</h6>
    <div class="dealer-details-scroll" id="dealerDetails"></div>
</div>

<!-- LOCATION + SEO -->
<div class="tab-pane fade" id="tab-location-seo">
    <div class="row">
        <div class="col-md-6">
            <h6>Location</h6>
            <div id="dealerMap"></div>
        </div>
        <div class="col-md-6">
            <h6>SEO</h6>
            <p><strong>Meta Title:</strong> <span id="metaTitle"></span></p>
            <p><strong>Meta Keywords:</strong> <span id="metaKeywords"></span></p>
            <p><strong>Description:</strong> <span id="metaDescription"></span></p>
             <p><strong>SEO Schema:</strong> <pre class="bg-light p-2 small" id="seoSchema"></pre>
              <p><strong>AI SEO Schemas:</strong> <pre class="bg-light p-2 small" id="AiseoSchema"></pre> 
        </div>
    </div>
</div>

</div>
</div>
</div>

</div>
</main>

<?php include __DIR__ . '/../partials/footer.php'; ?>
</div>

<?php include __DIR__ . '/../partials/vendor-scripts.php'; ?>

<script src="<?= APP_ROOT ?>/assets/libs/swiper/swiper-bundle.min.js"></script>

<script>
const API_URL = "<?= APP_ROOT ?>/admin/api/dealers/view.php?id=<?= $dealerId ?>";
const APP_ROOT = "<?= APP_ROOT ?>";

fetch(API_URL)
.then(res => res.json())
.then(({ data }) => {

    document.getElementById('dealerName').textContent = data.dealer_name;
     document.getElementById('slug').textContent = data.slug;
    document.getElementById('dealerType').textContent = data.dealer_type;
    document.getElementById('dealerStatus').textContent = data.status;
    document.getElementById('approvalStatus').textContent = data.approval_status;
    document.getElementById('contentStatus').textContent = data.content_status;
    document.getElementById('cstName').textContent = data.cst_name;
    document.getElementById('createdAt').textContent = data.created_at;

    document.getElementById('contactPerson').textContent = data.contact_person || '-';
    document.getElementById('dealerEmail').textContent = data.email || '-';
    document.getElementById('dealerPhone').textContent = data.phone || '-';

    document.getElementById('dealerAddress').textContent =
        `${data.address_line1 || ''} ${data.address_line2 || ''}, ${data.city_name}, ${data.state_name} ${data.pincode || ''}`;

    document.getElementById('dealerDetails').innerHTML =
        data.dealer_details || '<em>No details available</em>';

    document.getElementById('metaTitle').textContent = data.seo.meta_title || '-';
    document.getElementById('metaKeywords').textContent = data.seo.meta_keywords || '-';
    document.getElementById('metaDescription').textContent = data.seo.meta_description || '-';
    document.getElementById('seoSchema').textContent = data.seo.seo_schema || '-';
    document.getElementById('AiseoSchema').textContent = data.seo.ai_seo_content || '-';

    // ✅ FIXED IMAGE PATH (NO HARD-CODED /nwx)
    const imgWrap = document.getElementById('dealerImages');

    if (Array.isArray(data.images) && data.images.length) {
        data.images.forEach(img => {
            imgWrap.innerHTML += `
                <div class="swiper-slide">
                    <img
                        class="img-fluid rounded"
                        src="${APP_ROOT}${img.image_path}"
                        alt="${img.alt_text || ''}">
                </div>
            `;
        });
    } else {
        imgWrap.innerHTML = `
            <div class="text-muted text-center p-5">
                No images uploaded
            </div>
        `;
    }

    new Swiper('.dealerSwiper', { navigation: true });

    // Map
    if (data.latitude && data.longitude && window.google) {
        const map = new google.maps.Map(document.getElementById('dealerMap'), {
            zoom: 14,
            center: { lat: parseFloat(data.latitude), lng: parseFloat(data.longitude) }
        });
        new google.maps.Marker({ map, position: map.getCenter() });
    }
});
</script>

<script src="https://maps.googleapis.com/maps/api/js"></script>

</body>
</html>
