@extends('admin.layouts.index')

@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="pull-right text-right" style="margin-top: 8px;">
                            <a href="properties/create" class="btn btn-w-md btn-success">Új elem létrehozása</a>
                        </div>
                        <div class="header-icon">
                            <i class="pe page-header-icon pe-7s-info"></i>
                        </div>
                        <div class="header-title">
                            <h3 class="m-b-xs">Ingatlanok</h3>
                            <small>
                                Lorem ipsum dolor sit amet.
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table id="data-table" class="table table-striped table-hover">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th class="no-sort">Státusz</th>
                                        <th class="no-sort">Kép</th>
                                        <th>Megnevezés</th>
                                        <th>Emelet</th>
                                        <th>Látható</th>
                                        <th class="text-right">Műveletek</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($properties as $property)
                                        <tr>
                                            <td style="vertical-align: middle; width: 50px;">{{ $property->id }}</td>
                                            <td style="vertical-align: middle; width: 70px;">
                                                @if($property->status == 1)
                                                    <i class="fa fa-check-circle-o c-green pointer" aria-hidden="true" rel="tooltip" title="Látható termék"></i>
                                                @else
                                                    <i class="fa fa-times-circle-o c-red pointer" aria-hidden="true" rel="tooltip" title="Nem látható termék"></i>
                                                @endif
                                            </td>

                                            <td style="vertical-align: middle; width: 36px;" class="small">
                                                @if($property->image)
                                                    <div class="img-circle img-custom" id="thumbnail-img" style="background-image: url({{ url($property->image->thumbnail_path) }});"></div>
                                                @else
                                                    <img src="https://placehold.it/30x30" class="img-circle" id="thumbnail-img" width="30">
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">{{ $property->title }}</td>
                                            <td style="vertical-align: middle; width: 36px;">{{ $property->floor }}</td>
                                            <td style="vertical-align: middle; width: 36px;">{{ $property->status }}</td>
                                            <td style="vertical-align: middle" class="text-right">
                                                <a class="btn btn-danger" data-toggle="modal"
                                                   data-target="#deleteModal-{{ $property->id }}"><i
                                                            class="fa fa-trash-o"></i></a>
                                                <a href="{{ action('AdminController@getEditProperty', array($property->id)) }}"
                                                   class="btn btn-primary"><i class="fa fa-pencil"></i></a>
                                                <div class="modal fade" id="deleteModal-{{ $property->id }}"
                                                     tabindex="-1" role="dialog" aria-hidden="true">
                                                    <div class="modal-dialog modal-lg">
                                                        <div class="modal-content">
                                                            <div class="modal-header text-center">
                                                                <h4 class="modal-title">Figyelmeztetés!</h4>
                                                            </div>
                                                            <div class="modal-body text-center">
                                                                <p>Biztosan törölni szeretnéd?<br>A művelet a
                                                                    későbbiekben nem vonható vissza és ezzel törlődik az
                                                                    elem.</p>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal">Mégse
                                                                </button>
                                                                <a href="{{ action('AdminController@getDeleteProperty', array($property->id)) }}">
                                                                    <button type="button" class="btn btn-danger">
                                                                        Törlés
                                                                    </button>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@stop

@section('custom-css')
    <link rel="stylesheet" href="{{ url('assets/admin/vendor/datatables/datatables.min.css') }}"/>
    <link rel="stylesheet" href="{{ url('assets/admin/vendor/flag-icon/css/flag-icon.min.css') }}"/>
    <style>
        table.dataTable {
            margin-top: 25px!important;
            margin-bottom: 25px!important;
        }
        sup {
                font-size: 10px!important;
                top: -0.6em!important;
        }
        .img-custom {
             width: 30px;
             height: 30px;
             background-size: cover;
        }
        td {
            vertical-align: middle !important;
            height: 40px !important;
        }
        .pointer {
            cursor: pointer;
        }
        .c-red {
            color: #DB524B !important;
        }
        .c-green {
            color: #1bbf89 !important;
        }
        .linethrough {
            text-decoration: line-through;
        }
        .fa-check-circle-o, .fa-times-circle-o, .fa-circle-o {
            font-size: 19px;
            vertical-align: -5px;
        }
    </style>
@stop

@section('custom-js')
    <script src="{{ url('assets/admin/vendor/datatables/datatables.min.js') }}"></script>

    <script>
        $('#data-table').DataTable({
            "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "lengthMenu": [[6, 25, 50, -1], [6, 25, 50, "All"]],
            "iDisplayLength": 9,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.7/i18n/Hungarian.json"
            },
            "order": [[0, 'desc']],
        });
    </script>
@stop