@extends('backend.template.index')
@section('title', $title)

@push('css-between')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.css">
    <link rel="stylesheet" href="{{ url('vendors/selectpicker') }}/bootstrap-select.min.css">
@endpush
@push('script-between')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.js"></script>
    <script src="{{ url('vendors/selectpicker') }}/bootstrap-select.min.js"></script>
    <script>
        $('.datatables').DataTable();
        $('.select2').selectpicker();
    </script>
@endpush

@section('content')
    <div class="row">
        @foreach ($theme_galleries as $theme_gallery)
            <div class="col-6 col-md-3">
                <div class="card">
                    <div class="card-header border-0 text-center">
                        <h5 class="text-dark">{{ $theme_gallery->name }}</h5>
                    </div>
                    <div class="card-body">
                        <img src="{{ url('assets/images/theme-default.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="card-footer border-0">
                        @if ($office->my_theme_id == $theme_gallery->id)
                            <button class="btn btn-success btn-block">
                                <i class="fas fa-check-circle"></i>
                                Tema Aktif
                            </button>
                        @else
                            <!-- Modal -->
                            <div class="modal fade" id="modelId{{ $theme_gallery->uuid }}" tabindex="-1" role="dialog"
                                aria-labelledby="modelTitleId" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <label for="">Kode</label>
                                                <input type="text" class="form-control" name="" id=""
                                                    aria-describedby="emailHelpId" placeholder="">
                                            </div>
                                        </div>
                                        <div class="modal-footer border-0">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">Tutup</button>
                                            <button type="button" class="btn btn-primary">Pilih</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary btn-block" data-toggle="modal"
                                data-target="#modelId{{ $theme_gallery->uuid }}">
                                <i class="far fa-check-circle"></i>
                                Pilih Tema
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endsection