@extends('layanan_mandiri.layouts.index')

@push('css')
    <style type="text/css">
        .modal-backdrop.in {
            filter: alpha(opacity=50);
            opacity: 0;
        }
    </style>
@endpush

@section('content')
    <div class="box box-solid">
        <div class="box-header with-border bg-aqua">
            <h4 class="box-title">Lapak</h4>
        </div>
        <div class="box-header with-border">
            <form method="get" class="form-inline text-center">
                <select class="form-control" id="id_kategori" name="id_kategori">
                    <option selected value="">Semua Kategori</option>
                    @foreach ($kategori as $kategori_item)
                        <option value="{{ $kategori_item->id }}" {{ $id_kategori == $kategori_item->id ? 'selected' : '' }}>
                            {{ $kategori_item->kategori }}
                        </option>
                    @endforeach
                </select>
                <input type="text" name="keyword" maxlength="50" class="form-control" value="{{ $keyword }}" placeholder="Cari Produk">
                <button type="submit" class="btn btn-primary">Cari</button>
                @if ($keyword || $id_kategori)
                    <a href="{{ base_url('layanan-mandiri/lapak') }}" class="btn btn-info">Tampilkan Semua</a>
                @endif
            </form>
        </div>
        <div class="box-body">
            <div class="row" style="padding: 0px 20px;">
                @forelse ($produk as $in => $pro)
                                        <div class="col-md-4">
                        <div class="card mb-4 box-shadow">
                            @if ($pro->foto)
                                <div id="carousel-produk{{ $in }}" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        @for ($i = 0; $i < $ci->setting->banyak_foto_tiap_produk; $i++)
                                            @if (!empty($foto[$i]))
                                                <li data-target="#carousel-produk{{ $in }}" data-slide-to="{{ $i }}" class="{{ $i == 0 ? 'active' : '' }}"></li>
                                            @endif
                                        @endfor
                                    </ol>

                                    <div class="carousel-inner">
                                        @for ($i = 0; $i < $ci->setting->banyak_foto_tiap_produk; $i++)
                                            @if (!empty($foto[$i]))
                                                <div class="item {{ $i == 0 ? 'active' : '' }}">
                                                    @if (is_file(LOKASI_PRODUK . $foto[$i]))
                                                        <img class="image-produk card-img-top" src="{{ base_url(LOKASI_PRODUK . $foto[$i]) }}" alt="Produk {{ $i + 1 }}">
                                                    @else
                                                        <img class="card-img-top" style="width: auto; max-height: 170px;" src="{{ asset('images/404-image-not-found.jpg') }}" alt="Foto Produk">
                                                    @endif
                                                </div>
                                            @endif
                                        @endfor
                                    </div>
                                    <a class="left carousel-control" href="#carousel-produk{{ $in }}" data-slide="prev">
                                        <span class="fa fa-angle-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-produk{{ $in }}" data-slide="next">
                                        <span class="fa fa-angle-right"></span>
                                    </a>
                                </div>
                            @else
                                <img class="card-img-top" style="width: auto; max-height: 170px;" src="{{ asset('images/404-image-not-found.jpg') }}" alt="Foto Produk">
                            @endif

                            <div class="card-body">
                                <h4><b>{{ $pro->nama }}</b></h4>
                                                                <h6><b style="color:green;">Harga : {{ rupiah($pro->harga - $harga_potongan) }}
                                        @if ($pro->potongan != 0)
                                            &nbsp;&nbsp;<small style="color:red; text-decoration: line-through red;">{{ rupiah($pro->harga) }}</small>
                                        @endif
                                    </b></h6>
                                <div class="d-flex justify-content-between align-items-center" style="margin-bottom: 30px;">
                                    <div class="btn-group">
                                        @if ($pro->telepon)