@extends('layouts.frontend.index')
@section('title', 'Home')
@section('meta_title', 'Home - ' . Config::get('app.name'))
@section('meta_description', Config::get('param.meta.description'))
@section('meta_keywords', Config::get('param.meta.keywords'))

@section('content')
<section class="banner">
    @include($dir . 'banner')
</section>

<section class="video" id="video">
    @include($dir . 'video')
</section>

<section class="feature" id="feature">
    @include($dir . 'feature')
</section>

<section class="subscribe">
    @include($dir . 'subscribe')
</section>

<section class="package text-center" id="package">
    @include($dir . 'package')
</section>

<section class="affiliate">
    @include($dir . 'affiliate')
</section>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/plyr/plyr.css') }}" />

<style>
    .banner {
        background: url("{{ asset('images/home/banner.webp') }}");
        background-size: cover;
        background-repeat: no-repeat;
        height: 600px;
        color: white;
        padding: 200px 150px 0 150px !important;
        text-align: center;
    }
    .banner .title {
        font-size: 40px;
        font-weight: bold;
        line-height: 70px;
        margin-bottom: 15px;
    }

    .video {
        padding-right: 15px !important;
    }
    .video .video-player {
        text-align: right;
        padding-left: 200px;
        padding-right: 0;
    }
    .video .video-player .bg-circle {
        position: absolute;
        right: 80px;
        margin-top: -760px;
        z-index: -1;
    }
    .video .video-player .player-button {
        position: absolute;
        margin-top: -270px;
        right: 365px;
        background: white;
        border-radius: 50%;
    }
    .video .video-player .player-button i {
        color: var(--blue) !important;
    }
    .video .video-player .player-container {
        background: #ffffff;
        border: 1px solid #c6cdd1;
    }

    .feature {
        text-align: center;
    }
    .feature h4 {
        margin-left: 100px;
        margin-right: 100px;
    }

    .subscribe {
        background: url("{{ asset('images/home/banner.webp') }}");
        background-size: cover;
    }
    .subscribe .left {
        color: #ffffff;
        padding-right: 100px;
    }
    .subscribe .right {
        padding-left: 50px;
    }
    .subscribe .right .card-body {
        padding: 35px;
    }

    .package .bg-package {
        padding: 4px;
        border: 1px solid #c6cdd1;
        border-radius: 25px;
        width: 140px;
    }
    .package .bg-package .btn {
        font-size: 10px;
        padding: 3px 7px;
        border-radius: 20px;
    }
    .package .price sup {
        font-size: 25px;
    }
    .package .price .nominal {
        font-size: 45px;
    }
    .package .price .rb {
        font-size: 18px;
    }
    .package strike {
        font-size: 20px;
    }
    .package .features .item {
        margin-bottom: 15px;
    }
    .package .ribbon {
        width: 125px;
        height: 125px;
        overflow: hidden;
        position: absolute;
    }
    .package .ribbon::before,
    .package .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 3px solid var(--blue);
    }
    .package .ribbon span {
        position: absolute;
        display: block;
        width: 230px;
        padding: 5px 0;
        background-color: var(--blue);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        font-size: 20px;
        color: #ffffff;
    }
    .package .ribbon-top-right {
        top: -3px;
        right: -3px;
    }
    .package .ribbon-top-right::before,
    .package .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }
    .package .ribbon-top-right::before {
        top: 0;
        left: 0;
    }
    .package .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }
    .package .ribbon-top-right span {
        left: -40px;
        top: 30px;
        transform: rotate(45deg);
    }

    .affiliate {
        background-color: var(--yellow);
        color: white;
    }
    .affiliate .left {
        padding-right: 150px;
    }

    @media (max-width: 768px) {
        .banner {
            padding: 130px 30px 0 30px !important;
            height: 500px;
        }
        .banner .title {
            font-size: 25px;
            line-height: 40px;
        }

        .video .video-description {
            padding-right: 20px !important;
        }
        .video .video-player {
            text-align: center;
            padding-left: 10px;
            padding-top: 30px;
        }
        .video .video-player .player-button {
            position: absolute;
            margin-top: -135px;
            right: 38%;
        }

        .feature h4 {
            margin-left: 0;
            margin-right: 0;
        }

        .subscribe .left {
            padding-right: 10px;
            text-align: center;
            padding-bottom: 30px;
        }
        .subscribe .right {
            padding-left: 10px;
        }

        .affiliate .left {
            padding-right: 10px;
            text-align: center;
        }
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('vendor/plyr/plyr.min.js') }}"></script>

<script>
const player = new Plyr("#player", {
	autoplay: false,
    previewThumbnails: {
        enabled: true,
        src: "{{ asset('images/home/video-thumbnail.png') }}"
    }
})

let package_time = "monthly"

$(document).ready(function() {
    $("#player-container, .hide").hide()

    $("#btn-learn-more").click(function() {
        $("html, body").scrollTop($("#video").offset().top - 50)
    })

    $("#player-thumbnail").click(function() {
        $(this).hide()
        $("#player-container").show()

        player.play()
    })

    $(".btn-package").click(function() {
        package_time = $(this).data("time")
        const time_label = (package_time == "monthly") ? "bulan" : "tahun"
        const price_class = $(this).data("price-class")
        const price_strike = $(this).data("price-strike")
        const discount = $(this).data("discount")
        const discount_rp = $(this).data("discount-rp")
        const card = $(this).closest(".card-body")

        $(this).closest(".bg-package").find("label").removeClass("btn-secondary")
        $(`label[for=${$(this).attr("id")}]`).addClass("btn-secondary")
        card.find(".nominal").html($(this).val())
        card.find(".rb").html(`/ ${time_label}`)

        if (price_class == "hide") {
            card.find(".ribbon").removeClass("visible").addClass("hide")
            card.find(".discount").removeClass("visible").addClass("hide")
            card.find(".space").removeClass("hide").addClass("visible")
            card.find("strike").removeClass("visible").addClass("hide")
        } else {
            card.find(".ribbon").removeClass("hide").addClass("visible")
            card.find(".discount").removeClass("hide").addClass("visible")
            card.find(".space").removeClass("visible").addClass("hide")
            card.find("strike").removeClass("hide").addClass("visible")
        }

        card.find("strike").html(`Rp. ${price_strike}`)
        card.find(".discount span").html(discount_rp)
        card.find(".ribbon b").html(`${discount}%`)

        $(".hide").hide()
        $(".visible").show()
    })

    $(".btn-purchase").click(function() {
        window.location = `{{ route('purchase.index') }}?p=${$(this).data("package")}&t=${package_time}`
    })
})
</script>
@endpush