@extends('template.master')
@section('body')

@section('title', 'Harga Produk')
@section('description', 'Pilihan rencana terbaik untuk kebutuhan anda')

<section class="harga-wrapper bg-light">;
    <div class="container py-5 py-md-5">
        <div class="row mb-8">
            <div class="col-md-9 col-lg-7 col-xl-8 col-xxl-9 mx-auto text-center">
                <div class="tt-el-caption mt-5 mb-2">
                    <h4 class="display-7">Pilihan rencana terbaik untuk <span>kebutuhan anda</span></h4>
                </div>
            </div>
        </div>
        <!--/.row -->
        <div class="pricing-wrapper position-relative">
            <div class="shape bg-dot primary rellax w-16 h-18" data-rellax-speed="1" style="top: 2rem; right: -2.4rem;"></div>
            <div class="shape rounded-circle bg-line red rellax w-18 h-18 d-none d-lg-block" data-rellax-speed="1" style="bottom: 0.5rem; left: -2.5rem;"></div>
            <div class="pricing-switcher-wrapper switcher">
                <p class="mb-0 pe-3">Bulan</p>
                <div class="pricing-switchers">
                    <div class="pricing-switcher pricing-switcher-active"></div>
                    <div class="pricing-switcher"></div>
                    <div class="switcher-button bg-primary"></div>
                </div>
                <p class="mb-0 ps-3">Tahun</p>
            </div>
            <div class="row gy-6 mt-3 mt-md-5">
                <div class="col-md-6 col-lg-4">
                    <div class="pricing card text-center">
                        <div class="card-harga">
                            <!-- <img src="./assets/img/icons/lineal/shopping-basket.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" /> -->
                            <h4 class="card-title">Starter</h4>
                            <a href="#" class="btn btn-primary rounded-pill">Trial</a>
                            <div class="prices text-dark mt-6">
                                <div class="price price-show"><span class="price-currency">Rp</span><span class="price-value">649</span> <span class="price-duration">Bulan</span></div>
                                <div class="price price-hide price-hidden"><span class="price-currency">Rp</span><span class="price-value">99</span> <span class="price-duration">year</span></div>
                            </div>
                            <!--/.prices -->
                            <ul class="poin-harga mt-8 mb-5 text-start">
                                <li><span>Terintegrasi dengan sistem Trouble Ticketing </span></li>
                                <li>
                                    <div class="accordion accordion-wrapper" id="accordionExample">
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingOne">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Channel</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Menerima email</li>
                                                        <li>Mengirim email,</li>
                                                        <li>Menambahkan attachment file</li>
                                                        <li>Membalas email dari template yang   sudah disediakan (Quick Response) </li>
                                                        <li>Setup Quick Response</li>
                                                        <li>Fasilitas pengelompokan spam</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>
                                        <!--/.accordion-item -->
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingTwo">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Kemampuan Screen Agent</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Kemampuan untuk melakukan
                                                              identifikasi pelanggan atas pesan
                                                              yang diterima</li>
                                                        <li>Fitur mengenali pelanggan /calon
                                                              Pelanggan melalui no telpon, email,
                                                              Account Sosial Media</li>
                                                        <li>Dapat menampilkan riwayat
                                                              komunikasi omnichannel</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>
                                        <!--/.accordion-item -->
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingThree">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Kemampuan modul Supervisor</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li> Pemantauan Status Case Agent</li>
                                                        <li>Agent Status Activity Monitoring</li>
                                                        <li>Tersedia laporan trend komunikasi
                                                              omnichannel</li>
                                                        <li>Tersedia laporan produktifitas agent</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>

                                    </div>
                                </li>


                            </ul>
                            <div class="d-flex justify-content-center justify-content-lg-start mb-1 mt-1" data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">

                            </div>
                        </div>
                        <!--/.card-body -->
                    </div>
                    <!--/.pricing -->
                </div>
                <!--/column -->
                <div class="col-md-6 col-lg-4 popular">
                    <div class="pricing card text-center">
                        <div class="card-harga">
                            <div class="paling">
                                <h4><i class="bx bxs-hot"></i>Paling Popular</h4>
                            </div>
                            <!-- <img src="./assets/img/icons/lineal/home.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" /> -->
                            <h4 class="card-title mt-2">Professional</h4>
                            <a href="#" class="btn btn-primary rounded-pill">Trial</a>
                            <div class="prices text-dark mt-6">
                                <div class="price price-show"><span class="price-currency">Rp</span><span class="price-value">939</span> <span class="price-duration">Bulan</span></div>
                                <div class="price price-hide price-hidden"><span class="price-currency">Rp</span><span class="price-value">199</span> <span class="price-duration">year</span></div>
                            </div>
                            <!--/.prices -->
                            <ul class="poin-harga mt-8 mb-5 text-start">
                                <li><span>Terintegrasi dengan IPPBX, CTI </span></li>
                                <li>
                                    <div class="accordion accordion-wrapper" id="accordionExample">
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingp1">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapsep1" aria-expanded="true" aria-controls="collapsep1">Channel Facebook</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapsep1" class="accordion-collapse collapse" aria-labelledby="headingp1" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Facebook Post</li>
                                                        <li>Facebook Direct Message</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>
                                        <!--/.accordion-item -->
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingp2">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapsep2" aria-expanded="false" aria-controls="collapsep2">Channel Twitter</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapsep2" class="accordion-collapse collapse" aria-labelledby="headingp2" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Menerima dan mengirimkan pesan   melalui Mention</li>
                                                        <li>Menerima dan mengirimkan pesan   melalalui DM</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>
                                        <!--/.accordion-item -->
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingp3">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapsep3" aria-expanded="false" aria-controls="collapsep3">Channel Instagram</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapsep3" class="accordion-collapse collapse" aria-labelledby="headingp3" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Dapat menampilkan data pelanggan, transaksi pelanggan dalam 1 screen yang terintegrasi</li>
                                                        <li>Tersedia modul knowledge center</li>
                                                        <li>Mencari informasi dari knowledge center , dan dapat mengirimkan/share ke pelanggan /calon pelanggan melalui email </li>
                                                        <li>Dapat menampilkan informasi/fasilitas penting yang ada di website perusahaan (atau sumber lain) seperti info produk /promo /Simulasi perhitungan / layanan registrasi online dll keadalam satu layar</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>

                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingp4">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapsep4" aria-expanded="false" aria-controls="collapsep4">Kemampuan modul supervisor</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapsep4" class="accordion-collapse collapse" aria-labelledby="headingp4" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Tersedia pemantauan status pesan untuk semua channel</li>
                                                        <li>Tersedia Dashboard inbound omnichannel</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>

                                    </div>
                                </li>


                            </ul>
                            <div class="d-flex justify-content-center justify-content-lg-start mb-1 mt-1" data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">

                            </div>
                        </div>
                        <!--/.card-body -->
                    </div>
                    <!--/.pricing -->
                </div>
                <!--/column -->
                <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-0">
                    <div class="pricing card text-center">
                        <div class="card-harga">
                            <!-- <img src="./assets/img/icons/lineal/briefcase-2.svg" class="svg-inject icon-svg icon-svg-md text-primary mb-3" alt="" /> -->
                            <h4 class="card-title">Enterprise</h4>
                            <a href="#" class="btn btn-primary rounded-pill">Hubungi Kami</a>
                            <div class="diskusi mt-6">
                                <span>Diskusikan</span>
                            </div>
                            <!--/.prices -->
                            <ul class="poin-harga mt-8 mb-5 text-start">
                                <li><span>Terintegrasi dengan IPPBX, CTI </span></li>
                                <li>
                                    <div class="accordion accordion-wrapper" id="accordionExample">
                                        <div class="card plain accordion-item">
                                            <div class="card-header" id="headingp1">
                                                <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapsep1" aria-expanded="true" aria-controls="collapsep1">Channel SMS</button>
                                            </div>
                                            <!--/.card-header -->
                                            <div id="collapsep1" class="accordion-collapse collapse" aria-labelledby="headingp1" data-bs-parent="#accordionExample">
                                                <div class="card-poin-harga">
                                                    <ul class="poin-detail">
                                                        <li>Menerima SMS</li>
                                                        <li>Mengirimkan SMS</li>
                                                    </ul>
                                                </div>
                                                <!--/.card-body -->
                                            </div>
                                            <!--/.accordion-collapse -->
                                        </div>
                                        <!--/.accordion-item -->
                                <li><span>Channel WhatsApp</span></li>
                                <li><span>Channel Livechat</span></li>
                                <li><span>Channel Instagram</span></li>
                                <li><span>Integrasi dengan external sistem</span></li>

                        </div>
                        </li>


                        </ul>

                    </div>
                    <!--/.card-body -->
                </div>
                <!--/.pricing -->
            </div>
            <!--/column -->
        </div>
        <!--/.row -->
    </div>
    <!--/.pricing-wrapper -->
    </div>
</section>

<section class="tambah-wrapper bg-light">
    <div class="container py-5 py-md-5">
        <div class="row">
            <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
                <!-- <h2 class="fs-15 text-uppercase text-muted mb-3">Our Pricing</h2> -->
                <h3 class="display-4 mb-15 mb-md-6 px-lg-10">Tambahan</h3>
            </div>
            <!--/column -->
        </div>
        <!--/.row -->
        <div class="container">
            <div class="row mb-3 mb-md-3 mb-lg-3 align-items-center">
                <div class="col-lg-6 col-xl-8 mx-auto">
                    <div class="card-tambah">
                        <div class="tulisan d-flex">
                            <i class="bx bxl-whatsapp"></i>
                            <h4>Whatsapp Business API</h4>
                        </div>

                        <div class="d-flex justify-content-center justify-content-lg-start mb-1 mt-1" data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">
                            <a class="feature-button" href="https://wa.me/{{$profil[0]->Telp ?? ''}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan">Hubungi Whatsapp Kami</a>
                        </div>
                    </div>

                    <div class="card-tambah">
                        <div class="tulisan d-flex">
                            <i class="bx bx-message-square"></i>
                            <h4>Livechat</h4>
                        </div>
                        <div class="d-flex justify-content-center justify-content-lg-start mb-1 mt-1" data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">
                            <a class="feature-button" href="https://wa.me/{{$profil[0]->Telp ?? ''}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan">Hubungi Whatsapp Kami</a>
                        </div>
                    </div>

                    <div class="card-tambah">
                        <div class="tulisan d-flex">
                            <i class="bx bx-phone"></i>
                            <h4>Whatsapp Business API</h4>
                        </div>
                        <div class="d-flex justify-content-center justify-content-lg-start mb-1 mt-1" data-cues="slideInDown" data-group="page-title-buttons" data-delay="200">
                            <a class="feature-button" href="https://wa.me/{{$profil[0]->Telp ?? ''}}?text=Halo Tim Onebox, Saya ingin mengajukan beberapa pertanyaan">Hubungi Whatsapp Kami</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>



        <!--/.pricing-wrapper -->
    </div>
    <!-- /.container -->
</section>
<section class="card-prom wrapper">
    <div class="container py-5 py-md-5">
        <div class="card-faq rounded-4">
            <div class="card-body">
                <div class="row justify-content-between">
                    <div class="col-lg-5">
                        <h3 class="display-4 mb-4" style="font-size: 45px;color: #303f52;">Pertanyaan yang sering diajukan</h3>
                    </div>
                    <!--/column -->
                    <div class="col-lg-6">
                        <div class="accordion accordion-wrapper" id="accordionExample">
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingOne">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="color: #2a3f52;">How do I get my subscription receipt?</button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingTwo">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color: #2a3f52;">Are there any discounts for people in need?</button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingThree">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="color: #2a3f52;">Do you offer a free trial edit?</button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                            <div class="card plain accordion-item">
                                <div class="card-header" id="headingFour">
                                    <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="color: #2a3f52;">How do I reset my Account password?</button>
                                </div>
                                <!--/.card-header -->
                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                    <div class="card-body">
                                        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                                    </div>
                                    <!--/.card-body -->
                                </div>
                                <!--/.accordion-collapse -->
                            </div>
                            <!--/.accordion-item -->
                        </div>
                        <!--/.accordion -->
                    </div>
                    <!--/column -->
                </div>
                <!--/.row -->
            </div>
            <!--/.card-body -->
        </div>
        <!--/.card -->
    </div>
    <!-- /.container -->
</section>
<!-- /section -->

@endsection