@extends('admin.master')

@section('title', 'Landing Pages')

@section('content')

{{-- ================================================================
    FONT AWESOME
================================================================ --}}

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
>

<meta
    name="csrf-token"
    content="{{ csrf_token() }}"
>


{{-- ================================================================
    PAGE CSS
================================================================ --}}

<style>

    /*
    |--------------------------------------------------------------------------
    | Root
    |--------------------------------------------------------------------------
    */

    #landingPageIndex {
        --lp-primary: #10a651;
        --lp-primary-dark: #07833e;
        --lp-primary-soft: #eafaf1;

        --lp-blue: #2f6fed;
        --lp-blue-soft: #edf4ff;

        --lp-orange: #ff7417;
        --lp-orange-soft: #fff2e9;

        --lp-red: #e74a4a;
        --lp-red-soft: #fff0f0;

        --lp-purple: #7c3aed;
        --lp-purple-soft: #f3edff;

        --lp-dark: #182230;
        --lp-text: #344054;
        --lp-muted: #667085;
        --lp-light-muted: #98a2b3;

        --lp-border: #e4e7ec;
        --lp-bg: #f6f8fb;
        --lp-card: #ffffff;

        --lp-radius: 16px;
        --lp-radius-small: 10px;

        --lp-shadow:
            0 8px 30px
            rgba(16, 24, 40, .045);

        --lp-shadow-hover:
            0 14px 38px
            rgba(16, 24, 40, .10);

        width: 100%;
        padding: 22px 20px 45px;
        color: var(--lp-text);
        font-family:
            Inter,
            "Hind Siliguri",
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
    }


    /*
    |--------------------------------------------------------------------------
    | Reset inside page
    |--------------------------------------------------------------------------
    */

    #landingPageIndex *,
    #landingPageIndex *::before,
    #landingPageIndex *::after {
        box-sizing: border-box;
    }

    #landingPageIndex a {
        text-decoration: none;
    }

    #landingPageIndex button,
    #landingPageIndex input {
        font: inherit;
    }


    /*
    |--------------------------------------------------------------------------
    | Main Header
    |--------------------------------------------------------------------------
    */

    .lp-index-header {
        position: relative;
        overflow: hidden;

        margin-bottom: 20px;
        padding: 25px 26px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        border: 1px solid var(--lp-border);
        border-radius: var(--lp-radius);

        background:
            linear-gradient(
                135deg,
                #ffffff 0%,
                #fbfffd 60%,
                #f0fff6 100%
            );

        box-shadow: var(--lp-shadow);
    }

    .lp-index-header::before {
        content: "";

        position: absolute;
        width: 230px;
        height: 230px;

        right: -90px;
        top: -120px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(16, 166, 81, .13),
                rgba(16, 166, 81, 0)
            );

        pointer-events: none;
    }

    .lp-index-header::after {
        content: "";

        position: absolute;

        width: 135px;
        height: 135px;

        right: 120px;
        bottom: -105px;

        border-radius: 50%;

        background:
            rgba(16, 166, 81, .05);

        pointer-events: none;
    }

    .lp-index-heading {
        position: relative;
        z-index: 2;

        min-width: 0;
    }

    .lp-index-eyebrow {
        margin-bottom: 7px;

        display: flex;
        align-items: center;
        gap: 7px;

        color: var(--lp-primary);

        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.7px;
        text-transform: uppercase;
    }

    .lp-index-eyebrow i {
        font-size: 11px;
    }

    .lp-index-title {
        margin: 0;

        color: #172033;

        font-size: clamp(25px, 3vw, 32px);
        font-weight: 750;
        line-height: 1.15;
    }

    .lp-index-description {
        max-width: 720px;

        margin: 8px 0 0;

        color: var(--lp-muted);

        font-size: 14px;
        line-height: 1.65;
    }


    /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------
    */

    .lp-action-btn {
        position: relative;

        min-height: 42px;

        padding: 10px 16px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        overflow: hidden;

        border: 0;
        border-radius: 10px;

        outline: 0;

        font-size: 13px;
        font-weight: 700;

        cursor: pointer;

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

        animation:
            lpButtonFloat 2.8s
            ease-in-out
            infinite;
    }

    .lp-action-btn::before {
        content: "";

        position: absolute;

        top: -80%;
        left: -65%;

        width: 38%;
        height: 260%;

        transform: rotate(20deg);

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, .38),
                transparent
            );

        animation:
            lpButtonShine 3.5s
            linear
            infinite;

        pointer-events: none;
    }

    .lp-action-btn:hover {
        transform:
            translateY(-3px)
            scale(1.025);
    }

    .lp-action-btn:active {
        transform: scale(.97);
    }

    .lp-btn-primary {
        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                #13b85b,
                #079548
            );

        box-shadow:
            0 9px 20px
            rgba(16, 166, 81, .20);
    }

    .lp-btn-primary:hover {
        color: #ffffff;

        box-shadow:
            0 13px 25px
            rgba(16, 166, 81, .28);
    }

    .lp-btn-dark {
        color: #ffffff;
        background: var(--lp-dark);

        box-shadow:
            0 8px 18px
            rgba(24, 34, 48, .15);
    }

    .lp-btn-dark:hover {
        color: #ffffff;
        background: #101828;
    }

    .lp-btn-light {
        color: var(--lp-text);

        border: 1px solid var(--lp-border);

        background: #ffffff;
    }

    .lp-btn-light::before {
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(16, 166, 81, .09),
                transparent
            );
    }

    .lp-btn-light:hover {
        color: var(--lp-primary);
        border-color: #b9e9ce;
    }

    @keyframes lpButtonFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-2px);
        }
    }

    @keyframes lpButtonShine {
        0% {
            left: -70%;
        }

        60%,
        100% {
            left: 150%;
        }
    }


    /*
    |--------------------------------------------------------------------------
    | Search Card
    |--------------------------------------------------------------------------
    */

    .lp-search-card {
        margin-bottom: 18px;
        padding: 16px;

        border: 1px solid var(--lp-border);
        border-radius: var(--lp-radius);

        background: var(--lp-card);

        box-shadow: var(--lp-shadow);
    }

    .lp-search-form {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .lp-search-input-wrap {
        position: relative;
        flex: 1;
        min-width: 0;
    }

    .lp-search-icon {
        position: absolute;

        left: 15px;
        top: 50%;

        transform: translateY(-50%);

        color: #98a2b3;

        font-size: 14px;

        pointer-events: none;
    }

    .lp-search-input {
        width: 100%;
        min-height: 44px;

        padding: 10px 15px 10px 42px;

        border: 1px solid #e0e5eb;
        border-radius: 10px;

        outline: none;

        color: var(--lp-text);
        background: #ffffff;

        font-size: 14px;

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

    .lp-search-input::placeholder {
        color: #98a2b3;
    }

    .lp-search-input:focus {
        border-color: rgba(16, 166, 81, .55);

        background: #fcfffd;

        box-shadow:
            0 0 0 4px
            rgba(16, 166, 81, .08);
    }


    /*
    |--------------------------------------------------------------------------
    | Alert
    |--------------------------------------------------------------------------
    */

    #builderAlert {
        margin-bottom: 16px;
        padding: 12px 15px;

        border-radius: 10px;

        font-size: 13px;
        font-weight: 600;
    }

    #builderAlert:not([hidden]) {
        display: block;
    }


    /*
    |--------------------------------------------------------------------------
    | Table Main Card
    |--------------------------------------------------------------------------
    */

    .lp-list-card {
        overflow: hidden;

        border: 1px solid var(--lp-border);
        border-radius: var(--lp-radius);

        background: var(--lp-card);

        box-shadow: var(--lp-shadow);
    }

    .lp-list-header {
        padding: 16px 19px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;

        border-bottom: 1px solid var(--lp-border);
    }

    .lp-list-title-wrap {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .lp-list-icon {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 10px;

        color: var(--lp-primary);
        background: var(--lp-primary-soft);

        font-size: 15px;
    }

    .lp-list-title {
        margin: 0;

        color: #1d2939;

        font-size: 15px;
        font-weight: 750;
    }

    .lp-list-subtitle {
        display: block;
        margin-top: 2px;

        color: var(--lp-muted);

        font-size: 11px;
    }

    .lp-total-badge {
        padding: 6px 10px;

        border: 1px solid #dcefe4;
        border-radius: 999px;

        color: var(--lp-primary-dark);
        background: #f4fff8;

        font-size: 11px;
        font-weight: 700;
    }


    /*
    |--------------------------------------------------------------------------
    | Table
    |--------------------------------------------------------------------------
    */

    .lp-table-wrap {
        width: 100%;
        overflow-x: auto;
    }

    .lp-table {
        width: 100%;

        border-collapse: separate;
        border-spacing: 0;

        table-layout: auto;
    }

    .lp-table thead th {
        padding: 12px 14px;

        color: #667085;
        background: #fafbfc;

        border-bottom: 1px solid var(--lp-border);

        font-size: 11px;
        font-weight: 750;
        letter-spacing: .25px;
        text-align: left;

        white-space: nowrap;
    }

    .lp-table tbody td {
        padding: 14px;

        border-bottom: 1px solid #edf0f3;

        color: #344054;

        font-size: 12px;

        vertical-align: middle;
    }

    .lp-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .lp-table tbody tr {
        transition:
            background .2s ease,
            transform .2s ease;
    }

    .lp-table tbody tr:hover {
        background: #fcfefd;
    }

    .lp-table .right {
        text-align: right;
    }


    /*
    |--------------------------------------------------------------------------
    | Landing Page Column
    |--------------------------------------------------------------------------
    */

    .lp-page-info {
        min-width: 195px;
    }

    .lp-page-name {
        display: block;

        color: #1d2939;

        font-size: 13px;
        font-weight: 750;
        line-height: 1.35;
    }

    .lp-page-slug {
        margin-top: 4px;

        display: flex;
        align-items: center;
        gap: 5px;

        color: var(--lp-light-muted);

        font-size: 10px;
        word-break: break-word;
    }

    .lp-page-slug i {
        color: #b0b7c3;
        font-size: 9px;
    }


    /*
    |--------------------------------------------------------------------------
    | Product
    |--------------------------------------------------------------------------
    */

    .lp-product-name {
        max-width: 220px;

        display: flex;
        align-items: flex-start;
        gap: 8px;

        color: #344054;

        font-weight: 600;
        line-height: 1.4;
    }

    .lp-product-icon {
        width: 27px;
        height: 27px;

        flex: 0 0 auto;

        display: grid;
        place-items: center;

        border-radius: 7px;

        color: #7c3aed;
        background: #f3edff;

        font-size: 11px;
    }


    /*
    |--------------------------------------------------------------------------
    | Count Pill
    |--------------------------------------------------------------------------
    */

    .lp-count-pill {
        min-width: 82px;

        padding: 6px 9px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        border-radius: 999px;

        font-size: 10px;
        font-weight: 750;

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

    .lp-count-pill:hover {
        transform: translateY(-2px);
    }

    .lp-count-orders {
        color: #2458c5;

        border: 1px solid #d9e6ff;
        background: var(--lp-blue-soft);
    }

    .lp-count-orders:hover {
        color: #1947aa;
    }

    .lp-count-incomplete {
        color: #c35500;

        border: 1px solid #ffe0c5;
        background: var(--lp-orange-soft);
    }

    .lp-count-incomplete:hover {
        color: #a64600;
    }


    /*
    |--------------------------------------------------------------------------
    | Status Toggle
    |--------------------------------------------------------------------------
    */

    .lp-status-toggle {
        position: relative;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        cursor: pointer;
        user-select: none;
    }

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

    .lp-status-switch {
        position: relative;

        width: 36px;
        height: 20px;

        flex: 0 0 auto;

        border-radius: 999px;

        background: #d0d5dd;

        transition: background .25s ease;
    }

    .lp-status-switch::after {
        content: "";

        position: absolute;

        left: 3px;
        top: 3px;

        width: 14px;
        height: 14px;

        border-radius: 50%;

        background: #ffffff;

        box-shadow:
            0 2px 5px
            rgba(0, 0, 0, .18);

        transition:
            transform .25s ease;
    }

    .lp-status-toggle input:checked
    + .lp-status-switch {
        background: var(--lp-primary);
    }

    .lp-status-toggle input:checked
    + .lp-status-switch::after {
        transform: translateX(16px);
    }

    .lp-status-text {
        color: #667085;

        font-size: 11px;
        font-weight: 700;
    }

    .lp-status-toggle input:checked
    ~ .lp-status-text {
        color: var(--lp-primary-dark);
    }


    /*
    |--------------------------------------------------------------------------
    | Updated
    |--------------------------------------------------------------------------
    */

    .lp-updated {
        min-width: 125px;

        display: flex;
        align-items: center;
        gap: 7px;

        color: #667085;

        font-size: 11px;
        line-height: 1.4;
    }

    .lp-updated i {
        color: #98a2b3;
    }


    /*
    |--------------------------------------------------------------------------
    | Row Actions
    |--------------------------------------------------------------------------
    */

    .lp-row-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;

        white-space: nowrap;
    }

    .lp-icon-btn {
        position: relative;

        width: 34px;
        height: 34px;

        flex: 0 0 auto;

        display: inline-grid;
        place-items: center;

        border: 1px solid transparent;
        border-radius: 9px;

        outline: none;

        font-size: 12px;

        cursor: pointer;

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

        animation:
            lpActionPulse 3s
            ease-in-out
            infinite;
    }

    .lp-icon-btn:nth-child(2) {
        animation-delay: .3s;
    }

    .lp-icon-btn:nth-child(3) {
        animation-delay: .6s;
    }

    .lp-icon-btn:nth-child(4) {
        animation-delay: .9s;
    }

    .lp-icon-btn:hover {
        transform:
            translateY(-3px)
            scale(1.07);
    }

    @keyframes lpActionPulse {
        0%,
        100% {
            box-shadow:
                0 0 0
                rgba(0, 0, 0, 0);
        }

        50% {
            box-shadow:
                0 5px 12px
                rgba(16, 24, 40, .08);
        }
    }

    .lp-action-live {
        color: #08783a;

        border-color: #cdeedb;

        background: #ebfbf2;
    }

    .lp-action-preview {
        color: #2458c5;

        border-color: #d9e6ff;

        background: #f0f5ff;
    }

    .lp-action-edit {
        color: #6d35d4;

        border-color: #e3d8fa;

        background: #f6f2ff;
    }

    .lp-action-delete {
        color: #d92d20;

        border-color: #fbd3d0;

        background: #fff1f0;
    }

    .lp-icon-btn:hover.lp-action-live {
        color: #ffffff;
        background: #0da64e;
    }

    .lp-icon-btn:hover.lp-action-preview {
        color: #ffffff;
        background: #3776ef;
    }

    .lp-icon-btn:hover.lp-action-edit {
        color: #ffffff;
        background: #7c3aed;
    }

    .lp-icon-btn:hover.lp-action-delete {
        color: #ffffff;
        background: #e5484d;
    }


    /*
    |--------------------------------------------------------------------------
    | Tooltips
    |--------------------------------------------------------------------------
    */

    .lp-icon-btn[data-tooltip]::after {
        content: attr(data-tooltip);

        position: absolute;

        right: 50%;
        bottom: calc(100% + 8px);

        transform:
            translateX(50%)
            translateY(4px);

        z-index: 50;

        padding: 5px 8px;

        border-radius: 6px;

        color: #ffffff;
        background: #101828;

        font-size: 9px;
        font-weight: 600;

        white-space: nowrap;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .18s ease,
            transform .18s ease;
    }

    .lp-icon-btn[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;

        transform:
            translateX(50%)
            translateY(0);
    }


    /*
    |--------------------------------------------------------------------------
    | Empty
    |--------------------------------------------------------------------------
    */

    .lp-empty {
        padding: 60px 20px !important;

        text-align: center !important;
    }

    .lp-empty-content {
        max-width: 380px;

        margin: auto;

        text-align: center;
    }

    .lp-empty-icon {
        width: 65px;
        height: 65px;

        margin: 0 auto 14px;

        display: grid;
        place-items: center;

        border-radius: 18px;

        color: var(--lp-primary);
        background: var(--lp-primary-soft);

        font-size: 24px;

        animation:
            lpEmptyFloat
            2.5s
            ease-in-out
            infinite;
    }

    @keyframes lpEmptyFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }
    }

    .lp-empty-content strong {
        display: block;

        margin-bottom: 4px;

        color: #344054;

        font-size: 15px;
    }

    .lp-empty-content p {
        margin: 0;

        color: #98a2b3;

        font-size: 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | Pagination
    |--------------------------------------------------------------------------
    */

    .lp-pagination {
        padding: 15px 18px;

        border-top: 1px solid var(--lp-border);

        background: #fcfcfd;
    }

    .lp-pagination nav {
        margin: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Tablet
    |--------------------------------------------------------------------------
    */

    @media (max-width: 1100px) {

        #landingPageIndex {
            padding-left: 15px;
            padding-right: 15px;
        }

        .lp-table thead th,
        .lp-table tbody td {
            padding-left: 10px;
            padding-right: 10px;
        }

        .lp-product-name {
            max-width: 175px;
        }

        .lp-row-actions {
            gap: 4px;
        }

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile / Tablet Card Mode
    |--------------------------------------------------------------------------
    */

    @media (max-width: 850px) {

        #landingPageIndex {
            padding:
                14px
                10px
                35px;
        }

        .lp-index-header {
            padding: 20px;

            align-items: stretch;
            flex-direction: column;
        }

        .lp-index-header-actions {
            width: 100%;
        }

        .lp-index-header-actions
        .lp-action-btn {
            width: 100%;
        }

        .lp-search-form {
            align-items: stretch;
            flex-direction: column;
        }

        .lp-search-form
        .lp-action-btn {
            width: 100%;
        }

        .lp-list-header {
            padding: 14px;
        }

        .lp-table-wrap {
            padding: 10px;

            overflow: visible;
        }

        .lp-table,
        .lp-table tbody,
        .lp-table tr,
        .lp-table td {
            display: block;
            width: 100%;
        }

        .lp-table thead {
            display: none;
        }

        .lp-table tbody tr {
            margin-bottom: 12px;

            overflow: hidden;

            border: 1px solid var(--lp-border);
            border-radius: 14px;

            background: #ffffff;

            box-shadow:
                0 5px 18px
                rgba(16, 24, 40, .04);
        }

        .lp-table tbody tr:last-child {
            margin-bottom: 0;
        }

        .lp-table tbody tr:hover {
            background: #ffffff;
        }

        .lp-table tbody td {
            min-height: 48px;

            padding: 11px 13px;

            display: grid;

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

            align-items: center;

            gap: 10px;

            border-bottom: 1px solid #edf0f3;

            text-align: left !important;
        }

        .lp-table tbody td::before {
            content: attr(data-label);

            color: #98a2b3;

            font-size: 10px;
            font-weight: 750;
            text-transform: uppercase;
            letter-spacing: .4px;
        }

        .lp-table tbody td:last-child {
            border-bottom: 0;
        }

        .lp-page-info {
            min-width: 0;
        }

        .lp-product-name {
            max-width: none;
        }

        .lp-updated {
            min-width: 0;
        }

        .lp-row-actions {
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .lp-icon-btn {
            width: 38px;
            height: 38px;
        }

        .lp-count-pill {
            width: fit-content;
        }

        .lp-empty {
            display: block !important;
        }

        .lp-empty::before {
            display: none;
        }

    }


    /*
    |--------------------------------------------------------------------------
    | Small Mobile
    |--------------------------------------------------------------------------
    */

    @media (max-width: 480px) {

        #landingPageIndex {
            padding-left: 7px;
            padding-right: 7px;
        }

        .lp-index-header {
            padding: 17px 15px;
            border-radius: 13px;
        }

        .lp-index-title {
            font-size: 25px;
        }

        .lp-index-description {
            font-size: 12px;
        }

        .lp-search-card {
            padding: 10px;
            border-radius: 13px;
        }

        .lp-list-card {
            border-radius: 13px;
        }

        .lp-list-header {
            align-items: flex-start;
        }

        .lp-total-badge {
            font-size: 9px;
        }

        .lp-table-wrap {
            padding: 7px;
        }

        .lp-table tbody td {
            grid-template-columns:
                88px
                minmax(0, 1fr);

            padding:
                10px
                11px;
        }

        .lp-page-name {
            font-size: 12px;
        }

        .lp-row-actions {
            gap: 7px;
        }

    }


    /*
    |--------------------------------------------------------------------------
    | Reduced Motion
    |--------------------------------------------------------------------------
    */

    @media (prefers-reduced-motion: reduce) {

        #landingPageIndex *,
        #landingPageIndex *::before,
        #landingPageIndex *::after {
            animation: none !important;
            transition-duration: .01ms !important;
        }

    }

</style>


{{-- ================================================================
    PAGE
================================================================ --}}

<div
    class="lpb-page"
    id="landingPageIndex"
>


    {{-- ============================================================
        HEADER
    ============================================================ --}}

    <header class="lp-index-header">

        <div class="lp-index-heading">

            <div class="lp-index-eyebrow">

                <i class="fa-solid fa-layer-group"></i>

                LANDING PAGE MANAGER

            </div>


            <h1 class="lp-index-title">
                Landing Pages
            </h1>


            <p class="lp-index-description">

                প্রতিটি product-এর জন্য আলাদা landing page তৈরি,
                edit, preview, publish, order এবং incomplete lead
                সহজে track ও manage করুন।

            </p>

        </div>


        <div class="lp-index-header-actions">

            <a
                href="{{ route('admin.landing-pages.create') }}"
                class="
                    lp-action-btn
                    lp-btn-primary
                "
            >

                <i class="fa-solid fa-plus"></i>

                Create Landing Page

            </a>

        </div>

    </header>


    {{-- ============================================================
        AJAX ALERT
    ============================================================ --}}

    <div
        id="builderAlert"
        class="lpb-alert"
        hidden
    ></div>


    {{-- ============================================================
        SEARCH
    ============================================================ --}}

    <section class="lp-search-card">

        <form
            method="GET"
            action="{{ route('admin.landing-pages.index') }}"
            class="lp-search-form"
        >

            <div class="lp-search-input-wrap">

                <i
                    class="
                        fa-solid
                        fa-magnifying-glass
                        lp-search-icon
                    "
                ></i>


                <input
                    type="search"
                    name="q"
                    value="{{ $search }}"
                    class="lp-search-input"
                    placeholder="Search by landing page title, slug or product..."
                    autocomplete="off"
                >

            </div>


            <button
                type="submit"
                class="
                    lp-action-btn
                    lp-btn-dark
                "
            >

                <i class="fa-solid fa-magnifying-glass"></i>

                Search

            </button>


            @if($search !== '')

                <a
                    href="{{ route('admin.landing-pages.index') }}"
                    class="
                        lp-action-btn
                        lp-btn-light
                    "
                >

                    <i class="fa-solid fa-rotate-left"></i>

                    Clear

                </a>

            @endif

        </form>

    </section>


    {{-- ============================================================
        LANDING PAGE LIST
    ============================================================ --}}

    <section class="lp-list-card">


        {{-- Header --}}

        <div class="lp-list-header">

            <div class="lp-list-title-wrap">

                <div class="lp-list-icon">

                    <i class="fa-solid fa-table-list"></i>

                </div>


                <div>

                    <h2 class="lp-list-title">
                        Landing Page List
                    </h2>

                    <span class="lp-list-subtitle">
                        Manage all landing pages from one place
                    </span>

                </div>

            </div>


            <span class="lp-total-badge">

                <i class="fa-solid fa-file-lines"></i>

                {{ $landingPages->total() }}

                {{
                    $landingPages->total() === 1
                        ? 'Page'
                        : 'Pages'
                }}

            </span>

        </div>


        {{-- Table --}}

        <div class="lp-table-wrap">

            <table class="lp-table">

                <thead>

                    <tr>

                        <th>
                            Landing Page
                        </th>

                        <th>
                            Product
                        </th>

                        <th>
                            Orders
                        </th>

                        <th>
                            Incomplete
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Updated
                        </th>

                        <th class="right">
                            Actions
                        </th>

                    </tr>

                </thead>


                <tbody>

                    @forelse(
                        $landingPages
                        as $page
                    )

                        <tr id="landing-row-{{ $page->id }}">


                            {{-- Landing Page --}}

                            <td data-label="Landing Page">

                                <div class="lp-page-info">

                                    <strong class="lp-page-name">

                                        {{ $page->title }}

                                    </strong>


                                    <small class="lp-page-slug">

                                        <i class="fa-solid fa-link"></i>

                                        /{{ $page->slug }}

                                    </small>

                                </div>

                            </td>


                            {{-- Product --}}

                            <td data-label="Product">

                                <div class="lp-product-name">

                                    <span class="lp-product-icon">

                                        <i class="fa-solid fa-box"></i>

                                    </span>


                                    <span>

                                        {{
                                            optional(
                                                $page->product
                                            )->name
                                            ?: 'Product removed'
                                        }}

                                    </span>

                                </div>

                            </td>


                            {{-- Orders --}}

                            <td data-label="Orders">

                                <a
                                    href="{{
                                        route(
                                            'admin.landing-pages.orders',
                                            $page
                                        )
                                    }}"
                                    class="
                                        lp-count-pill
                                        lp-count-orders
                                    "
                                >

                                    <i class="fa-solid fa-bag-shopping"></i>

                                    {{
                                        (int)
                                        $page
                                            ->completed_orders_count
                                    }}

                                    Orders

                                </a>

                            </td>


                            {{-- Incomplete --}}

                            <td data-label="Incomplete">

                                <a
                                    href="{{
                                        route(
                                            'admin.landing-pages.incomplete-orders',
                                            $page
                                        )
                                    }}"
                                    class="
                                        lp-count-pill
                                        lp-count-incomplete
                                    "
                                >

                                    <i class="fa-solid fa-clock-rotate-left"></i>

                                    {{
                                        (int)
                                        $page
                                            ->incomplete_orders_count
                                    }}

                                    Incomplete

                                </a>

                            </td>


                            {{-- Status --}}

                            <td data-label="Status">

                                <label class="lp-status-toggle">

                                    <input
                                        type="checkbox"
                                        data-toggle-url="{{
                                            route(
                                                'admin.landing-pages.toggle',
                                                $page
                                            )
                                        }}"
                                        @checked(
                                            $page->is_active
                                        )
                                    >


                                    <span class="lp-status-switch"></span>


                                    <b
                                        class="lp-status-text"
                                        data-status-label
                                    >

                                        {{
                                            $page->is_active
                                                ? 'Active'
                                                : 'Draft'
                                        }}

                                    </b>

                                </label>

                            </td>


                            {{-- Updated --}}

                            <td data-label="Updated">

                                <span class="lp-updated">

                                    <i class="fa-regular fa-clock"></i>

                                    <span>

                                        {{
                                            optional(
                                                $page->updated_at
                                            )->format(
                                                'd M Y, h:i A'
                                            )
                                        }}

                                    </span>

                                </span>

                            </td>


                            {{-- Actions --}}

                            <td
                                class="right"
                                data-label="Actions"
                            >

                                <div class="lp-row-actions">


                                    {{-- Live --}}

                                    @if($page->is_active)

                                        <a
                                            href="{{ $page->public_url }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="
                                                lp-icon-btn
                                                lp-action-live
                                            "
                                            data-tooltip="Open Live Page"
                                            aria-label="Open Live Page"
                                        >

                                            <i
                                                class="
                                                    fa-solid
                                                    fa-arrow-up-right-from-square
                                                "
                                            ></i>

                                        </a>

                                    @endif


                                    {{-- Preview --}}

                                    <a
                                        href="{{
                                            route(
                                                'admin.landing-pages.preview',
                                                $page
                                            )
                                        }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="
                                            lp-icon-btn
                                            lp-action-preview
                                        "
                                        data-tooltip="Preview"
                                        aria-label="Preview"
                                    >

                                        <i class="fa-regular fa-eye"></i>

                                    </a>


                                    {{-- Edit --}}

                                    <a
                                        href="{{
                                            route(
                                                'admin.landing-pages.edit',
                                                $page
                                            )
                                        }}"
                                        class="
                                            lp-icon-btn
                                            lp-action-edit
                                        "
                                        data-tooltip="Edit"
                                        aria-label="Edit"
                                    >

                                        <i
                                            class="
                                                fa-regular
                                                fa-pen-to-square
                                            "
                                        ></i>

                                    </a>


                                    {{-- Delete --}}

                                    <button
                                        type="button"
                                        class="
                                            lp-icon-btn
                                            lp-action-delete
                                            danger
                                        "
                                        data-delete-page
                                        data-delete-url="{{
                                            route(
                                                'admin.landing-pages.destroy',
                                                $page
                                            )
                                        }}"
                                        data-row="landing-row-{{ $page->id }}"
                                        data-tooltip="Delete"
                                        aria-label="Delete"
                                    >

                                        <i
                                            class="
                                                fa-regular
                                                fa-trash-can
                                            "
                                        ></i>

                                    </button>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="7"
                                class="lp-empty"
                            >

                                <div class="lp-empty-content">

                                    <div class="lp-empty-icon">

                                        <i class="fa-regular fa-file-lines"></i>

                                    </div>


                                    <strong>
                                        No landing pages found
                                    </strong>


                                    <p>

                                        নতুন landing page তৈরি করতে
                                        Create Landing Page button ব্যবহার করুন।

                                    </p>

                                </div>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Pagination --}}

        @if(
            $landingPages->hasPages()
        )

            <div class="lp-pagination">

                {{ $landingPages->withQueryString()->links() }}

            </div>

        @endif

    </section>

</div>


{{-- ================================================================
    EXISTING BUILDER JS
================================================================ --}}

<script
    src="{{ asset('js/landing-page-builder.js') }}"
></script>


{{-- ================================================================
    INDEX-ONLY JS
================================================================ --}}

<script>

(function () {

    "use strict";


    /*
    |--------------------------------------------------------------------------
    | Prevent double-click while toggling status
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll(
            '#landingPageIndex [data-toggle-url]'
        )
        .forEach(
            function (
                input
            ) {

                input.addEventListener(
                    "change",
                    function () {

                        var label =
                            input.closest(
                                ".lp-status-toggle"
                            );

                        if (!label) {
                            return;
                        }

                        label.style.opacity =
                            ".65";

                        label.style.pointerEvents =
                            "none";


                        /*
                         * Existing landing-page-builder.js
                         * will perform the actual AJAX request.
                         *
                         * We only add temporary visual feedback here.
                         */

                        window.setTimeout(
                            function () {

                                label.style.opacity =
                                    "";

                                label.style.pointerEvents =
                                    "";

                            },
                            900
                        );

                    }
                );

            }
        );


    /*
    |--------------------------------------------------------------------------
    | Search keyboard UX
    |--------------------------------------------------------------------------
    */

    var searchInput =
        document.querySelector(
            "#landingPageIndex .lp-search-input"
        );

    if (
        searchInput
        &&
        window.innerWidth > 850
    ) {

        window.setTimeout(
            function () {

                /*
                 * Do not auto focus when a user is already
                 * interacting with another element.
                 */

                if (
                    document.activeElement
                    === document.body
                ) {
                    searchInput.focus();
                }

            },
            200
        );
    }

})();

</script>

@endsection