@extends('frontend.layouts.frontend')

@section('metaTitle', @$page->metaTitle)
@section('metaDescription', @$page->metaDescription)
@section('metaKeywords', @$page->metaKeywords)


<style>
    @media (max-width: 768px) {
        .containers {
            padding: 0px 20px !important;
        }

        .button-choice {
            gap: 5px !important;
        }

        .banner-section {
            top: -32px;
            background: url("https://duhasyariah.id/assets/frontend/images/banner.jpg") !important;

        }
    }

    @media (min-width: 768px) and (max-width: 992px) {
        .banner-section {
            top: -53px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .containers {
            display: flex;
            justify-content: center !important;
            align-items: center !important;
        }
    }

    @media (min-width: 992px) and (max-width: 1200px) {
        .banner-section {
            top: -53px !important;
        }
    }
</style>
@section('content')
    <div id="bannerAnchor" class="anchor-home-section"></div>

    <section id="home">
        <div class="banner-section top-mobile" id="bannerSection">
            <div class="containers" style="padding-left: 100px;">
                <div class="banner-box">
                    <h1 class="title" style="color:#026b85">{{ @$page->bannerTitle }}</h1>
                    <h2 class="subtitle" style="color:#026b85">{!! nl2br(@$page->bannerDescription) !!}</h2>
                    <div class="d-flex justify-content-center justify-content-lg-start align-items-center button-choice"
                        style="gap: 15px;">
                        <button type="button" class="btn"
                            style="background-color: white; border: 2px solid #026b85; border-radius: 50px; color:#026b85;">Jadi
                            Pendana</button>
                        <button type="button" class="btn"
                            style="background-color: white; border: 2px solid #026b85; border-radius: 50px; color:#026b85;">Jadi
                            Penerima Pendanaan</button>
                    </div>
                    {{-- <form method="post" action="{{ route('sendLink') }}" id="formRegister">
                        <div class="form-group">
                            <div class="input-group input-group-icon">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">+62</span>
                                </div>
                                <input type="tel" class="form-control" id="phone" name="phone" placeholder="Masukkan nomor HP" required>
                                <button type="submit" class="btn btn-main">Daftar</button>
                            </div>
                        </div>
                    </form> --}}
                </div>

                <img class="banner-image" style="width: 720px; right: 42px; top: 85px;"
                    src="{!! url('/') !!}/assets/frontend/images/HP.png" alt="banner image">
            </div>

        </div>


        <div class="default-section pb-sm-0 pt-xs-30 pb-xs-0 section-one" id="caraPinjamSection">
            <div id="caraPinjamAnchor" class="anchor-home-section"></div>

            <div class="container">
                <div class="row">
                    <div class="col-md-6 align-self-center">
                        <img src="{!! url('/') !!}/assets/frontend/images/how-it-works.png" alt="how it works">
                    </div>
                    <div class="col-md-6">
                        <label class="default-tag mb-0">Cara Mengajukan Pembiayaan</label>
                        <h3 class="default-home-title mb-30">Berbelanja semakin mudah dengan Duha Syariah</h3>

                        <div class="how-wrapper">
                            @foreach (@$page->sectionMengajukan as $keyMengajukan => $itemMengajukan)
                                <div
                                    class="item {{ count(@$page->sectionMengajukan) == $keyMengajukan - 1 ? 'pb-xs-15 mb-xs-0' : '' }}">
                                    <p class="name"><span>0{{ $keyMengajukan + 1 }}.</span> {{ @$itemMengajukan->title }}
                                    </p>
                                    <div class="content">{!! @$itemMengajukan->description !!}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="default-section pt-sm-0 pb-sm-15 pt-xs-30 pb-xs-0 section-one" id="daftarPembiayaan">
            <!-- <div class="container pb-xs-15">
                    <div class="invoice-section">
                        <h3 class="default-home-title text-center mb-50">Daftar Pembiayaan</h3>
                        @foreach ($invoices as $invoice)
    <div class="invoice" data-invoice="{{ $invoice }}">
                            @if ($invoice->restPercentage == 100)
    <div class="complete"></div>
    @endif
                            <div class="row">
                                <div class="col-6 col-md-2">
                                    <p class="invoice-name">{{ @$invoice->borrowerName }}</p>
                                    <p class="invoice-type">Pembiayaan Invoice</p>
                                </div>

                                <div class="col-6 col-md-2">
                                    <p class="label">Jumlah Pembiayaan</p>
                                    <p class="value">Rp {{ @$invoice->fundingValue }},-</p>
                                </div>

                                <div class="col-6 col-md-2">
                                    <p class="label">Resiko dan Estimasi Ujroh/Fee</p>
                                    <p class="value risk">{{ @$invoice->riskRating }}</p>
                                    <p class="value">{{ @$invoice->marginRate }}</p>
                                </div>

                                <div class="col-6 col-md-2">
                                    <p class="label">Jangka Waktu</p>
                                    <p class="value">{{ @$invoice->period }}</p>
                                </div>

                                <div class="col-6 col-md-2">
                                    <p class="label">Sisa Pendanaan</p>
                                    <p class="value mb-1">{{ $invoice->restPercentage }}</p>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" style="width: {{ $invoice->restPercentage }}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-6 col-md-2">
                                    <p class="label">Batas Waktu</p>
                                    <p>{{ @$invoice->offerClosedAt }}</p>
                                </div>
                            </div>
                        </div>
    @endforeach
                        <div class="text-center mt-30">
                            <button data-toggle="modal" data-target="#downloadAppModal" class="btn btn-main">Berikan Pembiayaan</button>
                        </div>
                    </div>
                </div>
            </div>-->


            <div class="default-section pt-sm-0 pb-sm-15 pt-xs-30 pb-xs-0 section-two" id="tipePinjamanSection">
                <div id="tipePinjamanAnchor" class="anchor-home-section"></div>

                <div class="container pb-xs-15">
                    <div class="type-loan-section">
                        <h3 class="default-home-title text-center mb-50">Tipe Pembiayaan Syariah</h3>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="loan-box multiguna">
                                    <label class="label">Konsumtif (Barang/Jasa)</label>

                                    <p class="detail">
                                        Produk halal yang dijual di e-commerce atau
                                        marketplace yang bekerja sama dengan
                                        Duha Syariah
                                    </p>

                                    <label class="tag">Maksimal Limit Pembiayaan</label>
                                    <p class="price"><sup>Rp</sup> 20.000.000,-</p>

                                    <img class="card-image"
                                        src="{!! url('/') !!}/assets/frontend/images/card-multiguna.png"
                                        alt="multiguna">

                                    <ul class="tenor-list">
                                        <li class="item">
                                            Cicilan 3 Bulan
                                        </li>
                                        <li class="item">
                                            Cicilan 6 Bulan
                                        </li>
                                        <li class="item">
                                            Cicilan 9 Bulan
                                        </li>
                                        <li class="item">
                                            Cicilan 12 Bulan
                                        </li>
                                    </ul>

                                    <a href="{{ route('faqPage', ['permalink' => 'pendaftaran']) }}"
                                        class="default-link">Lihat Syarat Pendaftaran</a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="loan-box travel">
                                    <label class="label">Perjalanan Religi</label>

                                    <p class="detail">
                                        Perjalanan Umroh dan Wisata Halal yang dijual
                                        di e-commerce atau marketplace yang bekerja
                                        sama dengan Duha Syariah
                                    </p>

                                    <label class="tag">Maksimal Limit Pembiayaan</label>
                                    <p class="price"><sup>Rp</sup> 30.000.000,-</p>

                                    <img class="card-image"
                                        src="{!! url('/') !!}/assets/frontend/images/card-travel.png"
                                        alt="travel">

                                    <ul class="tenor-list">
                                        <li class="item">
                                            Cicilan 12 Bulan
                                        </li>
                                        <li class="item">
                                            Cicilan 18 Bulan
                                        </li>
                                        <li class="item">
                                            Cicilan 24 Bulan
                                        </li>
                                    </ul>

                                    <a href="{{ route('faqPage', ['permalink' => 'pendaftaran']) }}"
                                        class="default-link">Lihat Syarat Pendaftaran</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="default-section section-three pt-xs-30 pb-xs-30" id="faqSection">
                <div id="faqAnchor" class="anchor-home-section"></div>

                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="default-tag mb-0">Memiliki pertanyaan?</label>
                            <h3 class="default-home-title mb-30">Frequently Ask Question (FAQ)</h3>

                            <img src="{!! url('/') !!}/assets/frontend/images/faq-image.png" alt="faq">
                        </div>
                        <div class="col-md-6">
                            <div class="faq-list mb-50 mb-xs-20" id="content-faq">
                                @foreach (@$faq as $faqKey => $itemFaq)
                                    <div class="item">
                                        <div class="title" data-toggle="collapse"
                                            data-target="#item-{{ $faqKey }}" aria-expanded="false"
                                            aria-controls="item-{{ $faqKey }}">
                                            {{ @$itemFaq->title }}

                                            <span class="circle-caret">
                                                <i class="fa fa-chevron-down"></i>
                                            </span>
                                        </div>

                                        <div id="item-{{ $faqKey }}" class="content collapse"
                                            aria-labelledby="content-faq" data-parent="#content-faq">
                                            {!! @$itemFaq->description !!}
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="text-center">
                                <a href="{{ route('faqPage') }}" class="default-link">Lihat Semua</a>
                            </div>

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

            <div class="footer-banner-section">
                <div id="kerjaSamaAnchor" class="anchor-home-section"></div>
                <div class="container">
                    <div class="download-box">

                        <h3 class="default-home-title mb-20">Pengajuan Kerjasama Pembiayaan Pegawai</h3>

                        <a href="{!! route('cooperationForm') !!}" class="btn btn-main">Bergabung Sekarang ></a>

                    </div>
                </div>
            </div>
    </section>
@endsection