<?php
declare(strict_types=1);

require_once __DIR__ . '/../security/auth_guard_web.php';
require_once __DIR__ . '/../partials/main.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<?php includeFileWithVariables('../partials/title-meta.php', ['title' => 'Create Hospitality Product']); ?>

<link rel="stylesheet" href="<?= ADMIN_BASE_URL ?>assets/libs/quill/quill.snow.css">
<?php include '../partials/head-css.php'; ?>
</head>

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

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

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

<?php includeFileWithVariables('../partials/page-title.php', [
    'title_sub' => 'Hospitality',
    'title'     => 'Create Hospitality Product'
]); ?>

<div class="row">
<div class="col-12">

<div class="card">
<div class="card-header">
    <h6 class="card-title">New Hospitality Product</h6>
</div>

<div class="card-body">
<div class="row g-4">

<!-- TITLE -->
<div class="col-xl-6">
<label class="form-label">Title <span class="text-danger">*</span></label>
<input id="title" class="form-control">
</div>

<!-- SLUG -->
<div class="col-xl-6">
<label class="form-label">Slug</label>
<input id="slug" class="form-control bg-light" readonly>
</div>

<!-- PRODUCT TYPE -->
<div class="col-xl-4">
<label class="form-label">Product Type</label>
<select id="product_type" class="form-select">
<option value="Hotel">Hotel</option>
<option value="Resort">Resort</option>
<option value="Hospital">Hospital</option>
<option value="Hostel">Hostel</option>
<option value="Institution">Institution</option>
</select>
</div>

<!-- USAGE CATEGORY -->
<div class="col-xl-4">
<label class="form-label">Usage Category</label>
<select id="usage_category" class="form-select">
<option value="">-- Select --</option>
<option value="Luxury">Luxury</option>
<option value="Premium">Premium</option>
<option value="Standard">Standard</option>
<option value="Economy">Economy</option>
</select>
</div>

<!-- PRIORITY -->
<div class="col-xl-4">
<label class="form-label">Priority</label>
<input type="number" id="priority" class="form-control" value="0">
</div>

<!-- SHORT DESCRIPTION -->
<div class="col-12">
<label class="form-label">Short Description</label>
<textarea id="short_description" class="form-control" rows="3"></textarea>
</div>

<!-- FULL DESCRIPTION -->
<div class="col-12">
<label class="form-label">Full Description</label>
<div id="editor" style="height:300px"></div>
</div>

<!-- SEO -->
<div class="col-12">
<div class="card border">
<div class="card-header">
    <h6 class="mb-0">SEO & Schema</h6>
</div>
<div class="card-body row g-3">

<div class="col-md-6">
<input id="meta_title" class="form-control" placeholder="Meta Title">
</div>

<div class="col-md-6">
<input id="canonical_url" class="form-control" placeholder="Canonical URL">
</div>

<div class="col-12">
<textarea id="meta_description" class="form-control"
          rows="3" placeholder="Meta Description"></textarea>
</div>

<div class="col-12">
<textarea id="schema_json" class="form-control font-monospace"
          rows="6"
          placeholder="Paste JSON-LD Schema (optional)"></textarea>
</div>

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

<!-- ACTIONS -->
<div class="col-12 text-end mt-3">
<button class="btn btn-light" onclick="location.reload()">Reset</button>
<button class="btn btn-primary" id="createBtn" onclick="createProduct()">
    Create Product
</button>
</div>

<div class="col-12"><div id="msg"></div></div>

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

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

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

<!-- SUCCESS MODAL -->
<div class="modal fade" id="successModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-success text-white">
    <h6 class="modal-title">Success</h6>
</div>
<div class="modal-body text-center">
    <i class="bi bi-check-circle fs-1 text-success"></i>
    <p class="mt-3 mb-0">Hospitality product created successfully.</p>
</div>
<div class="modal-footer justify-content-center">
    <button class="btn btn-success" onclick="redirectToList()">
        Go to List
    </button>
</div>
</div>
</div>
</div>

<?php include '../partials/vendor-scripts.php'; ?>
<script src="<?= ADMIN_BASE_URL ?>assets/libs/quill/quill.js"></script>

<script>
const ADMIN = "<?= ADMIN_BASE_URL ?>";
let quill;

document.addEventListener('DOMContentLoaded', () => {
    quill = new Quill('#editor', { theme: 'snow' });
});

title.addEventListener('input', () => {
    slug.value = title.value.toLowerCase()
        .replace(/[^a-z0-9]+/g,'-')
        .replace(/^-|-$/g,'');
});

function redirectToList(){
    window.location.href = `${ADMIN}hospitality-products/index.php`;
}

function createProduct(){

    document.getElementById('createBtn').disabled = true;

    fetch(`${ADMIN}api/hospitality-products/create.php`,{
        method:'POST',
        credentials:'include',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({
            title: title.value.trim(),
            short_description: short_description.value.trim(),
            description: quill.root.innerHTML.trim(),
            product_type: product_type.value,
            usage_category: usage_category.value || null,
            priority: priority.value,
            meta_title: meta_title.value || null,
            meta_description: meta_description.value || null,
            canonical_url: canonical_url.value || null,
            schema_json: schema_json.value || null
        })
    })
    .then(r=>r.json())
    .then(r=>{
        if(r.status==='success'){
            new bootstrap.Modal(
                document.getElementById('successModal')
            ).show();
            setTimeout(redirectToList, 2000);
        }else{
            msg.innerHTML =
                `<div class="alert alert-danger">${r.message}</div>`;
            document.getElementById('createBtn').disabled=false;
        }
    });
}
</script>

</body>
</html>
