@extends('layouts.app')

@section('title', 'AI Image & Video Generator')

@section('content')

@include('partials.header')

<link rel="stylesheet" href="{{ asset('imagin.css') }}">

<style>

/* =========================================================
   CREASY GLOBAL LOADING
========================================================= */

@keyframes creasyPulse {

    0% {
        transform: scale(.95);
        opacity: .7;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
        filter: drop-shadow(0 0 12px rgba(34,207,228,.45));
    }

    100% {
        transform: scale(.95);
        opacity: .7;
    }

}

.creasy-logo-pulse {

    width: 80px;
    height: auto;

    display: inline-block;

    animation:
        creasyPulse 1.5s infinite ease-in-out;

}

.waiting-text {

    margin-top: 15px;

    color: #8f98a5;

    font-size: 14px;

    font-weight: 500;

}


/* =========================================================
   MAIN GENERATOR
========================================================= */

.imagegen-single-column {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 24px;

}


/* =========================================================
   LATEST GENERATION
========================================================= */

.latest-generation-panel {

    width: 100%;

    display: block;

}

.latest-generation-container {

    width: 100%;

    max-width: 1100px;

    min-height: 180px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

}


/* =========================================================
   LATEST EMPTY
========================================================= */

.latest-empty {

    width: 100%;

    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: #8f98a5;

    text-align: center;

}

.latest-empty i {

    font-size: 42px;

    opacity: .35;

}

.latest-empty-text {

    margin-top: 10px;

    font-size: 14px;

}


/* =========================================================
   DESKTOP BOTTOM
   PROMPT / CHOOSER = 55%
   HISTORY = 45%
========================================================= */

.generator-bottom-layout {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr);

    gap: 24px;

    align-items: stretch;

}


/* =========================================================
   BOTTOM PANELS
========================================================= */

.generator-bottom-layout > .generator-panel {

    width: 100%;

    min-width: 0;

}


/* =========================================================
   HISTORY PANEL
========================================================= */

.history-panel {

    width: 100%;

    min-width: 0;

}

.history-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 15px;

}

.history-title h3 {

    margin: 0;

    color: #ffffff;

    font-size: 1.05rem;

    font-weight: 700;

}

.history-title span {

    color: #8f98a5;

    font-size: .75rem;

}


/* =========================================================
   HISTORY GRID
========================================================= */

.history-gallery {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

}


/* =========================================================
   HISTORY CARD
========================================================= */

.history-gallery .generated-card-item {

    width: 100%;

    min-width: 0;

    margin: 0;

    position: relative;

    display: block;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 12px;

    overflow: hidden;

}


/* =========================================================
   HISTORY MEDIA
========================================================= */

.history-gallery .generated-image-box {

    width: 100%;

    aspect-ratio: 1 / 1;

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #111111 !important;

}

.history-gallery .generated-image-box img,
.history-gallery .generated-image-box video {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 12px;

}


/* =========================================================
   LATEST SINGLE
========================================================= */

.latest-generation-container.latest-single {

    display: flex;

    align-items: center;
    justify-content: center;

}

.latest-generation-container.latest-single
.generated-card-item {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

}


/* =========================================================
   LATEST MEDIA
========================================================= */

.latest-generation-container
.generated-card-item {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

}

.latest-generation-container
.generated-image-box {

    width: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: transparent !important;

}

.latest-generation-container
.generated-image-box img,
.latest-generation-container
.generated-image-box video {

    width: 100%;

    max-height: 560px;

    height: auto;

    display: block;

    margin: 0 auto;

    object-fit: contain;

    border-radius: 12px;

}


/* =========================================================
   LATEST MULTIPLE
========================================================= */

.latest-generation-container.latest-multiple {

    width: 100%;

    max-width: 1100px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    align-items: start;

    justify-content: center;

}

.latest-generation-container.latest-multiple
.generated-card-item {

    width: 100%;

    max-width: none;

    margin: 0;

}

.latest-generation-container.latest-multiple
.generated-image-box {

    width: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #111111 !important;

}

.latest-generation-container.latest-multiple
.generated-image-box img {

    width: 100%;

    height: auto;

    max-height: 560px;

    display: block;

    margin: 0 auto;

    object-fit: contain;

    border-radius: 12px;

}


/* =========================================================
   2 IMAGES
========================================================= */

.latest-generation-container.latest-multiple[data-latest-count="2"] {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

}


/* =========================================================
   GENERAL GENERATED CARD
========================================================= */

.generated-card-item {

    width: 100%;

    display: block;

    position: relative;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    border-radius: 12px;

    overflow: hidden;

    transition:
        transform .3s ease;

}

.generated-card-item:hover {

    transform: translateY(-3px);

}

.generated-image-box {

    width: 100%;

    display: block;

    position: relative;

    overflow: hidden;

    background: transparent !important;

    border-radius: 12px;

}

.generated-image-box img,
.generated-image-box video {

    max-width: 100%;

}

.generated-image-box video {

    background: #111111;

}


/* =========================================================
   GALLERY OVERLAY
========================================================= */

.card-overlay-btn {

    position: absolute;

    z-index: 10;

    opacity: 0;

    border-radius: 30px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.generated-card-item:hover
.card-overlay-btn {

    opacity: 1;

}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.btn-overlay-download {

    top: 12px;
    left: 12px;

    padding: 6px 14px;

    background: rgba(13,110,253,.85);

    border: 1px solid rgba(255,255,255,.3);

    color: #ffffff !important;

    font-size: .825rem;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);

}

.btn-overlay-download:hover {

    background: rgba(13,110,253,1);

    transform: scale(1.05);

}

/* =========================================================
   ADD TO PROMPT BUTTON
========================================================= */

.btn-overlay-add-prompt {

    bottom: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(34,207,228,.85);

    border: 1px solid rgba(255,255,255,.3);

    color: #ffffff !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);

}

.btn-overlay-add-prompt:hover {

    background: rgba(34,207,228,1);

    transform: scale(1.05);

}


/* =========================================================
   DELETE BUTTON
========================================================= */

.btn-overlay-delete {

    top: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(220,53,69,.85);

    border: 1px solid rgba(255,255,255,.3);

    color: #ffffff !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);

}

.btn-overlay-delete:hover {

    background: rgba(220,53,69,1);

    transform: scale(1.05);

}


/* =========================================================
   PROMPT CAPTION
========================================================= */

.generated-prompt-caption {

    display: none !important;

}


/* =========================================================
   PROMPT HEADER
========================================================= */

.prompt-header {

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

}


/* =========================================================
   PROMPT WRAPPER
========================================================= */

@keyframes borderGlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.prompt-wrapper {

    position: relative;

    padding: 2px;

    border-radius: 12px;

    background: rgba(255,255,255,.1);

    transition:
        background .35s ease,
        box-shadow .35s ease;

}

.prompt-wrapper:hover,
.prompt-wrapper:focus-within {

    background: rgba(255,255,255,.025);

    box-shadow:
        0 0 12px rgba(255,255,255,.08);

}

.prompt-input {

    color: #ffffff !important;

    background: #1a1d20 !important;

    border: none !important;

    border-radius: 10px;

    outline: none !important;

    box-shadow: none !important;

    padding-right: 50px !important;

}

.prompt-input:focus {

    color: #ffffff !important;

    background: #1a1d20 !important;

    box-shadow: none !important;

}

.prompt-input::placeholder {

    color: #a0a6b1 !important;

    opacity: .8;

}

.prompt-label,
.prompt-counter {

    color: #cccccc !important;

}


/* =========================================================
   RESET PROMPT
========================================================= */

.prompt-reset-btn {

    position: absolute;

    top: 12px;
    right: 12px;

    width: 34px;
    height: 34px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 5;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: #a0a6b1;

    cursor: pointer;

    transition:
        all .25s ease;

}

/* =========================================================
   ADD TO PROMPT
========================================================= */



.prompt-reset-btn:hover {

    color: #ffffff;

    background: rgba(220,53,69,.85);

    transform:
        rotate(-45deg)
        scale(1.05);

}

.prompt-reset-btn:active {

    transform: scale(.92);

}


/* =========================================================
   IMAGE / VIDEO / MUSIC SELECTOR
========================================================= */

.generate-type-selector {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 8px;

}

.generate-type-btn {

    min-height: 36px;

    padding: 7px 14px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    background: #1a1d20;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 8px;

    color: #a0a6b1;

    font-size: .82rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        all .25s ease;

}

.generate-type-btn:hover {

    color: #ffffff;

    background: #212529;

    border-color: #0d6efd;

}

.generate-type-btn.active {

    background: #0d6efd !important;

    border-color: #0d6efd !important;

    color: #ffffff !important;

    box-shadow:
        0 4px 12px rgba(13,110,253,.35);

}


/* =========================================================
   ASPECT RATIO
========================================================= */

.aspect-ratio-selector {

    width: 100%;

    display: flex;

    gap: 10px;

    scrollbar-width: none;

    -ms-overflow-style: none;

}

.aspect-ratio-selector::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   MOBILE ASPECT SLIDER
   DEFAULT = HIDDEN
========================================================= */

.mobile-aspect-slider {

    display: none !important;

}


/* =========================================================
   ASPECT BUTTON
========================================================= */

.aspect-btn {

    flex: 1 1 0%;

    min-width: 80px;

    padding: 9px 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    background: #1a1d20;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 10px;

    color: #a0a6b1;

    font-size: .85rem;

    font-weight: 500;

    cursor: pointer;

    white-space: nowrap;

    transition:
        all .25s ease;

}

.aspect-btn:hover {

    color: #ffffff;

    background: #212529;

    border-color: #0d6efd;

    box-shadow:
        0 0 8px rgba(13,110,253,.3);

}

.aspect-btn.active {

    background: #0d6efd !important;

    border-color: #0d6efd !important;

    color: #ffffff !important;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(13,110,253,.4);

}


/* =========================================================
   ASPECT ICON
========================================================= */

.aspect-icon {

    display: inline-block;

    flex-shrink: 0;

    border: 1.5px solid currentColor;

    border-radius: 2px;

}

.icon-1-1 {

    width: 14px;
    height: 14px;

}

.icon-4-3 {

    width: 16px;
    height: 12px;

}

.icon-3-4 {

    width: 12px;
    height: 16px;

}

.icon-16-9 {

    width: 18px;
    height: 10px;

}

.icon-9-16 {

    width: 10px;
    height: 18px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .aspect-ratio-selector {

        display: none !important;

    }

    .mobile-aspect-slider {

        display: block !important;

        width: 100%;

        padding: 4px 2px 0;

    }

}

/* =========================================================
   VIDEO DURATION
========================================================= */

.video-duration-wrapper {

    width: 100%;

    display: flex;

    justify-content: flex-end;

    margin-top: -2px;
    margin-bottom: 10px;

}

.video-duration-selector {

    display: flex;

    align-items: center;

    gap: 4px;

}

.duration-btn {

    padding: 4px 9px;

    border: 1px solid transparent;

    border-radius: 7px;

    background: transparent;

    color: rgba(255,255,255,.45);

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        all .2s ease;

}

.duration-btn:not(.active):hover {

    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.8);

}

.duration-btn.active {

    background: rgba(255,255,255,.16);

    border-color: rgba(255,255,255,.22);

    color: #ffffff;

}


/* =========================================================
   IMAGE QUANTITY
========================================================= */

.image-quantity-wrapper {

    width: 100%;

    display: flex;

    justify-content: flex-end;

    margin-top: -2px;
    margin-bottom: 10px;

}

.image-quantity-selector {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 4px;

}

.image-quantity-selector > span {

    margin-right: auto !important;

}

.quantity-btn {

    padding: 4px 9px;

    border: 1px solid transparent;

    border-radius: 7px;

    background: transparent;

    color: rgba(255,255,255,.45);

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        all .2s ease;

}

.quantity-btn:not(.active):hover {

    background: rgba(255,255,255,.06);

    color: rgba(255,255,255,.8);

}

.quantity-btn.active {

    background: rgba(255,255,255,.16);

    border-color: rgba(255,255,255,.22);

    color: #ffffff;

}


/* =========================================================
   REFERENCE IMAGE
========================================================= */

.prompt-reference-layout {

    width: 100%;

    display: grid;

    grid-template-columns:
        76px minmax(0,1fr);

    gap: 10px;

    align-items: stretch;

}

.reference-image-column {

    width: 76px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.reference-image-card {

    width: 76px;
    height: 76px;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;

    border-radius: 9px;

}

.reference-upload-card {

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.035);

    border: 1px dashed rgba(255,255,255,.14);

    color: rgba(255,255,255,.35);

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;

}

.reference-upload-card:hover {

    background: rgba(255,255,255,.06);

    border-color: rgba(255,255,255,.28);

    color: rgba(255,255,255,.65);

}

.reference-upload-card i {

    font-size: 20px;

    line-height: 1;

}

.reference-preview-card {

    background: #111111;

    border: 1px solid rgba(255,255,255,.10);

}

.reference-preview-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}

.reference-remove-btn {

    position: absolute;

    top: 4px;
    right: 4px;

    width: 19px;
    height: 19px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 5;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.72);

    color: #ffffff;

    cursor: pointer;

    opacity: 0;

    transition:
        opacity .2s ease,
        background .2s ease;

}

.reference-preview-card:hover
.reference-remove-btn {

    opacity: 1;

}

.reference-remove-btn:hover {

    background: #dc3545;

}

.reference-remove-btn i {

    font-size: 9px;

}


/* =========================================================
   VIDEO - NO REFERENCE
========================================================= */

.prompt-reference-layout.no-reference {

    grid-template-columns: 1fr;

}

.prompt-reference-layout.no-reference
.reference-image-column {

    display: none;

}


/* =========================================================
   PROMPT CREDIT
========================================================= */

.prompt-credit-indicator {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    color: #ffffff;

    font-size: .75rem;

    font-weight: 700;

    white-space: nowrap;

    opacity: .9;

}

.prompt-credit-indicator i {

    color: #22cfe4;

    font-size: .8rem;

}

.prompt-credit-indicator span {

    color: rgba(255,255,255,.78);

}

@keyframes creditIndicatorShake {

    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08) translateX(-3px);
    }

    50% {
        transform: scale(1.08) translateX(3px);
    }

    75% {
        transform: scale(1.08) translateX(-2px);
    }

    100% {
        transform: scale(1);
    }

}

.prompt-credit-indicator.credit-shake {

    animation:
        creditIndicatorShake .35s ease;

}


/* =========================================================
   CREATION TYPE CHOOSER
========================================================= */

.creation-type-chooser {

    width: 100%;

}

.creation-type-title {

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 700;

}

.creation-type-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 12px;

}

.creation-type-card {

    position: relative;

    width: 100%;

    min-height: 125px;

    padding: 20px 14px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 14px;

    color: #ffffff;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}

.creation-type-card:hover {

    transform: translateY(-3px);

    border-color: rgba(34,207,228,.55);

    background:
        linear-gradient(
            145deg,
            rgba(34,207,228,.10),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.20),
        0 0 18px rgba(34,207,228,.08);

}

.creation-type-card i {

    margin-bottom: 12px;

    color: #22cfe4;

    font-size: 30px;

    line-height: 1;

}

.creation-type-card strong {

    display: block;

    margin-bottom: 4px;

    font-size: .9rem;

    font-weight: 700;

}

.creation-type-card span {

    display: block;

    color: #8f98a5;

    font-size: .72rem;

}


/* =========================================================
   CHANGE CREATION
========================================================= */

.change-creation-btn {

    min-height: 34px;

    padding: 6px 11px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    background: rgba(255,255,255,.055);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 8px;

    color: #a0a6b1;

    font-size: .75rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        all .25s ease;

}

.change-creation-btn:hover {

    color: #ffffff;

    background: rgba(34,207,228,.08);

    border-color: rgba(34,207,228,.45);

}

.change-creation-btn i {

    font-size: .8rem;

}


/* =========================================================
   EMPTY HISTORY
========================================================= */

#historyEmpty {

    color: #8f98a5;

}


/* =========================================================
   MOBILE / TOUCH OVERLAY
========================================================= */

@media (max-width: 992px), (hover:none) {

    .card-overlay-btn {

        opacity: 0 !important;

        pointer-events: none;

        box-shadow:
            0 4px 15px rgba(0,0,0,.4) !important;

    }

    .generated-card-item.mobile-active
    .card-overlay-btn {

        opacity: 1 !important;

        pointer-events: auto;

    }

    .btn-overlay-download {

        padding: 7px 14px;

        font-size: .85rem;

    }

    .btn-overlay-delete {

        width: 36px;
        height: 36px;

    }

}


/* =========================================================
   PENDING PAYMENT FLOAT
========================================================= */

.pending-payment-float {

    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9999;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 17px;

    background: #22cfe4;

    border-radius: 50px;

    color: #021016 !important;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        0 0 20px rgba(34,207,228,.15);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}

.pending-payment-float:hover {

    background: #36d9ec;

    color: #021016 !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.4),
        0 0 25px rgba(34,207,228,.25);

}

.pending-payment-float i {

    font-size: 19px;

}

.pending-payment-badge {

    position: absolute;

    top: -5px;
    right: -4px;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #dc3545;

    border: 2px solid #020b11;

    border-radius: 20px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

}

@media (max-width: 600px) {

    .pending-payment-float {

        right: 16px;
        bottom: 16px;

        width: 50px;
        height: 50px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }

    .pending-payment-float span {

        display: none;

    }

    .pending-payment-float i {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
   LATEST
   ↓
   PROMPT / CHOOSER
   ↓
   HISTORY
========================================================= */

@media (max-width: 992px) {

    .generator-bottom-layout {

        width: 100%;

        display: flex !important;

        flex-direction: column !important;

        gap: 24px;

        align-items: stretch;

    }

    #promptPanel {

        width: 100% !important;

        max-width: none !important;

        flex: none !important;

        order: 1 !important;

    }

    #historyPanel {

        width: 100% !important;

        max-width: none !important;

        flex: none !important;

        order: 2 !important;

    }

    #latestGenerationPanel {

        width: 100% !important;

    }

    .latest-generation-container {

        width: 100%;

        max-width: 100%;

    }

    .history-gallery {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 12px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .imagegen-single-column {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 24px !important;

    }

    #latestGenerationPanel {

        width: 100% !important;

        order: 1 !important;

    }

    .generator-bottom-layout {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 24px !important;

        order: 2 !important;

    }

    #promptPanel {

        width: 100% !important;

        max-width: 100% !important;

        order: 1 !important;

    }

    #historyPanel {

        width: 100% !important;

        max-width: 100% !important;

        order: 2 !important;

    }


    /* -----------------------------------------
       LATEST
    ----------------------------------------- */

    .latest-generation-container {

        width: 100% !important;

        max-width: 100% !important;

        min-height: 160px;

    }

    .latest-generation-container
    .generated-card-item {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto;

    }

    .latest-generation-container
    .generated-image-box img,
    .latest-generation-container
    .generated-image-box video {

        width: 100% !important;

        max-width: 100% !important;

        max-height: none !important;

        height: auto !important;

        object-fit: contain;

    }


    /* -----------------------------------------
       LATEST MULTIPLE
    ----------------------------------------- */

    .latest-generation-container.latest-multiple {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 10px;

    }

    .latest-generation-container.latest-multiple
    .generated-image-box img {

        max-height: none;

    }


    /* -----------------------------------------
       HISTORY
    ----------------------------------------- */

    .history-panel {

        width: 100% !important;

        min-width: 0 !important;

    }

    .history-gallery {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap: 10px !important;

    }

    .history-gallery .generated-card-item {

        width: 100% !important;

        min-width: 0;

    }


    /* -----------------------------------------
       PROMPT HEADER
    ----------------------------------------- */

    .prompt-header {

        width: 100%;

        gap: 8px;

    }

    .generate-type-selector {

        gap: 6px;

    }

    .generate-type-btn {

        min-height: 34px;

        padding: 6px 10px;

        font-size: .78rem;

    }


    /* -----------------------------------------
       CREATION CHOOSER
    ----------------------------------------- */

    .creation-type-grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .creation-type-card {

        min-height: 82px;

        padding: 14px 16px;

        flex-direction: row;

        justify-content: flex-start;

        text-align: left;

        gap: 14px;

    }

    .creation-type-card i {

        width: 38px;

        flex-shrink: 0;

        margin: 0;

        font-size: 27px;

        text-align: center;

    }

    .creation-type-card div {

        flex: 1;

    }


    /* -----------------------------------------
       ASPECT RATIO
    ----------------------------------------- */

    .aspect-ratio-selector {

        display: none !important;

    }

    .mobile-aspect-slider {

        display: block;

        width: 100%;

        padding: 4px 2px 0;

    }

    .mobile-aspect-value {

        display: flex;

        align-items: center;
        justify-content: center;

        margin-bottom: 10px;

    }

    .mobile-aspect-value span {

        min-width: 58px;

        padding: 5px 12px;

        background: #0d6efd;

        border-radius: 20px;

        color: #ffffff;

        font-size: .82rem;

        font-weight: 700;

        text-align: center;

        box-shadow:
            0 4px 12px rgba(13,110,253,.3);

    }

    #mobileAspectRange {

        width: 100%;

        height: 6px;

        margin: 4px 0 8px;

        appearance: none;
        -webkit-appearance: none;

        background:
            linear-gradient(
                to right,
                #0d6efd 0%,
                #0d6efd 0%,
                rgba(255,255,255,.15) 0%,
                rgba(255,255,255,.15) 100%
            );

        border-radius: 10px;

        outline: none;

        cursor: pointer;

    }

    #mobileAspectRange::-webkit-slider-thumb {

        width: 20px;
        height: 20px;

        appearance: none;
        -webkit-appearance: none;

        background: #ffffff;

        border: 4px solid #0d6efd;

        border-radius: 50%;

        box-shadow:
            0 2px 10px rgba(0,0,0,.4);

        cursor: grab;

    }

    #mobileAspectRange::-webkit-slider-thumb:active {

        cursor: grabbing;

        transform: scale(1.1);

    }

    #mobileAspectRange::-moz-range-thumb {

        width: 14px;
        height: 14px;

        background: #ffffff;

        border: 4px solid #0d6efd;

        border-radius: 50%;

        box-shadow:
            0 2px 10px rgba(0,0,0,.4);

        cursor: grab;

    }

    .mobile-aspect-labels {

        width: 100%;

        display: flex;

        align-items: center;
        justify-content: space-between;

        color: rgba(255,255,255,.45);

        font-size: .68rem;

        font-weight: 600;

    }


    /* -----------------------------------------
       REFERENCE IMAGE
    ----------------------------------------- */

    .prompt-reference-layout {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .reference-image-column {

        width: 100%;

        flex-direction: row;

        gap: 8px;

    }

    .reference-image-card {

        width: 64px;
        height: 64px;

    }

    .reference-remove-btn {

        opacity: 1;

    }


    /* -----------------------------------------
       CREDIT
    ----------------------------------------- */

    .prompt-credit-indicator {

        gap: 4px;

        font-size: .7rem;

    }

    .prompt-credit-indicator i {

        font-size: .75rem;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .imagegen-single-column {

        gap: 20px !important;

    }

    .generator-bottom-layout {

        gap: 20px !important;

    }

    .history-gallery {

        gap: 8px !important;

    }

    .latest-generation-container.latest-multiple {

        gap: 8px;

    }

}


/* =========================================================
   SPIN
========================================================= */

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.spin {

    animation:
        spin 1s linear infinite;

}


/* =========================================================
   GENERATION LOADING
   HANYA AREA LATEST YANG TAMPIL
========================================================= */

body.generation-is-loading .imagegen-header {

    display: none !important;

}

body.generation-is-loading .generator-bottom-layout {

    display: none !important;

}

body.generation-is-loading #promptPanel {

    display: none !important;

}

body.generation-is-loading #creationTypeChooser {

    display: none !important;

}

body.generation-is-loading #historyPanel {

    display: none !important;

}

body.generation-is-loading #resultStatus {

    display: none !important;

}

body.generation-is-loading .pending-payment-float {

    display: none !important;

}

body.generation-is-loading #latestGenerationPanel {

    display: block !important;

    visibility: visible !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}

body.generation-is-loading
#latestGenerationContainer {

    display: flex !important;

    width: 100% !important;

    min-height: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

}

body.generation-is-loading
#latestGenerationContainer
.generated-card-item:not(#generationLoading) {

    display: none !important;

}

body.generation-is-loading
#generationLoading {

    width: 100% !important;

    min-height: 360px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

}

body.generation-is-loading
#generationLoading
.generated-image-box {

    width: 100% !important;

    min-height: 360px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-direction: column !important;

    background: transparent !important;

}

body.generation-is-loading
#generationLoading
.creasy-logo-pulse {

    width: 80px;

}


/* =========================================================
   GENERATION LOADING - MOBILE
========================================================= */

@media (max-width: 640px) {

    body.generation-is-loading .imagegen-card {

        margin-top: 0 !important;

        padding-top: 0 !important;

    }

    body.generation-is-loading
    .imagegen-single-column {

        gap: 0 !important;

    }

    body.generation-is-loading
    #latestGenerationPanel {

        margin: 0 !important;

        padding: 0 !important;

    }

    body.generation-is-loading
    #latestGenerationContainer {

        min-height: 320px !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    body.generation-is-loading
    #generationLoading {

        min-height: 320px !important;

    }

    body.generation-is-loading
    #generationLoading
    .generated-image-box {

        min-height: 320px !important;

    }

}


/* =========================================================
   MUSIC PREVIEW
========================================================= */

.generated-audio-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 20px;
    box-sizing: border-box;
}

.generated-audio-box audio {
    width: 100%;
    max-width: 520px;
    display: block;
}

/* Jangan sampai tombol overlay menutupi audio player */
.generated-card-item .media-download {
    z-index: 20;
}

.generated-card-item .generated-audio-box {
    position: relative;
    z-index: 5;
}

.music-vocal-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.music-vocal-slider::-webkit-scrollbar {
    display: none;
}

.music-vocal-option {
    flex: 0 0 auto;
    cursor: pointer;
    margin: 0;
}

.music-vocal-option input {
    display: none;
}

.music-vocal-option span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: #8d96a3;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s ease;
}

.music-vocal-option input:checked + span {
    color: #fff;
    border-color: #22cfe4;
    background: rgba(34,207,228,.10);
    box-shadow: 0 0 12px rgba(34,207,228,.12);
}

.music-setting-item {
    margin-bottom: 16px;
}

.music-select {
    min-height: 42px;
    border-radius: 10px;
}

/* =========================================================
   MUSIC SELECT
========================================================= */

.music-select {
    min-height: 42px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: none;
    transition: all .2s ease;
}

.music-select:hover {
    border-color: rgba(34, 207, 228, .35);
}

.music-select:focus {
    background-color: rgba(34, 207, 228, .035);
    border-color: #22cfe4;
    color: #fff;
    box-shadow: 0 0 12px rgba(34, 207, 228, .10);
    outline: none;
}

.music-select option {
    background: #071018;
    color: #fff;
}

.music-select:disabled {
    background-color: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .45);
    border-color: rgba(255, 255, 255, .10);
    opacity: 1;
}

.music-vocal-gender-toggle {
    display: none;
}

@media (max-width: 767.98px) {

    .music-vocal-gender-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .gender-label {
        color: #8d96a3;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .gender-toggle {
        position: relative;
        display: block;
        margin: 0;
        cursor: pointer;
    }

    .gender-toggle input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .gender-track {
        position: relative;
        display: block;
        width: 58px;
        height: 30px;
        border-radius: 30px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        cursor: pointer;
    }

    .gender-thumb {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #22cfe4;
        box-shadow: 0 0 10px rgba(34,207,228,.35);
        transition: transform .2s ease;
    }

    /* Male */
    .gender-toggle input:checked + .gender-track .gender-thumb {
        transform: translateX(28px);
    }

    /* Tombol Female & Male versi desktop disembunyikan */
    .music-vocal-slider .music-vocal-option:nth-child(1),
    .music-vocal-slider .music-vocal-option:nth-child(2) {
        display: none;
    }
}

@media (max-width: 767.98px) {

    /* Female & Male versi tombol lama disembunyikan di mobile */
    .music-vocal-slider .music-vocal-option:nth-child(1),
    .music-vocal-slider .music-vocal-option:nth-child(2) {
        display: none;
    }

}

.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 10px;
}

.history-pagination .btn {
    min-width: 100px;
    border-radius: 10px;
    font-size: 14px;
    padding: 8px 18px;
}

.history-pagination .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.history-gallery.history-music {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}


/* =========================================================
   CENTER VIDEO PLAY BUTTON
========================================================= */

.generated-video-wrapper {
    position: relative;
    width: 100%;
}

.generated-video-wrapper video {
    display: block;
    width: 100%;
}

.video-center-play {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 34px;
    height: 34px;

    padding: 0;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.35);

    background: rgba(0,0,0,.55);

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    z-index: 5;

    transition:
        transform .2s ease,
        background .2s ease,
        opacity .2s ease;
}

.video-center-play:hover {
    transform: translate(-50%, -50%) scale(1.08);

    background: rgba(0,0,0,.7);
}


.generated-card-item .generated-audio-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translateY(-8px);
}

.generated-audio-box audio {
    display: none;
}

.audio-icon {
    font-size: 32px;
    opacity: .75;
}

.audio-center-play,
.audio-play-btn {
    border: 0;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.audio-center-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 28px;
}

.audio-center-play:hover {
    background: rgba(34, 207, 228, .85);
    transform: scale(1.05);
}

.audio-controls {
    width: 82%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.audio-progress {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.audio-time {
    font-size: 11px;
    white-space: nowrap;
    opacity: .7;
    min-width: 35px;
    text-align: right;
}


.audio-progress {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    accent-color: #22cfe4;
}


/* =========================================================
   HISTORY VIDEO
   Jangan samakan rasio video dengan image
========================================================= */

.history-gallery .generated-video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #111111;
}

.history-gallery .generated-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 12px;
}


/* =========================================================
   HISTORY VIDEO PLAY BUTTON
   Ukuran kecil untuk card 3 kolom
========================================================= */

.history-gallery .video-center-play {
    width: 28px;
    height: 28px;

    font-size: 16px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.history-gallery .video-center-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}


/* =========================================================
   LATEST VIDEO PLAY BUTTON
   Lebih besar karena area latest lebih lebar
========================================================= */

.latest-generation-container .video-center-play {
    width: 40px;
    height: 40px;

    font-size: 22px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.latest-generation-container .video-center-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}


/* =========================================================
   FIX HISTORY VIDEO CONTROLS
========================================================= */

.history-gallery .generated-image-box:has(.generated-video-wrapper) {
    aspect-ratio: auto !important;
    height: auto !important;
}

.history-gallery .generated-video-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
}

.history-gallery .generated-video-wrapper video {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    object-fit: contain !important;
    border-radius: 12px;
}

/* =========================================================
   IMPORTANT:
   INITIAL PAGE LOAD
   Jangan tampilkan chooser sebelum AJAX history selesai.
   
   JS tetap menjadi pengontrol utama:
   $('#creationTypeChooser').hide();
   kemudian .show() setelah loadGenerateHistory selesai.
========================================================= */

</style>


<div id="headerPricing"></div>

<section class="imagegen-page">

<div class="container-fluid px-lg-5 py-4">


    <!-- =====================================================
         HEADER
    ====================================================== -->

    <div class="imagegen-header text-center mb-4">

        <h1>
            Turn Your Ideas Into
            <span>Visuals.</span>
        </h1>

        <p id="generatorDescription">
            Describe what you imagine and let AI transform your
            words into stunning images.
        </p>

    </div>


    <div class="imagegen-card">

        <div class="imagegen-single-column">


            <!-- =================================================
                 LATEST GENERATION
            ================================================== -->

            <div
                id="latestGenerationPanel"
                class="generator-panel latest-generation-panel border-0 bg-transparent p-0"
            >

                <div
                    id="latestGenerationContainer"
                    class="latest-generation-container"
                >

                    <!--
                        Latest generation akan dimasukkan
                        melalui JavaScript.
                    -->

                    <div id="latestEmpty" class="latest-empty">
                        
                            <img
                                src="{{ asset('ikon.png') }}"
                                class="creasy-logo-pulse"
                                alt="Creasy"
                            >
                        
                            <div class="latest-empty-text">
                                Your creation will appear here
                            </div>
                        
                            <div
                                style="
                                    margin-top:6px;
                                    font-size:12px;
                                    color:#6f7885;
                                "
                            >
                                Start creating something amazing
                            </div>
                        
                        </div>

                </div>

            </div>


            <!-- =================================================
                 BOTTOM
                 PROMPT + HISTORY
            ================================================== -->

            <div class="generator-bottom-layout">
              
              <!-- =================================================
     CREATION TYPE CHOOSER
================================================== -->

<div
    id="creationTypeChooser"
    class="generator-panel creation-type-chooser"
>

    <div class="creation-type-title">
        What would you like to create?
    </div>

    <div class="creation-type-grid">

        <!-- IMAGE -->

        <button
            type="button"
            class="creation-type-card"
            data-creation-type="image"
        >

            <i class="bi bi-image"></i>

            <div>

                <strong>
                    Make Image
                </strong>

                <span>
                    Create stunning visuals
                </span>

            </div>

        </button>


        <!-- VIDEO -->

        <button
            type="button"
            class="creation-type-card"
            data-creation-type="video"
        >

            <i class="bi bi-camera-reels"></i>

            <div>

                <strong>
                    Make Video
                </strong>

                <span>
                    Bring your ideas to life
                </span>

            </div>

        </button>


        <!-- MUSIC -->

        <button
            type="button"
            class="creation-type-card"
            data-creation-type="music"
        >

            <i class="bi bi-music-note-beamed"></i>

            <div>

                <strong>
                    Make Music
                </strong>

                <span>
                    Create sounds and melodies
                </span>

            </div>

        </button>

    </div>

</div>

                <!-- =================================================
                     PROMPT
                ================================================== -->

                <div
                    id="promptPanel"
                    class="generator-panel"
                >

                    <div class="prompt-header mb-2">

                        <label
                            for="imagePrompt"
                            class="prompt-label fw-semibold mb-0"
                        >
                            Credit Cost
                        </label>
                        
                        <div class="prompt-credit-indicator">
                            <i class="bi bi-stars"></i>
                            <span id="promptCreditAmount">1 Credit</span>
                        </div>

                        <div class="generate-type-selector">

    <button
        type="button"
        id="changeCreationBtn"
        class="change-creation-btn"
    >
        <i class="bi bi-arrow-left"></i>
        Change Creation
    </button>

</div>

                    </div>
                    
                    <!-- IMAGE QUANTITY -->

                        <div
                            id="imageQuantityWrapper"
                            class="image-quantity-wrapper"
                        >
                        
                            <div class="image-quantity-selector">
                                
                                <span style='margin-right: auto;
    font-size: 13px;font-weight: 600;'>Quantity</span>
                        
                                <button
                                    type="button"
                                    class="quantity-btn active"
                                    data-quantity="1"
                                >
                                    1x
                                </button>
                        
                                <button
                                    type="button"
                                    class="quantity-btn"
                                    data-quantity="2"
                                >
                                    2x
                                </button>
                        
                                <button
                                    type="button"
                                    class="quantity-btn"
                                    data-quantity="3"
                                >
                                    3x
                                </button>
                        
                            </div>
                        
                        </div>


                    <!-- VIDEO DURATION -->

<div
    id="videoDurationWrapper"
    class="video-duration-wrapper"
    style="display:none;"
>

    <span style="margin-right:auto; font-size:13px;font-weight:600;">
        Duration
    </span>

    <div class="video-duration-selector">

        <button
            type="button"
            class="duration-btn"
            data-duration="4"
        >
            4s
        </button>

        <button
            type="button"
            class="duration-btn active"
            data-duration="6"
        >
            6s
        </button>

        <button
            type="button"
            class="duration-btn"
            data-duration="10"
        >
            10s
        </button>

    </div>

</div>





                   <!-- PROMPT -->

<div class="prompt-wrapper position-relative mb-3">

    <div
        id="promptReferenceLayout"
        class="prompt-reference-layout"
    >

        <!-- =============================================
             REFERENCE IMAGE
        ============================================== -->

        <div
            id="referenceImageColumn"
            class="reference-image-column"
        >

            <div
                id="referenceUploadCard"
                class="reference-image-card reference-upload-card"
                role="button"
                tabindex="0"
                title="Add reference image"
            >

               <i class="bi bi-cloud-upload"></i> 

            </div>

        </div>


        <!-- =============================================
             TEXTAREA
        ============================================== -->

        <div>

            <textarea
                id="imagePrompt"
                class="prompt-input form-control"
                maxlength="3000"
                rows="4"
                placeholder="Describe the image you want to create..."
            ></textarea>

        </div>

    </div>
    
   

    <!-- RESET -->

    <button
        type="button"
        id="resetPrompt"
        class="prompt-reset-btn"
        title="Clear prompt"
        aria-label="Clear prompt"
    >

        <i class="bi bi-arrow-counterclockwise"></i>

    </button>


    <!-- COUNTER -->

    <div
        id="promptCounter"
        class="prompt-counter text-end small mb-4"
    >

        0 / 3000

    </div>

</div>


<!-- =================================================
     MUSIC SETTINGS
================================================== -->

<div
    id="musicSettingsWrapper"
    class="music-settings-wrapper"
    style="display:none;"
>

    <!-- GENRE -->

    <div class="music-setting-item">

        <label
            for="musicGenre"
            class="prompt-label mb-2 fw-semibold d-block"
        >
            Genre
        </label>

        <select
            id="musicGenre"
            class="form-select music-select"
        >

            <option value="">
                Select Genre
            </option>

            <!--
                Nanti diisi dari database stylecreasi
                melalui backend.
            -->

        </select>

    </div>
    
    <div class="music-setting-item">
        <label for="musicStyle" class="prompt-label mb-2 fw-semibold d-block">
            Style
        </label>
    
        <select id="musicStyle" class="form-select music-select" disabled>
            <option value="">Select Style</option>
        </select>
    </div>


    <!-- BEAT -->

    <div class="music-setting-item">

        <label
            for="musicBeat"
            class="prompt-label mb-2 fw-semibold d-block"
        >
            Beat
        </label>

        <select
            id="musicBeat"
            class="form-select music-select"
        >

            <option value="">
                Select Beat
            </option>

            <option value="slow">
                Slow
            </option>

            <option value="medium">
                Medium
            </option>

            <option value="fast">
                Fast
            </option>

        </select>

    </div>


    <!-- MOOD -->

    <div class="music-setting-item">

        <label
            for="musicMood"
            class="prompt-label mb-2 fw-semibold d-block"
        >
            Mood
        </label>

        <select
            id="musicMood"
            class="form-select music-select"
        >

            <option value="">
                Select Mood
            </option>

            <option value="happy">
                Happy
            </option>

            <option value="romantic">
                Romantic
            </option>

            <option value="sad">
                Sad
            </option>

            <option value="energetic">
                Energetic
            </option>

            <option value="chill">
                Chill
            </option>

            <option value="peaceful">
                Peaceful
            </option>

            <option value="nostalgic">
                Nostalgic
            </option>

            <option value="dark">
                Dark
            </option>

            <option value="epic">
                Epic
            </option>

            <option value="inspiring">
                Inspiring
            </option>

        </select>

    </div>


    <!-- VOCAL -->

    <div class="music-setting-item">

        <label class="prompt-label mb-2 fw-semibold d-block">
            Vocal
        </label>


        <div
            class="music-vocal-slider"
            id="musicVocalSlider"
        >

            <label class="music-vocal-option">

                <input
                    type="radio"
                    name="musicVocal"
                    value="female"
                    checked
                >

                <span>
                    <i class="bi bi-person"></i>
                    Female
                </span>

            </label>


            <label class="music-vocal-option">

                <input
                    type="radio"
                    name="musicVocal"
                    value="male"
                >

                <span>
                    <i class="bi bi-person"></i>
                    Male
                </span>

            </label>
            
            


            <label class="music-vocal-option">

                <input
                    type="radio"
                    name="musicVocal"
                    value="duet"
                >

                <span>
                    <i class="bi bi-people"></i>
                    Duet
                </span>

            </label>


            <label class="music-vocal-option">

                <input
                    type="radio"
                    name="musicVocal"
                    value="instrumental"
                >

                <span>
                    <i class="bi bi-music-note"></i>
                    Instrumental
                </span>

            </label>
            
           <div class="music-vocal-gender-toggle">

            <span class="gender-label female-label">Female</span>
        
            <label class="gender-toggle">
                <input type="checkbox" id="musicGenderToggle">
                <span class="gender-track">
                    <span class="gender-thumb"></span>
                </span>
            </label>
        
            <span class="gender-label male-label">Male</span>
        
        </div>

        </div>

    </div>

</div>


<!-- HIDDEN FILE INPUT -->

<input
    type="file"
    id="referenceImageInput"
    accept="image/*"
    hidden
>


                   <!-- ASPECT RATIO -->

<div class="mb-4">

    <label
        class="prompt-label mb-2 fw-semibold d-block "
    >
     
    </label>


    <!-- DESKTOP / TABLET -->

    <div class="aspect-ratio-selector">

        <button
            type="button"
            class="aspect-btn "
            data-ratio="1:1"
        >
            <span class="aspect-icon icon-1-1"></span>
            1:1
        </button>

        <button
            type="button"
            class="aspect-btn"
            data-ratio="4:3"
        >
            <span class="aspect-icon icon-4-3"></span>
            4:3
        </button>

        <button
            type="button"
            class="aspect-btn"
            data-ratio="3:4"
        >
            <span class="aspect-icon icon-3-4"></span>
            3:4
        </button>

        <button
            type="button"
            class="aspect-btn"
            data-ratio="16:9"
        >
            <span class="aspect-icon icon-16-9"></span>
            16:9
        </button>

        <button
            type="button"
            class="aspect-btn active"
            data-ratio="9:16"
        >
            <span class="aspect-icon icon-9-16"></span>
            9:16
        </button>

    </div>


    <!-- MOBILE SLIDER -->
<div id='mb-slide'>
    <div class="mobile-aspect-slider">

        <div class="mobile-aspect-value">
            <span id="mobileAspectValue">
                9:16
            </span>
        </div>

       <input
            type="range"
            id="mobileAspectRange"
            min="0"
            max="4"
            step="1"
            value="4"
        >

        <div class="mobile-aspect-labels">

            <span>1:1</span>
            <span>4:3</span>
            <span>3:4</span>
            <span>16:9</span>
            <span>9:16</span>

        </div>

    </div>
  </div>

</div>


                    <!-- GENERATE -->

                    <button
                        type="button"
                        id="generateButton"
                        class="generate-button btn btn-primary w-100 py-2 fw-bold"
                    >
                        <i class="bi bi-stars"></i>
                        Generate Image
                    </button>


                    <div
                        id="resultStatus"
                        class="text-center small mt-3 text-secondary"
                    ></div>

                </div>


                <!-- =================================================
                     HISTORY
                ================================================== -->

                <div
                    id="historyPanel"
                    class="generator-panel history-panel"
                >

                    <div class="history-title">

                        <h3>
                            Generation History
                        </h3>
                        
                        <span>
                        <span id='gambarhistori' style="cursor:pointer;">
                            <i class="bi bi-image"></i>
                        </span>

                        <span id='gantihistori' style="cursor:pointer; margin-left: 12px;">
                            <i class="bi bi-chevron-right"></i>
                        </span>
                        </span>

                    </div>


                   <div id="historyGallery" class="history-gallery"></div>

                    <!-- HISTORY PAGINATION -->
                    <div id="historyPagination"
                         class="history-pagination"
                         style="display:none;">
                    
                        <button type="button"
                                id="historyPrev"
                                class="btn btn-outline-light" style="margin-right:5%">
                            <i class="bi bi-chevron-left"></i>
                            Back
                        </button>
                    
                        <button type="button"
                                id="historyNext"
                                class="btn btn-outline-light">
                            Next
                            <i class="bi bi-chevron-right"></i>
                        </button>
                    
                    </div>
                    
                    <div id="historyEmpty" class="text-center py-5" style="display:none;">
                        <i class="bi bi-images fs-1 text-secondary"></i>

                        <div class="mt-2 text-secondary">
                            No previous generations
                        </div>
                    </div>

                       

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</section>


@php

$pendingPaymentCount = 0;

if (session()->has('user_id')) {

    $pendingPaymentCount = DB::table('pesanan')
        ->where('iduser', session('user_id'))
        ->where('status', 'pending')
        ->count();

}

@endphp


@if($pendingPaymentCount > 0)

<a
    href="{{ route('payment.pending') }}"
    class="pending-payment-float"
    title="Kirim Bukti Transfer"
>

    <i class="bi bi-whatsapp"></i>

    <span>
        Kirim Bukti Transfer
    </span>

    <div class="pending-payment-badge">
        {{ $pendingPaymentCount }}
    </div>

</a>

@endif

@include('partials.footer')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>


<script>

$(document).ready(function () {

    /* =====================================================
       ELEMENTS
    ====================================================== */

    const $promptInput =
        $('#imagePrompt');

    const $promptCounter =
        $('#promptCounter');

    const $generateButton =
        $('#generateButton');

    const $resultStatus =
        $('#resultStatus');

    const $latestContainer =
        $('#latestGenerationContainer');

    const $latestEmpty =
        $('#latestEmpty');

    const $historyGallery =
        $('#historyGallery');

    const $historyEmpty =
        $('#historyEmpty');

    const $generatorDesc =
        $('#generatorDescription');


    /* =====================================================
       STATE
    ====================================================== */

    let selectedType = 'image';

    let selectedRatio = '9:16';

    let selectedDuration = 6;

    let selectedQuantity = 1;
    
    
    let selectedMusicGenre = '';
    let selectedMusicStyle = '';
    let selectedMusicBeat = 'medium';
    let selectedMusicMood = 'chill';
    let selectedMusicVocal = 'female';
    
    let musicGenresLoaded = false;
    
    let historyPage = 1;
    let historyLastPage = 1;
    
    $('#musicGenre').on('change', function () {

    selectedMusicGenre = $(this).val();

    const styleSelect = $('#musicStyle');

    styleSelect.empty();
    styleSelect.append('<option value="">Select Style</option>');
    styleSelect.prop('disabled', true);

    selectedMusicStyle = '';

    if (!selectedMusicGenre) {
        return;
    }

    styleSelect.html('<option value="">Loading Style...</option>');

    $.get('{{ route("music.styles") }}', {
        category: selectedMusicGenre
    }, function (styles) {

        styleSelect.empty();
        styleSelect.append('<option value="">Select Style</option>');

        styles.forEach(function (style) {

            styleSelect.append(
                $('<option>', {
                    value: style.id,
                    text: style.name
                })
            );

        });

        styleSelect.prop('disabled', false);

    }).fail(function () {

        styleSelect.html(
            '<option value="">Failed to load style</option>'
        );

    });
});

$('#musicStyle').on('change', function () {

    selectedMusicStyle = $(this).val();

});


    /* =====================================================
       INITIAL CREATION STATE
    ====================================================== */

    $('#promptPanel').hide();

    $('#creationTypeChooser').show();


    /* =====================================================
       CREDIT INDICATOR
    ====================================================== */

    function updateCreditIndicator() {

        let credit = 1;


        /*
         * IMAGE
         * 1x = 1 credit
         * 2x = 2 credits
         * 3x = 3 credits
         */

        if (
            selectedType === 'image'
        ) {

            credit =
                selectedQuantity;

        }


        /*
         * VIDEO
         * 4s  = 8 credits
         * 6s  = 12 credits
         * 10s = 20 credits
         */

        else if (
            selectedType === 'video'
        ) {

            if (
                selectedDuration === 4
            ) {

                credit = 8;

            }

            else if (
                selectedDuration === 6
            ) {

                credit = 12;

            }

            else if (
                selectedDuration === 10
            ) {

                credit = 20;

            }

        }


        /*
         * MUSIC
         * 1 music = 1 credit
         */

        else if (
            selectedType === 'music'
        ) {

            credit = 1;

        }


        $('#promptCreditAmount').text(
            credit +
            (
                credit === 1
                    ? ' Credit'
                    : ' Credits'
            )
        );


        /*
         * SHAKE SAAT NILAI BERUBAH
         */

        const $creditIndicator =
            $('.prompt-credit-indicator');


        $creditIndicator.removeClass(
            'credit-shake'
        );


        void $creditIndicator[0]?.offsetWidth;


        $creditIndicator.addClass(
            'credit-shake'
        );

    }


    /* =====================================================
       REFERENCE IMAGE
    ====================================================== */

    let referenceImages = [];

    const MAX_REFERENCE_IMAGES = 2;


    const $referenceColumn =
        $('#referenceImageColumn');

    const $referenceInput =
        $('#referenceImageInput');


    /* =====================================================
       ESCAPE HTML
    ====================================================== */

    function escapeHtml(text) {

        return String(text ?? '')
            .replace(
                /&/g,
                '&amp;'
            )
            .replace(
                /</g,
                '&lt;'
            )
            .replace(
                />/g,
                '&gt;'
            )
            .replace(
                /"/g,
                '&quot;'
            )
            .replace(
                /'/g,
                '&#039;'
            );

    }


    /* =====================================================
       REFERENCE IMAGE RENDER
    ====================================================== */

    function renderReferenceImages() {

        $referenceColumn.empty();


        /*
         * RENDER IMAGE YANG SUDAH DIPILIH
         */

        referenceImages.forEach(
            function (item, index) {

                const card = `

                    <div
                        class="reference-image-card reference-preview-card"
                        data-reference-index="${index}"
                    >

                        <img
                            src="${escapeHtml(item.preview)}"
                            alt="Reference ${index + 1}"
                        >

                        <button
                            type="button"
                            class="reference-remove-btn"
                            data-reference-index="${index}"
                            title="Remove"
                            aria-label="Remove reference image"
                        >

                            <i class="bi bi-x-lg"></i>

                        </button>

                    </div>

                `;


                $referenceColumn.append(
                    card
                );

            }
        );


        /*
         * TAMBAHKAN SLOT UPLOAD
         * SELAMA BELUM 2 GAMBAR
         */

        if (
            referenceImages.length <
            MAX_REFERENCE_IMAGES
        ) {

            $referenceColumn.append(`

                <div
                    id="referenceUploadCard"
                    class="reference-image-card reference-upload-card"
                    role="button"
                    tabindex="0"
                    title="Add reference image"
                >

                    <i class="bi bi-cloud-upload"></i>

                </div>

            `);

        }

    }


    /* =====================================================
       CLICK UPLOAD CARD
    ====================================================== */

    $(document).on(
        'click',
        '#referenceUploadCard',
        function () {

            if (
                referenceImages.length >=
                MAX_REFERENCE_IMAGES
            ) {

                return;

            }


            $referenceInput.trigger(
                'click'
            );

        }
    );


    /* =====================================================
       KEYBOARD UPLOAD
    ====================================================== */

    $(document).on(
        'keydown',
        '#referenceUploadCard',
        function (e) {

            if (
                e.key === 'Enter' ||
                e.key === ' '
            ) {

                e.preventDefault();

                $(this).trigger(
                    'click'
                );

            }

        }
    );


    /* =====================================================
       SELECT REFERENCE IMAGE
    ====================================================== */

    $referenceInput.on(
        'change',
        function (e) {

            const files =
                Array.from(
                    e.target.files || []
                );


            if (
                !files.length
            ) {

                return;

            }


            const file =
                files[0];


            /*
             * VALIDASI FILE
             */

            if (
                !file.type ||
                !file.type.startsWith(
                    'image/'
                )
            ) {

                alert(
                    'Silakan pilih file gambar.'
                );


                $referenceInput.val(
                    ''
                );


                return;

            }


            if (
                referenceImages.length >=
                MAX_REFERENCE_IMAGES
            ) {

                $referenceInput.val(
                    ''
                );


                return;

            }


            /*
             * PREVIEW
             */

            const previewUrl =
                URL.createObjectURL(
                    file
                );


            referenceImages.push({

                file: file,

                preview: previewUrl

            });


            renderReferenceImages();


            /*
             * RESET INPUT
             * Supaya file yang sama bisa dipilih lagi
             */

            $referenceInput.val(
                ''
            );

        }
    );


    /* =====================================================
       REMOVE REFERENCE IMAGE
    ====================================================== */

    $(document).on(
        'click',
        '.reference-remove-btn',
        function (e) {

            e.preventDefault();

            e.stopPropagation();


            const index =
                parseInt(
                    $(this).data(
                        'reference-index'
                    ),
                    10
                );


            if (
                Number.isNaN(index) ||
                !referenceImages[index]
            ) {

                return;

            }


            /*
             * HAPUS OBJECT URL
             */

            if (
                referenceImages[index].preview
            ) {

                URL.revokeObjectURL(
                    referenceImages[index].preview
                );

            }


            /*
             * HAPUS DARI ARRAY
             */

            referenceImages.splice(
                index,
                1
            );


            renderReferenceImages();

        }
    );


    /* =====================================================
       DETECT VIDEO
    ====================================================== */

    function isVideoUrl(url) {

        const cleanUrl =
            String(url || '')
                .split('?')[0]
                .split('#')[0]
                .toLowerCase();


        return (
            cleanUrl.endsWith('.mp4') ||
            cleanUrl.endsWith('.webm') ||
            cleanUrl.endsWith('.mov') ||
            cleanUrl.endsWith('.m4v')
        );

    }


    /* =====================================================
       DETECT AUDIO
    ====================================================== */

    function isAudioUrl(url) {

        const cleanUrl =
            String(url || '')
                .split('?')[0]
                .split('#')[0]
                .toLowerCase();


        return (
            cleanUrl.endsWith('.mp3') ||
            cleanUrl.endsWith('.wav') ||
            cleanUrl.endsWith('.ogg') ||
            cleanUrl.endsWith('.m4a') ||
            cleanUrl.endsWith('.aac')
        );

    }


    /* =====================================================
       DETECT MEDIA TYPE
    ====================================================== */

    function isMusicItem(item) {

        if (!item) {

            return false;

        }


        /*
         * TYPE
         */

        if (
            String(item.type || '')
                .toLowerCase() === 'music'
        ) {

            return true;

        }


        /*
         * MIME TYPE
         */

        if (
            item.mime_type &&
            String(item.mime_type)
                .toLowerCase()
                .startsWith('audio/')
        ) {

            return true;

        }


        /*
         * URL EXTENSION
         */

        return isAudioUrl(
            item.image_url ||
            item.audio_url ||
            ''
        );

    }


    /* =====================================================
       CREATE MEDIA HTML
    ====================================================== */

    function createMediaHtml(
        item,
        latest = false
    ) {

        if (!item) {

            return '';

        }


        /*
         * MUSIC BISA MEMAKAI audio_url
         * ATAU image_url
         */

        const mediaUrl =
            item.audio_url ||
            item.image_url ||
            '';


        if (!mediaUrl) {

            return '';

        }


        /*
         * MUSIC
         */

        if (
            isMusicItem(item)
        ) {

            return `

                <div class="generated-audio-box">

                    <i class="bi bi-music-note-beamed audio-icon"></i>
                
                    <audio
                        src="${escapeHtml(mediaUrl)}"
                        preload="metadata"
                    ></audio>
                
               
                    <div class="audio-controls">
                
                        <button
                            type="button"
                            class="audio-play-btn"
                            aria-label="Play audio"
                        >
                            <i class="bi bi-play-fill"></i>
                        </button>
                
                        <input
                            type="range"
                            class="audio-progress"
                            min="0"
                            max="100"
                            value="0"
                        >
                
                        <span class="audio-time">0:00 / 0:00</span>
                
                    </div>
                
                </div>

            `;

        }


        /*
         * VIDEO
         */

        const video =
            item.type === 'video' ||
            isVideoUrl(mediaUrl);


        if (video) {

            return `

                <div class="generated-video-wrapper">

            <video
                src="${escapeHtml(mediaUrl)}"
              
                preload="metadata"
                playsinline
            ></video>

            <button
                type="button"
                class="video-center-play"
                aria-label="Play video"
            >
                <i class="bi bi-play-fill"></i>
            </button>

        </div>

            `;

        }


        /*
         * IMAGE
         */

        return `

            <img
                src="${escapeHtml(mediaUrl)}"
                alt="Generated AI Image"
                loading="${latest ? 'eager' : 'lazy'}"
            >

        `;

    }


    /* =====================================================
       CREATE CARD
    ====================================================== */

    function createCard(
        item,
        latest = false
    ) {

        if (!item) {

            return '';

        }


        /*
         * MUSIC BISA MEMAKAI audio_url
         */

        const mediaUrl =
            item.audio_url ||
            item.image_url ||
            '';


        if (!mediaUrl) {

            return '';

        }


        const music =
            isMusicItem(item);


        const video =
            !music &&
            (
                item.type === 'video' ||
                isVideoUrl(mediaUrl)
            );


        const downloadName =
            music
                ? `creasy-${item.id}.mp3`
                : video
                    ? `creasy-${item.id}.mp4`
                    : `creasy-${item.id}.png`;


        const downloadTitle =
            music
                ? 'Download Music'
                : video
                    ? 'Download Video'
                    : 'Download Image';


        return `

            <div
                class="generated-card-item"
                id="card-${item.id}"
                data-id="${item.id}"
            >

                <div class="generated-image-box">

                    ${createMediaHtml(
                        item,
                        latest
                    )}
                    
                    
                    <button
                        type="button"
                        class="btn card-overlay-btn btn-overlay-add-prompt"
                        data-id="${item.id}"
                        data-image="${escapeHtml(mediaUrl)}"
                        title="Add to Prompt"
                        aria-label="Add to Prompt"
                    >
                        <i class="bi bi-plus-lg"></i>
                    </button>


                   <button
                        type="button"
                        class="btn card-overlay-btn btn-overlay-download"
                        data-id="${item.id}"
                        data-download-name="${escapeHtml(downloadName)}"
                        title="${downloadTitle}"
                    >
                        <i class="bi bi-download me-1"></i>
                    </button>


                    <button
                        type="button"
                        class="btn card-overlay-btn btn-overlay-delete"
                        title="Hapus"
                        data-id="${item.id}"
                    >

                        <i class="bi bi-trash"></i>

                    </button>

                </div>

            </div>

        `;

    }


    /* =====================================================
       RENDER LATEST
    ====================================================== */

    function renderLatestImages(
        images
    ) {

        if (
            !Array.isArray(images) ||
            images.length === 0
        ) {

            $latestEmpty.show();


            $latestContainer
                .removeClass(
                    'latest-multiple latest-single'
                )
                .removeAttr(
                    'data-latest-count'
                );


            return;

        }


        /*
         * BATASI MAKSIMAL 3
         */

        const latestImages =
            images.slice(0, 3);


        /*
         * HANYA BERSIHKAN LATEST
         *
         * HISTORY TIDAK DISENTUH
         */

        $latestContainer
            .children(
                '.generated-card-item'
            )
            .remove();


        const count =
            latestImages.length;


        $latestContainer
            .removeClass(
                'latest-multiple latest-single'
            )
            .attr(
                'data-latest-count',
                count
            );


        if (
            count === 1
        ) {

            $latestContainer.addClass(
                'latest-single'
            );

        }

        else {

            $latestContainer.addClass(
                'latest-multiple'
            );

        }


        $latestEmpty.hide();


        /*
         * RENDER
         */

        latestImages.forEach(
            function (item) {

                const card =
                    createCard(
                        item,
                        true
                    );


                if (card) {

                    $latestContainer.append(
                        card
                    );

                }

            }
        );


        /*
         * KALAU SEMUA GAGAL
         */

        if (
            !$latestContainer
                .children(
                    '.generated-card-item'
                )
                .length
        ) {

            $latestEmpty.show();

        }

    }


    /* =====================================================
       LOAD GENERATE HISTORY
       
       PENTING:
       HISTORY TIDAK DIKOSONGKAN
       SEBELUM DATA BARU SIAP.
    ====================================================== */

   /* =====================================================
   LOAD GENERATE HISTORY
===================================================== */

function loadGenerateHistory(showLatest = false) {

    $.ajax({

        url: "{{ url('/generate-history') }}",

        type: "GET",

        dataType: "json",

        data: {
            type: selectedType,
            page: historyPage
        },

        success: function (response) {

            console.log(
                'GENERATE HISTORY RESPONSE:',
                response
            );

            /*
             * VALIDASI
             */

            if (
                !response ||
                response.status !== 'success'
            ) {

                console.error(
                    'History response tidak sukses:',
                    response
                );

                return;
            }


            /*
             * DATA HISTORY
             */

            const data =
                Array.isArray(response.data)
                    ? response.data
                    : [];


            /*
             * DATA LATEST
             */

            const latestData =
                Array.isArray(response.latest)
                    ? response.latest
                    : [];


            console.log(
                'GENERATE HISTORY DATA:',
                data
            );


            /*
             * RENDER HISTORY
             *
             * Backend sudah melakukan pagination.
             * Jadi JANGAN slice() lagi.
             */

            let historyHtml = '';


            data.forEach(function (item) {

                const card =
                    createCard(
                        item,
                        false
                    );


                if (card) {

                    historyHtml += card;

                }

            });


            /*
             * MASUKKAN HISTORY
             */

            $historyGallery.html(
                historyHtml
            );
            
            $historyGallery.toggleClass(
                'history-music',
                selectedType === 'music'
            );


            /*
             * EMPTY STATE
             */

            if (
                historyHtml === ''
            ) {

                $historyEmpty.show();

            } else {

                $historyEmpty.hide();

            }


            /*
             * PAGINATION
             */

            const pagination =
                response.pagination || {};


            historyPage =
                parseInt(
                    pagination.current_page || 1,
                    10
                );


            historyLastPage =
                parseInt(
                    pagination.last_page || 1,
                    10
                );


            updateHistoryPagination(
                pagination
            );


            /*
             * LATEST GENERATION
             *
             * Hanya diperbarui kalau diminta.
             */

            if (showLatest) {

                if (
                    latestData.length > 0
                ) {

                    renderLatestImages(
                        latestData
                    );

                }

                else {

                    $latestContainer
                        .children(
                            '.generated-card-item'
                        )
                        .remove();


                    $latestContainer
                        .removeClass(
                            'latest-multiple latest-single'
                        )
                        .removeAttr(
                            'data-latest-count'
                        );


                    $latestEmpty.show();

                }

            }

        },


        error: function (xhr) {

            console.error(
                'Gagal mengambil generate history:',
                xhr.responseText
            );


            $historyGallery.empty();

            $historyEmpty.show();

            $('#historyPagination').hide();


            if (showLatest) {

                $latestEmpty.show();

            }

        }

    });

}


/* =====================================================
   UPDATE HISTORY PAGINATION
===================================================== */

function updateHistoryPagination(
    pagination
) {

    const $pagination =
        $('#historyPagination');


    const currentPage =
        parseInt(
            pagination.current_page || 1,
            10
        );


    const lastPage =
        parseInt(
            pagination.last_page || 1,
            10
        );


    /*
     * Tidak perlu pagination kalau
     * hanya ada satu halaman.
     */

    if (
        lastPage <= 1
    ) {

        $pagination.hide();

        return;

    }


    /*
     * Tampilkan pagination
     */

    $pagination.show();


    /*
     * BACK
     */

    $('#historyPrev').prop(
        'disabled',
        currentPage <= 1
    );


    /*
     * NEXT
     */

    $('#historyNext').prop(
        'disabled',
        currentPage >= lastPage
    );

}


/* =====================================================
   HISTORY BACK
===================================================== */

$(document).on(
    'click',
    '#historyPrev',
    function () {

        if (
            historyPage <= 1
        ) {

            return;

        }


        historyPage--;


        loadGenerateHistory(
            false
        );

    }
);

/*=====================AUIDO PLAY ==================== */

/* =====================================================
   CUSTOM AUDIO PLAYER
===================================================== */

function formatAudioTime(seconds) {

    if (!Number.isFinite(seconds) || seconds < 0) {
        return '0:00';
    }

    const minutes = Math.floor(seconds / 60);

    const secs = Math.floor(seconds % 60)
        .toString()
        .padStart(2, '0');

    return `${minutes}:${secs}`;
}


/* =====================================================
   UPDATE UI
===================================================== */

function updateAudioPlayer(audio) {

    const $box = $(audio).closest('.generated-audio-box');

    if (!$box.length) return;

    const current = audio.currentTime || 0;
    const duration = audio.duration;

    /* DURASI */

    const currentText = formatAudioTime(current);

    const durationText = formatAudioTime(duration);

    $box.find('.audio-time').text(
        `${currentText} / ${durationText}`
    );


    /* SLIDER */

    if (
        Number.isFinite(duration) &&
        duration > 0
    ) {

        const percent =
            (current / duration) * 100;

        $box.find('.audio-progress')
            .val(percent);
    }


    /* ICON */

    const $icons =
        $box.find(
            '.audio-center-play i, .audio-play-btn i'
        );

    $icons
        .removeClass(
            'bi-play-fill bi-pause-fill'
        )
        .addClass(
            audio.paused
                ? 'bi-play-fill'
                : 'bi-pause-fill'
        );
}


/* =====================================================
   PLAY / PAUSE BUTTON
===================================================== */

$(document).on(
    'click',
    '.audio-center-play, .audio-play-btn',
    function (e) {

        e.preventDefault();
        e.stopPropagation();

        const $box =
            $(this).closest('.generated-audio-box');

        const audio =
            $box.find('audio').get(0);

        if (!audio) return;


        if (audio.paused) {

            audio.play()
                .then(function () {

                    /* LANGSUNG UBAH ICON */
                    $box.find(
                        '.audio-center-play i, .audio-play-btn i'
                    )
                    .removeClass('bi-play-fill')
                    .addClass('bi-pause-fill');

                })
                .catch(function (error) {

                    console.error(
                        'Audio gagal play:',
                        error
                    );

                });

        } else {

            audio.pause();

            /* LANGSUNG KEMBALI PLAY */
            $box.find(
                '.audio-center-play i, .audio-play-btn i'
            )
            .removeClass('bi-pause-fill')
            .addClass('bi-play-fill');
        }
    }
);


/* =====================================================
   AUDIO POLLING
   Tidak bergantung timeupdate
===================================================== */

let audioPlayerTimer = null;

function startAudioPlayerTimer() {

    if (audioPlayerTimer) return;

    audioPlayerTimer = setInterval(function () {

        $('.generated-audio-box audio').each(function () {

            const audio = this;

            if (!audio.paused) {

                updateAudioPlayer(audio);

            }

        });

    }, 100);
}


/* =====================================================
   START TIMER
===================================================== */

startAudioPlayerTimer();


/* =====================================================
   METADATA
===================================================== */

$(document).on(
    'loadedmetadata',
    '.generated-audio-box audio',
    function () {

        updateAudioPlayer(this);
    }
);


/* =====================================================
   DURATION CHANGE
===================================================== */

$(document).on(
    'durationchange',
    '.generated-audio-box audio',
    function () {

        updateAudioPlayer(this);
    }
);


/* =====================================================
   PLAY
===================================================== */

$(document).on(
    'play',
    '.generated-audio-box audio',
    function () {

        updateAudioPlayer(this);
    }
);


/* =====================================================
   PAUSE
===================================================== */

$(document).on(
    'pause',
    '.generated-audio-box audio',
    function () {

        updateAudioPlayer(this);
    }
);


/* =====================================================
   ENDED
===================================================== */

$(document).on(
    'ended',
    '.generated-audio-box audio',
    function () {
           
       
        const audio = this;

        // Pastikan berhenti
        audio.pause();

        // Kembali ke awal
        audio.currentTime = 0;

        // Update UI
        updateAudioPlayer(audio);
    }
);


/* =====================================================
   SLIDER MANUAL
===================================================== */

$(document).on(
    'input',
    '.audio-progress',
    function () {

        const $box =
            $(this).closest('.generated-audio-box');

        const audio =
            $box.find('audio').get(0);

        if (!audio) return;

        if (
            !Number.isFinite(audio.duration) ||
            audio.duration <= 0
        ) {
            return;
        }

        const percent =
            parseFloat(this.value) / 100;

        audio.currentTime =
            percent * audio.duration;

        updateAudioPlayer(audio);
    }
);


/* =====================================================
   VIDEO PLAY BUTTON
===================================================== */

$(document).on(
    'click',
    '.video-center-play',
    function (e) {

        e.preventDefault();
        e.stopPropagation();

        const $button = $(this);

        const $wrapper =
            $button.closest('.generated-video-wrapper');

        const video =
            $wrapper.find('video').get(0);

        if (!video) {
            console.warn('Video element tidak ditemukan.');
            return;
        }

        /*
         * AKTIFKAN NATIVE CONTROLS
         */
        video.controls = true;

        /*
         * PLAY VIDEO
         */
        const playPromise = video.play();

        if (playPromise !== undefined) {

            playPromise
                .then(function () {

                    console.log('VIDEO PLAY');

                    /*
                     * HILANGKAN TOMBOL PLAY TENGAH
                     */
                    $button.hide();

                    /*
                     * CONTROLS TETAP AKTIF
                     */
                    video.controls = true;

                })
                .catch(function (error) {

                    console.error(
                        'Video gagal play:',
                        error
                    );

                    /*
                     * Kalau gagal play,
                     * tombol tetap tampil
                     */
                    $button.show();

                    video.controls = true;

                });

        } else {

            /*
             * Browser lama / play() tanpa Promise
             */
            $button.hide();

            video.controls = true;

        }

    }
);

/* =====================================================
   HISTORY NEXT
===================================================== */

$(document).on(
    'click',
    '#historyNext',
    function () {

        if (
            historyPage >= historyLastPage
        ) {

            return;

        }


        historyPage++;


        loadGenerateHistory(
            false
        );

    }
);

    /* =====================================================
       INITIAL LOAD
    ====================================================== */

    loadGenerateHistory();

    updateCreditIndicator();


    /* =====================================================
       CREATION TYPE SELECTOR
    ====================================================== */

    function selectCreationType(
        type
    ) {

        selectedType =
            type;

        historyPage = 1;
        historyLastPage = 1;
        
        $('#creationTypeChooser').hide();

        $('#promptPanel').show();


        /*
         * IMAGE
         */

        if (
            selectedType === 'image'
        ) {
            $('#musicSettingsWrapper').hide();

            $('#videoDurationWrapper')
                .hide();


            $('#imageQuantityWrapper')
                .show();


            $('.aspect-ratio-selector')
                .show();


            $('.prompt-label')
                .html(
                    'Aspect Ratio'
                );


            $('#mb-slide')
                .show();


            $('.quantity-btn')
                .removeClass(
                    'active'
                );


            $('.quantity-btn[data-quantity="1"]')
                .addClass(
                    'active'
                );


            selectedQuantity =
                1;


            $generatorDesc.text(
                'Describe what you imagine and let AI transform your words into stunning images.'
            );


            $promptInput.attr(
                'placeholder',
                'Describe the image you want to create...'
            );


            $generateButton.html(
                '<i class="bi bi-stars"></i> Generate Image'
            );


            updateCreditIndicator();

        }


        /*
         * VIDEO
         */

        else if (
            selectedType === 'video'
        ) {
            $('#musicSettingsWrapper').hide();

            $('#imageQuantityWrapper')
                .hide();


            $('.aspect-ratio-selector')
                .show();


            $('.prompt-label')
                .html(
                    'Aspect Ratio'
                );


            $('#mb-slide')
                .show();


            /*
             * VIDEO DEFAULT 6 DETIK
             */

            selectedDuration =
                6;


            $('.duration-btn')
                .removeClass(
                    'active'
                );


            $('.duration-btn[data-duration="6"]')
                .addClass(
                    'active'
                );


            $('#videoDurationWrapper')
                .show();


            $generatorDesc.text(
                'Describe your idea and let AI transform it into a cinematic video.'
            );


            $promptInput.attr(
                'placeholder',
                'Describe the video you want to create...'
            );


            $generateButton.html(
                '<i class="bi bi-camera-reels"></i> Generate Video'
            );


            updateCreditIndicator();

        }


        /*
         * MUSIC
         */

        else if (
            selectedType === 'music'
        ) {

            /*
             * MUSIC TIDAK MEMILIKI DURATION
             */

            selectedDuration =
                null;
            
            loadMusicGenres();

            $('#musicSettingsWrapper').show();
            
            $('#imageQuantityWrapper')
                .hide();


            $('#videoDurationWrapper')
                .hide();


            $('.aspect-ratio-selector')
                .hide();


            $('.prompt-label')
                .html('');


            $('#mb-slide')
                .hide();


            $generatorDesc.text(
                'Describe the sound you imagine and let AI turn your idea into music.'
            );


            $promptInput.attr(
                'placeholder',
                'Describe the music you want to create...'
            );


            $generateButton.html(
                '<i class="bi bi-music-note-beamed"></i> Create Music'
            );


            updateCreditIndicator();

        }
        
        loadGenerateHistory(false);

    }


    $('.creation-type-card').on(
        'click',
        function () {

            const type =
                $(this).data(
                    'creation-type'
                );


            selectCreationType(
                type
            );

        }
    );


$('.creation-type-card').on(
    'click',
    function () {

        const type =
            $(this).data(
                'creation-type'
            );

        selectCreationType(
            type
        );

    }
);


/* =====================================================
   CHANGE HISTORY TYPE
   IMAGE → VIDEO → MUSIC → IMAGE
===================================================== */

$('#gantihistori').on(
    'click',
    function () {

        if (selectedType === 'image') {

            selectCreationType('video');

        }

        else if (selectedType === 'video') {

            selectCreationType('music');

        }

        else {

            selectCreationType('image');

        }

    }
);


    /* =====================================================
       CHANGE CREATION
    ====================================================== */

    $('#changeCreationBtn').on(
        'click',
        function () {

            $('#promptPanel')
                .hide();


            $('#creationTypeChooser')
                .show();


            /*
             * HISTORY TETAP
             * LATEST TETAP
             * PROMPT TIDAK DIUBAH
             */

            $resultStatus.text('');

        }
    );


    /* =====================================================
       VIDEO DURATION
    ====================================================== */

    $('.duration-btn').on(
        'click',
        function () {

            $('.duration-btn')
                .removeClass(
                    'active'
                );


            $(this)
                .addClass(
                    'active'
                );


            selectedDuration =
                parseInt(
                    $(this).data(
                        'duration'
                    ),
                    10
                );


            updateCreditIndicator();

        }
    );


/* =====================================================
   HISTORY IMAGE ONLY
===================================================== */

$('#gambarhistori').on(
    'click',
    function () {

        selectedType = 'image';

        historyPage = 1;
        historyLastPage = 1;

        loadGenerateHistory(false);

    }
);

    /* =====================================================
       IMAGE QUANTITY
    ====================================================== */

    $('.quantity-btn').on(
        'click',
        function () {

            $('.quantity-btn')
                .removeClass(
                    'active'
                );


            $(this)
                .addClass(
                    'active'
                );


            selectedQuantity =
                parseInt(
                    $(this).data(
                        'quantity'
                    ),
                    10
                );


            updateCreditIndicator();

        }
    );
    
    
    






    /* =====================================================
       ASPECT RATIO
    ====================================================== */

    $('.aspect-btn').on(
        'click',
        function () {

            $('.aspect-btn')
                .removeClass(
                    'active'
                );


            $(this)
                .addClass(
                    'active'
                );


            selectedRatio =
                $(this).data(
                    'ratio'
                );

        }
    );
    
    /* =====================================================
       MUSIC SETTINGS
    ===================================================== */
    
    $('#musicGenre').on(
        'change',
        function () {
    
            selectedMusicGenre =
                $(this).val();
    
        }
    );
    
    
    $('#musicBeat').on(
        'change',
        function () {
    
            selectedMusicBeat =
                $(this).val();
    
        }
    );
    
    
    $('#musicMood').on(
        'change',
        function () {
    
            selectedMusicMood =
                $(this).val();
    
        }
    );
    
    
    $(document).on(
        'change',
        'input[name="music_vocal"]',
        function () {
    
            selectedMusicVocal =
                $(this).val();
    
        }
    );


    /* =====================================================
       MOBILE ASPECT RATIO SLIDER
    ====================================================== */

    const mobileAspectRatios = [

        '1:1',

        '4:3',

        '3:4',

        '16:9',

        '9:16'

    ];


    $('#mobileAspectRange').on(
        'input',
        function () {

            const index =
                parseInt(
                    $(this).val(),
                    10
                );


            selectedRatio =
                mobileAspectRatios[
                    index
                ];


            /*
             * UPDATE LABEL
             */

            $('#mobileAspectValue')
                .text(
                    selectedRatio
                );


            /*
             * UPDATE DESKTOP BUTTON
             */

            $('.aspect-btn')
                .removeClass(
                    'active'
                );


            $(
                '.aspect-btn[data-ratio="' +
                selectedRatio +
                '"]'
            )
                .addClass(
                    'active'
                );


            /*
             * UPDATE SLIDER PROGRESS
             */

            const percentage =
                (index / 4) * 100;


            $(this).css(
                'background',
                `linear-gradient(
                    to right,
                    #0d6efd 0%,
                    #0d6efd ${percentage}%,
                    rgba(255,255,255,0.15) ${percentage}%,
                    rgba(255,255,255,0.15) 100%
                )`
            );

        }
    );


    /* =====================================================
       PROMPT COUNTER
    ====================================================== */

    function updateCounter() {

        const length =
            $promptInput.val().length;


        $promptCounter.text(
            length + ' / 3000'
        );

    }


    $promptInput.on(
        'input',
        updateCounter
    );


    updateCounter();


    /* =====================================================
       RESET PROMPT
    ====================================================== */

    $('#resetPrompt').on(
        'click',
        function () {

            $promptInput.val('');

            updateCounter();

            $promptInput.focus();

        }
    );


    /* =====================================================
       DELETE GENERATE
    ====================================================== */

    $(document).on(
        'click',
        '.btn-overlay-delete',
        function (e) {

            e.preventDefault();

            e.stopPropagation();


            const $button =
                $(this);


            const generateId =
                $button.data(
                    'id'
                );


            if (!generateId) {

                alert(
                    'ID generate tidak ditemukan.'
                );


                return;

            }


            const confirmed =
                confirm(
                    'Apakah kamu yakin ingin menghapus hasil generate ini?'
                );


            if (!confirmed) {

                return;

            }


            $button
                .prop(
                    'disabled',
                    true
                )
                .html(
                    '<i class="bi bi-arrow-repeat spin"></i>'
                );


            $.ajax({

                url:
                    "{{ url('/generate') }}/" +
                    generateId,

                type:
                    'DELETE',

                dataType:
                    'json',

                headers: {

                    'X-CSRF-TOKEN':
                        "{{ csrf_token() }}"

                },


                success:
                    function (response) {

                        console.log(
                            'Delete response:',
                            response
                        );


                        if (
                            response.status ===
                            'success'
                        ) {

                            /*
                             * REFRESH TANPA MENGGANGGU
                             * LATEST.
                             */

                            loadGenerateHistory(
                                false
                            );


                            return;

                        }


                        alert(
                            response.message ||
                            'Gagal menghapus hasil generate.'
                        );


                        $button
                            .prop(
                                'disabled',
                                false
                            )
                            .html(
                                '<i class="bi bi-trash"></i>'
                            );

                    },


                error:
                    function (xhr) {

                        console.error(
                            'Delete error:',
                            xhr.responseText
                        );


                        const response =
                            xhr.responseJSON ||
                            {};


                        alert(
                            response.message ||
                            'Gagal menghapus hasil generate.'
                        );


                        $button
                            .prop(
                                'disabled',
                                false
                            )
                            .html(
                                '<i class="bi bi-trash"></i>'
                            );

                    }

            });

        }
    );


    /* =====================================================
       GENERATE
    ====================================================== */

    $generateButton.on(
        'click',
        function () {

            const prompt =
                $.trim(
                    $promptInput.val()
                );


            /* =============================================
               VALIDATION
            ============================================== */

            if (!prompt) {

                $promptInput.focus();


                $resultStatus.text(
                    'Please enter a prompt first.'
                );


                return;

            }


            /* =============================================
               ENDPOINT
            ============================================== */

            const endpoint =
                selectedType === 'image'
                    ? "{{ url('/generate-image') }}"
                    : selectedType === 'video'
                        ? "{{ url('/generate-video') }}"
                        : "{{ url('/generate-music') }}";


            /* =============================================
               PROCESSING TEXT
            ============================================== */

            let processingText;


            if (
                selectedType === 'image'
            ) {

                processingText =
                    'Memproses gambar...';

            }

            else if (
                selectedType === 'video'
            ) {

                processingText =
                    'Memproses video...';

            }

            else {

                processingText =
                    'Memproses music...';

            }


            /* =============================================
               BUTTON
            ============================================== */

            $generateButton
                .prop(
                    'disabled',
                    true
                )
                .html(
                    '<i class="bi bi-arrow-repeat spin"></i> Processing...'
                );


            $resultStatus.text(
                processingText
            );


            /* =============================================
               SHOW LOADING STATE
            ============================================== */

            $('body')
                .addClass(
                    'generation-is-loading'
                );


            $resultStatus.hide();


            /*
             * HANYA LATEST YANG DIGANTI LOADING
             *
             * HISTORY TIDAK DISENTUH.
             */

            $latestEmpty.hide();


            $latestContainer
                .children(
                    '.generated-card-item'
                )
                .remove();


            $latestContainer
                .removeClass(
                    'latest-multiple latest-single'
                )
                .removeAttr(
                    'data-latest-count'
                );


            /* =============================================
               LOADING CREASY
            ============================================== */

            const loadingHtml = `

                <div
                    id="generationLoading"
                    class="generated-card-item"
                >

                    <div
                        class="generated-image-box"
                    >

                        <img
                            src="{{ asset('ikon.png') }}"
                            class="creasy-logo-pulse"
                            alt="Creasy"
                        >

                        <div class="waiting-text">

                            ${escapeHtml(
                                processingText
                            )}

                        </div>

                    </div>

                </div>

            `;


            $latestContainer.append(
                loadingHtml
            );


            /* =============================================
               SCROLL KE BAGIAN TERATAS
               
               PROMPT TETAP.
               HISTORY TETAP.
            ============================================== */

            setTimeout(
                function () {

                    window.scrollTo({

                        top: 0,

                        behavior: 'smooth'

                    });

                },
                100
            );


            /* =============================================
               REQUEST DATA
            ============================================== */

            const formData =
                new FormData();


            formData.append(
                'prompt',
                prompt
            );


            /*
             * ASPECT RATIO
             */

            formData.append(
                'aspect_ratio',
                selectedRatio
            );


            /*
             * DURATION HANYA VIDEO
             */

            if (
                selectedType === 'video'
            ) {

                formData.append(
                    'duration',
                    selectedDuration
                );

            }


            /*
             * QUANTITY
             */

            formData.append(
                'quantity',
                selectedType === 'image'
                    ? selectedQuantity
                    : 1
            );


            /*
             * TYPE
             */

            formData.append(
                'type',
                selectedType
            );
                
            /*
             * MUSIC SETTINGS
             */
            
            if (
                selectedType === 'music'
            ) {
            
                formData.append(
                    'genre',
                    selectedMusicGenre
                );
               
               formData.append(
                   'style_id', 
                   selectedMusicStyle
                );
            
                formData.append(
                    'beat',
                    selectedMusicBeat
                );
            
            
                formData.append(
                    'mood',
                    selectedMusicMood
                );
            
            
                formData.append(
                    'vocal',
                    selectedMusicVocal
                );
            
            }

            /* =============================================
               REFERENCE IMAGES
            ============================================== */

            if (
                referenceImages.length > 0
            ) {

                referenceImages.forEach(
                    function (item) {

                        formData.append(
                            'reference_images[]',
                            item.file
                        );

                    }
                );

            }


            /* =============================================
               AJAX
            ============================================== */

            $.ajax({

                url:
                    endpoint,

                type:
                    'POST',

                dataType:
                    'json',

                headers: {

                    'X-CSRF-TOKEN':
                        "{{ csrf_token() }}"

                },

                processData:
                    false,

                contentType:
                    false,

                data:
                    formData,


                /* =========================================
                   SUCCESS
                ========================================== */

                success:
                    function (data) {

                        console.log(
                            'Generate response:',
                            data
                        );


                        /*
                         * UPDATE HEADER CREDIT
                         */

                        if (
                            data.status ===
                            'success' &&
                            data.data &&
                            data.data.remaining_credit !==
                            undefined
                        ) {

                            updateHeaderCredit(
                                data.data.remaining_credit
                            );

                        }


                        /*
                         * SUCCESS
                         */

                        if (
                            data.status !==
                            'success'
                        ) {

                            showError(
                                data.message ||
                                'AI gagal memproses permintaan.'
                            );


                            return;

                        }


                        /* =================================
                           IMAGE
                        ================================= */

                        if (
                            selectedType ===
                            'image'
                        ) {

                            $resultStatus.text(

                                data.data.quantity > 1

                                    ? data.data.quantity +
                                      ' gambar berhasil dibuat.'

                                    : 'Gambar berhasil dibuat.'

                            );


                            if (
                                data.data &&
                                Array.isArray(
                                    data.data.images
                                )
                            ) {

                                const latestImages =
                                    data.data.images.map(
                                        function (image) {

                                            return {

                                                id:
                                                    image.generate_id,

                                                image_url:
                                                    image.image_url,

                                                type:
                                                    'image'

                                            };

                                        }
                                    );


                                renderLatestImages(
                                    latestImages
                                );

                            }

                        }


                        /* =================================
                           VIDEO
                        ================================= */

                        else if (
                            selectedType ===
                            'video'
                        ) {

                            $resultStatus.text(
                                'Video berhasil dibuat.'
                            );


                            /*
                             * Ambil latest dari database
                             * supaya video langsung muncul.
                             */

                            loadGenerateHistory(
                                true
                            );

                        }


                        /* =================================
                           MUSIC
                        ================================= */

                        else if (
                            selectedType ===
                            'music'
                        ) {

                            $resultStatus.text(
                                'Music berhasil dibuat.'
                            );


                            /*
                             * MUSIC LANGSUNG RENDER
                             */

                            if (
                                data.data &&
                                data.data.audio_url
                            ) {

                                renderLatestImages([

                                    {

                                        id:
                                            data.data.generate_id,

                                        audio_url:
                                            data.data.audio_url,

                                        type:
                                            'music',

                                        mime_type:
                                            data.data.mime_type

                                    }

                                ]);

                            }

                            else {

                                /*
                                 * FALLBACK
                                 */

                                loadGenerateHistory(
                                    true
                                );

                            }

                        }


                        /*
                         * REFRESH HISTORY
                         *
                         * TIDAK MENGHAPUS LATEST
                         */

                        loadGenerateHistory(
                            false
                        );


                    },


                /* =========================================
                   ERROR
                ========================================== */

                error:
                    function (xhr) {

                        const response =
                            xhr.responseJSON ||
                            {};


                        const errorMsg =
                            response.message ||
                            'Something went wrong while processing your request.';


                        console.error(
                            'Generation Error:',
                            xhr.responseText
                        );


                        /*
                         * CREDIT TIDAK CUKUP
                         */

                        if (
                            response.code ===
                            'INSUFFICIENT_CREDIT'
                        ) {

                            $resultStatus.text(
                                'Credit tidak mencukupi. Mengarahkan ke halaman paket...'
                            );


                            setTimeout(
                                function () {

                                    window.location.href =
                                        response.redirect_url ||
                                        "{{ route('pricing') }}";

                                },
                                800
                            );


                            return;

                        }


                        showError(
                            errorMsg
                        );

                    },


                /* =========================================
                   COMPLETE
                ========================================== */

                complete:
                    function () {

                        /*
                         * Hapus loading state.
                         */

                        $('body')
                            .removeClass(
                                'generation-is-loading'
                            );


                        $('#generationLoading')
                            .remove();


                        $resultStatus.show();


                        $generateButton
                            .prop(
                                'disabled',
                                false
                            );


                        /*
                         * Kembalikan tombol
                         */

                        if (
                            selectedType ===
                            'image'
                        ) {

                            $generateButton.html(
                                '<i class="bi bi-stars"></i> Generate Image'
                            );

                        }

                        else if (
                            selectedType ===
                            'video'
                        ) {

                            $generateButton.html(
                                '<i class="bi bi-camera-reels"></i> Generate Video'
                            );

                        }

                        else if (
                            selectedType ===
                            'music'
                        ) {

                            $generateButton.html(
                                '<i class="bi bi-music-note-beamed"></i> Create Music'
                            );

                        }


                        /*
                         * Kalau LATEST benar-benar kosong
                         */

                        if (
                            !$latestContainer
                                .children(
                                    '.generated-card-item'
                                )
                                .length
                        ) {

                            $latestEmpty.show();

                        }

                    }

            });

        }
    );


    /* =====================================================
       ERROR HANDLER
    ====================================================== */

    function showError(
        message
    ) {

        $resultStatus.text(
            message
        );


        /*
         * Bersihkan loading
         */

        $('#generationLoading')
            .remove();


        /*
         * Jangan menghapus history.
         * Jangan menghapus prompt.
         */

        loadGenerateHistory(
            false
        );


        let typeLabel;


        if (
            selectedType === 'image'
        ) {

            typeLabel =
                'gambar';

        }

        else if (
            selectedType === 'video'
        ) {

            typeLabel =
                'video';

        }

        else if (
            selectedType === 'music'
        ) {

            typeLabel =
                'music';

        }

        else {

            typeLabel =
                'konten';

        }


        alert(
            'Gagal membuat ' +
            typeLabel +
            ': ' +
            message
        );

    }
    
    
    /* =====================================================
   DIRECT DOWNLOAD
===================================================== */

$(document).on(
    'click',
    '.btn-overlay-download',
    async function (e) {

        e.preventDefault();
        e.stopPropagation();

        const $button = $(this);

        const id =
            $button.data('id');

        const downloadName =
            $button.data('download-name') ||
            `creasy-${id}`;

        if (!id) {
            return;
        }

        if ($button.data('downloading')) {
            return;
        }

        $button.data(
            'downloading',
            true
        );

        const originalHtml =
            $button.html();

        $button.html(
            '<i class="bi bi-arrow-repeat spin"></i>'
        );

        try {

            const response =
                await fetch(
                    `/download-generate/${id}`,
                    {
                        method: 'GET',
                        credentials: 'same-origin',
                        headers: {
                            'X-Requested-With':
                                'XMLHttpRequest'
                        }
                    }
                );

            if (!response.ok) {

                throw new Error(
                    `HTTP ${response.status}`
                );
            }

            const blob =
                await response.blob();

            const blobUrl =
                URL.createObjectURL(blob);

            const link =
                document.createElement('a');

            link.href =
                blobUrl;

            link.download =
                downloadName;

            document.body.appendChild(
                link
            );

            link.click();

            link.remove();

            setTimeout(
                function () {

                    URL.revokeObjectURL(
                        blobUrl
                    );

                },
                1000
            );

        } catch (error) {

            console.error(
                'Download error:',
                error
            );

            alert(
                'File gagal didownload. Silakan coba lagi.'
            );

        } finally {

            $button.data(
                'downloading',
                false
            );

            $button.html(
                originalHtml
            );

        }

    }
);


    /* =====================================================
       MOBILE CARD TOUCH
    ====================================================== */

    $(document).on(
        'click',
        '.generated-card-item',
        function (e) {

            if (
                $(e.target)
                    .closest(
                        '.card-overlay-btn'
                    )
                    .length
            ) {

                return;

            }


            $('.generated-card-item')
                .not(this)
                .removeClass(
                    'mobile-active'
                );


            $(this).toggleClass(
                'mobile-active'
            );

        }
    );
    
    
    /* =========================================================
   ADD GENERATED IMAGE TO PROMPT
========================================================= */

$(document).on(
    'click',
    '.btn-overlay-add-prompt',
    async function (e) {

        e.preventDefault();
        e.stopPropagation();

        const $button = $(this);

        const id = $button.data('id');

        if (!id) {
            alert('ID gambar tidak ditemukan.');
            return;
        }

        /*
         * MAX 2 REFERENCE IMAGES
         */
        if (referenceImages.length >= MAX_REFERENCE_IMAGES) {
            alert(
                `Maksimal ${MAX_REFERENCE_IMAGES} gambar referensi.`
            );
            return;
        }

        /*
         * PREVENT DOUBLE CLICK
         */
        if ($button.data('adding')) {
            return;
        }

        $button.data('adding', true);

        const originalHtml = $button.html();

        $button.html(
            '<i class="bi bi-arrow-repeat spin"></i>'
        );

        try {

            /*
             * AMBIL FILE MELALUI ROUTE DOWNLOAD
             *
             * Jadi tidak fetch langsung ke R2 / media URL
             * dan aman dari masalah CORS.
             */
            const response = await fetch(
                `/download-generate/${id}`,
                {
                    method: 'GET',
                    credentials: 'same-origin',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }
            );

            if (!response.ok) {
                throw new Error(
                    `HTTP ${response.status}`
                );
            }

            /*
             * RESPONSE -> BLOB
             */
            const blob = await response.blob();

            /*
             * BLOB -> FILE
             */
            const file = new File(
                [blob],
                `reference-${id}.png`,
                {
                    type: blob.type || 'image/png'
                }
            );

            /*
             * BUAT PREVIEW
             */
            const previewUrl =
                URL.createObjectURL(file);

            /*
             * MASUKKAN KE REFERENCE IMAGES
             */
            referenceImages.push({
                file: file,
                preview: previewUrl
            });

            /*
             * RENDER ULANG REFERENCE
             */
            renderReferenceImages();

        } catch (error) {

            console.error(
                'Add to Prompt error:',
                error
            );

            alert(
                'Gambar gagal ditambahkan ke prompt. Silakan coba lagi.'
            );

        } finally {

            $button.data('adding', false);

            $button.html(originalHtml);
        }
    }
);

});

function loadMusicGenres() {

    $.get('{{ route("music.genres") }}', function (genres) {

        const select = $('#musicGenre');

        select.empty();
        select.append('<option value="">Select Genre</option>');

        genres.forEach(function (genre) {
            select.append(
                $('<option>', {
                    value: genre,
                    text: genre
                })
            );
        });

    }).fail(function () {
        console.error('Gagal mengambil data genre.');
    });
}


/* =========================================================
   HEADER CREDIT
========================================================= */

function updateHeaderCredit(
    remainingCredit
) {

    const creditElement =
        $('.credit-number');


    if (
        !creditElement.length
    ) {

        return;

    }


    creditElement.text(

        Number(
            remainingCredit
        ).toLocaleString(
            'id-ID'
        )

    );

}

</script>

@endsection