@include('layout.header')

<section id="slider">
    <div class="slidercontent">
        <div id="carousel-1" class="owl-carousel owl-theme">
            @foreach ($sliders as $item)
                <div class="item">
                    <div class="listSlide">
                        <img src="{{ asset($item->image) }}">
                        @if ($loop->index == 0)
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="textSlider">
                                            <h2>Halo, {{ Auth::User()->name }}</h2>
                                            <div class="period">
                                                <p class="mb-0">Selamat Datang di My JBA Online</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="bgGrey pb-4">
    <div id="boxProfile" class="pb-4">
        <div class="container">
            <div class="bgWhite profile mb-3">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="colLeft">
                            <div class="media">
                                @if (Auth::User()->picture != null)
                                    <img src="{{ asset(Auth::User()->picture) }}" class="mr-3" alt="Profile Picture">
                                @else
                                    <img src="{{ asset('assets') }}/img/user.png" class="mr-3" alt="cart">
                                @endif

                                <div class="media-body">
                                    <div class="box">
                                        <h5 class="mt-0">{{ Auth::User()->name }} <span>({{ $position }})</span>
                                        </h5>
                                        <p>{{ Auth::User()->motto }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="colRight">
                            <form>
                                <div class="row">
                                    <div class="col-lg-6">
                                        {{-- <div class="row">
                      <label class="col-sm-3 col-form-label">NIK</label>
                      <div class="col-sm-9">
                        <input type="text" readonly class="form-control-plaintext" value="{{Auth::User()->nik}}">
                      </div>
                    </div> --}}
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Birthday</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control-plaintext"
                                                    value="{{ Auth::User()->birthdate ? date('d M Y', strtotime(Auth::User()->birthdate)) : '-' }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Email</label>
                                            <div class="col-sm-9">
                                                <input type="email" class="form-control-plaintext"
                                                    value="{{ Auth::User()->email }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Phone</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly class="form-control-plaintext"
                                                    value="{{ Auth::User()->phone }}">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label">Description</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control-plaintext"
                                                    value="{{ Auth::User()->description ?? '-' }}">
                                            </div>
                                        </div>
                                        {{--                    <div class="row"> --}}
                                        {{--                      <label class="col-sm-3 col-form-label">Password</label> --}}
                                        {{--                      <div class="col-sm-9"> --}}
                                        {{--                        <input type="password" class="form-control-plaintext" placeholder="terakhir diubah 30 juli 2020"> --}}
                                        {{--                      </div> --}}
                                        {{--                    </div> --}}
                                    </div>
                                    {{--                  <div class="col-lg-9"> --}}
                                    {{--                    <div class="row"> --}}
                                    {{--                      <label class="col-sm-2 col-form-label">Description</label> --}}
                                    {{--                      <div class="col-sm-10"> --}}
                                    {{--                        <input type="email" class="form-control-plaintext" value="{{Auth::User()->description ?? '-'}}"> --}}
                                    {{--                      </div> --}}
                                    {{--                    </div> --}}
                                    {{--                  </div> --}}
                                </div>

                            </form>

                        </div>
                    </div>
                </div>
                <div class="boxBtnChange">
                    <div class="btnChange">
                        <a href="{{ url('/user/profile') }}">
                            Ubah
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="listAkses">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="heading mb-3">
                        <h2>Akses Cepat</h2>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="boxAkses">
                        <ul>
                            <li>
                                <a href="{{ url('/team/markcc') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img src="{{ asset('assets') }}/img/akses2.png"
                                                        alt=""></td>
                                                <td>
                                                    <p>Pengajuan Event dan Promo</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/team/markcc') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img src="{{ asset('assets') }}/img/akses2.png"
                                                        alt=""></td>
                                                <td>
                                                    <p>Pengajuan Souvenir</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/team/markcc') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img src="{{ asset('assets') }}/img/akses2.png"
                                                        alt=""></td>
                                                <td>
                                                    <p>Pengajuan Design</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/user/claim_complaint') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img src="{{ asset('assets') }}/img/akses2.png"
                                                        alt=""></td>
                                                <td>
                                                    <p>Pengajuan Komplain & Klaim</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            {{-- <li>
                <a href="{{url('/library/ga_support')}}">
                  <div class="bgAkses">
                    <table style="width: 100%;height: 44px;">
                      <tr>
                        <td style="width: 2%;"><img src="{{asset('assets')}}/img/akses2.png" alt=""></td>
                        <td><p>Bantuan GA</p></td>
                      </tr>
                    </table>
                  </div>
                </a>
              </li> --}}
                            <li>
                                <a href="{{ url('/library/procedur') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img src="{{ asset('assets') }}/img/akses2.png"
                                                        alt=""></td>
                                                <td>
                                                    <p>Prosedur Kerja</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/access/saleskit') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img
                                                        src="{{ asset('assets') }}/img/akses9.png" alt="">
                                                </td>
                                                <td>
                                                    <p>Sales Kit</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/human/suggestion') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img
                                                        src="{{ asset('assets') }}/img/akses2.png" alt="">
                                                </td>
                                                <td>
                                                    <p>Pengajuan Improvement</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="https://sonic.autopedia.id" target="_blank">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img
                                                        src="{{ asset('assets') }}/img/akses7.png" alt="">
                                                </td>
                                                <td>
                                                    <p>Bantuan IT</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/library/form') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img
                                                        src="{{ asset('assets') }}/img/akses3.png" alt="">
                                                </td>
                                                <td>
                                                    <p>Form</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url('/user/find') }}">
                                    <div class="bgAkses">
                                        <table style="width: 100%;height: 44px;">
                                            <tr>
                                                <td style="width: 2%;"><img
                                                        src="{{ asset('assets') }}/img/akses5.png" alt="">
                                                </td>
                                                <td>
                                                    <p>Sobat JBA</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="listNews" class="py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="heading mb-3">
                        <h2>JBA News</h2>
                        <a href="{{ route('hotnews') }}">Lihat Lainnya</a>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($hotnews as $item)
                    <div class="col-6 col-sm-2 col-lg-2 p-2">
                        <div class="boxNews cursor-pointer"
                            onclick="goto('{{ url('/hotnews/' . $item->id . '/' . str_slug($item->title, '-')) }}')">
                            <img src="{{ asset($item->image) }}" alt="{{ $item->title }}">
                            <article>
                                <div class="titleNews">
                                    <h2 class="mb-0">{{ $item->title }}</h2>
                                </div>
                                <div class="dateNews">
                                    <span>{{ date('M d, Y', strtotime($item->created_at)) }}</span>
                                </div>
                            </article>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div id="kalenderjba">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="heading mb-3">
                        <h2>Kalender JBA</h2>
                    </div>
                    <div class="boxKalenderjba bgWhite p-2">
                        <div id="calendarJBA" class="calendar"></div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="listActive accordion" id="accordionEx">
                        <div class="headActive media text-white" style="font-weight: bold;">
                            <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1"
                                aria-expanded="true" aria-controls="collapseOne1">
                                <div style="color: white;">Karyawan Online <i
                                        class="fa fa-angle-down rotate-icon"></i></div>
                            </a>
                        </div>
                        <div id="collapseOne1" role="tabpanel" aria-labelledby="headingOne1"
                            data-parent="#accordionEx" class="lists bgWhite collapse show"
                            style="overflow-x: hidden;overflow-y: auto;padding-top: 0px;">
                            <ul class="list-unstyled">
                                @foreach ($users as $user_item)
                                    <li class="media" style="cursor: pointer;" data-toggle="modal"
                                        data-target="#popup-user{{ $user_item->id }}">
                                        @if ($user_item->picture != null)
                                            <img src="{{ asset($user_item->picture) }}"
                                                style="height: 35px;width: 35px;" class="mr-3"
                                                alt="Profile Picture">
                                        @else
                                            <img src="assets/img/user.png" style="height: 35px;width: 35px;"
                                                class="mr-3" alt="Profile Picture">
                                        @endif
                                        <div class="media-body">
                                            <h5 class="mt-0">{{ $user_item->name }}</h5>
                                            <div class="iconActive">
                                                @if ($user_item->last_login_at != null && explode(' ', $user_item->last_login_at)[0] == date('Y-m-d'))
                                                    <div class="bullet"></div>
                                                @else
                                                    <div class="bullet notActive"></div>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                    <!-- Modal -->
                                    <div class="modal fade" id="popup-user{{ $user_item->id }}" tabindex="-1"
                                        role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">
                                                        <div class="iconActive">
                                                            @if ($user_item->last_login_at != null && explode(' ', $user_item->last_login_at)[0] == date('Y-m-d'))
                                                                <div class="bullet"></div> Online
                                                            @else
                                                                <div class="bullet notActive"></div> Offline
                                                            @endif
                                                        </div>
                                                    </h5>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row p-3"
                                                        style="background-color: #fff;border-radius: 10px;">
                                                        <div class="col-lg-3 p-0">
                                                            @if ($user_item->picture != null)
                                                                <img src="{{ asset($user_item->picture) }}"
                                                                    style="max-width: 100%;border-radius: 10px;max-height: 150px;">
                                                            @else
                                                                <img src="{{ asset('assets/img/user-default.png') }}"
                                                                    style="max-width: 100%;max-height: 150px;border-radius: 10px;">
                                                            @endif
                                                        </div>
                                                        <div class="col-lg-9">
                                                            <div class="pb-2">
                                                                <span
                                                                    style="font-size: 20px;font-weight: bold;">{{ $user_item->name }}</span>
                                                                @if ($user_item->position != null)
                                                                    <span
                                                                        style="font-size: 14px;font-weight: normal;">({{ $user_item->position->name }})</span>
                                                                @endif
                                                            </div>
                                                            <div class="pb-2">
                                                                <p class="m-0">{{ $user_item->motto }}</p>
                                                            </div>
                                                            <div class="row pb-1">
                                                                <div class="col-lg-3">Birthday</div>
                                                                <div class="col-lg-9" style="font-weight: bold;">
                                                                    {{ $user_item->birthdate ? date('d M Y', strtotime($user_item->birthdate)) : '-' }}
                                                                </div>
                                                            </div>
                                                            <div class="row pb-1">
                                                                <div class="col-lg-3">Email</div>
                                                                <div class="col-lg-9" style="font-weight: bold;">
                                                                    {{ $user_item->email }}</div>
                                                            </div>
                                                            <div class="row pb-1">
                                                                <div class="col-lg-3">Phone</div>
                                                                <div class="col-lg-9" style="font-weight: bold;">
                                                                    {{ $user_item->phone }}</div>
                                                            </div>
                                                            <div class="row pb-1">
                                                                <div class="col-lg-3">Lokasi</div>
                                                                <div class="col-lg-9" style="font-weight: bold;">
                                                                    {{ $user_item->branch->name }}</div>
                                                            </div>
                                                            <div class="row pb-1">
                                                                <div class="col-lg-3">Description</div>
                                                                <div class="col-lg-9" style="font-weight: bold;">
                                                                    {{ $user_item->description }}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </ul>
                        </div>


                    </div>
                </div>

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

<section class="bgWhite py-3">
    <div id="listVideo" class="py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="heading mb-3">
                        <h2>Video Terbaru</h2>
                        <a href="{{ route('video') }}">Lihat Lainnya</a>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach ($video as $item)
                    <div class="col-6 col-lg-3 p-1 boxVideos">
                        <div class="boxVideo">
                                                        <img src="https://img.youtube.com/vi/{{ $exp[1] }}/maxresdefault.jpg"
                                alt="{{ $item->title }}">
                            <div class="descVideo">
                                <p>{{ $item->title }}</p>
                            </div>
                            <div class="boxPlay cursor-pointer" data-toggle="modal"
                                data-target="#video{{ $item->id }}">
                                <img src="{{ asset('assets') }}/img/iconPlay.png" alt="{{ $item->title }}">
                            </div>
                        </div>
                    </div>

                    {{-- Vide Modal --}}
                    <div id="video{{ $item->id }}" class="modal fade bd-example-modal-lg" tabindex="-1"
                        role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="560" height="315"
                                        src="https://www.youtube.com/embed/{{ $exp[1] }}" frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div id="souvenir" class="py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="heading mb-3">
                        <h2>Order Souvenir</h2>
                        <a href="{{ route('souvenir') }}">Lihat Lainnya</a>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div id="carousel-2" class="owl-carousel owl-theme">
                        @foreach ($souvenir as $souvenir_item)
                            <div class="item">
                                <div class="boxProduk">
                                    @if (count($souvenir_item->images) > 0)
                                        <a
                                            href="{{ url('/souvenir/' . $souvenir_item->id . '/' . str_slug($souvenir_item->name, '-')) }}">
                                            <div class="boxImg"
                                                style="height: 200px;width: 100%;background-size: auto 100%;background-repeat: no-repeat;background-position: top center;background-image: url('{{ $souvenir_item->images[0]->image }}');">
                                                &nbsp;</div>
                                        </a>
                                    @endif
                                    <div class="descProduk">
                                        <div class="titleProduk">
                                            <a
                                                href="{{ url('/souvenir/' . $souvenir_item->id . '/' . str_slug($souvenir_item->name, '-')) }}">
                                                <span>{{ $souvenir_item->name }}</span>
                                            </a>
                                        </div>
                                        <div class="stock">
                                            <span>Stock : {{ $souvenir_item->stock }} Item</span>
                                        </div>
                                        <div class="price">
                                            <span>Rp {{ number_format($souvenir_item->price, 0, ',', '.') }}</span>
                                        </div>
                                    </div>
                                    <div class="boxCart">
                                        <a
                                            href="{{ url('/souvenir/' . $souvenir_item->id . '/' . str_slug($souvenir_item->name, '-')) }}">
                                            <img src="{{ asset('assets') }}/img/iconCart.png">
                                        </a>
                                    </div>
                                    <div class="boxLove">
                                        <a href="javascript:void(0)">
                                            <div class="bgLove">
                                                <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                    class="bi bi-heart" fill="currentColor"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd"
                                                        d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
                                                </svg>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bgGrey py-4" id="meeting_room">
    <div id="boxMeeting">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="heading mb-3">
                        <h2>Pesan Ruang Meeting</h2>
                        <div class="boxSearchRight">
                            <select id="branchId" name="branchId" class="form-control select2"
                                style="width: 100%;">
                                @foreach ($branch as $item)
                                    <option value="{{ $item->id }}"
                                        {{ strtolower($item->name) == 'head office' ? 'selected' : '' }}>
                                        {{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @if (\Session::has('success'))
                        <div class="alert alert-success">
                            <ul class="m-0 pl-3">
                                <li>{!! \Session::get('success') !!}</li>
                            </ul>
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="m-0 pl-3">
                                <li>{{ $errors->first() }}</li>
                            </ul>
                        </div>
                    @endif
                    <div class="bgWhite p-2">
                        <div class="boxCalender">
                            <ul class="nav nav-tabs" id="booking-tabs" role="tablist"></ul>
                            <div class="text-right" style="color: #5a7184;font-size: 12px;">Klik Tanggal Pada Kalender
                                Untuk Memesan</div>
                            <div class="tab-content" id="booking-calendars"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="heading mb-3">
                        <h2>Cari Lokasi</h2>
                    </div>
                    <div class="bgWhite p-3">
                        <div class="boxSearch">
                            <form>
                                <div class="form-group">
                                    <select id="searchBranch" name="searchBranch" class="form-control select2"
                                        style="width: 100%;">
                                        @foreach ($branch as $item)
                                            <option value="{{ $item->id }}"
                                                {{ strtolower($item->name) == 'head office' ? 'selected' : '' }}>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="map-canvas" style="width: 100%;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

</section>

@include('layout.footer')