@extends('index')

@section('content')
<div class="container">
    <!--begin::Alert-->
    <div class="alert alert-dismissible bg-primary d-flex align-items-center h-m-100" style="border-radius: 24px;">
        {{-- <i class="ki-duotone ki-search-list fs-2hx text-light me-4 mb-0 mb-sm-0"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i> --}}
        <img src="{{ asset('media/tumbnail.jpeg') }}" class="w-50px h-100 me-3 rounded">
        
        <a href="{{ auth()->check() ? 'javascript:void(0)' : route('login') }}" class="look-book text-light pe-0 pe-sm-10 text-decoration-none">
            <div class="d-flex flex-column">
                <h4 class="mb-2 text-light">Look Book</h4>
                <span>Click to see all look book</span>
            </div>
        </a>
    </div>

    <div class="row">
        @forelse ($merchandises as $merchandise)
        <div class="col-6 mb-3">
            <a href="{{ $merchandise->link }}" target="_blank" class="text-decoration-none">
                <div class="card">
                    <div class="card-body">
                        <img src="{{ $merchandise->urlImage }}" class="img-fluid">
                        <h5 class="my-2">{{ $merchandise->title }}</h5>
                    </div>
                </div>
            </a>
        </div>
        @empty
        @endforelse
        {{-- <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div>
        <div class="col-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <img src="{{ asset('media/logo-perak-color.png') }}" class="img-fluid">
                    <h5 class="my-2">Produk 1</h5>
                </div>
            </div>
        </div> --}}
    </div>
</div>
@endsection

@push('modal')
@if (auth()->check())
<div class="modal fade" id="modalLookBook" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Look Book
                </h5>
            </div>
            <div class="modal-body">
                <iframe src="https://heyzine.com/flip-book/b37a1b2859.html" class="w-100 h-500px" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
@endif
@endpush

@push('scripts')
@if (auth()->check())
<script>
    $(function () {
        $(document).on('click', '.look-book', function () {
            $("#modalLookBook").modal("show")
        });
    });
</script>
@endif
@endpush