@extends('admin.layouts.index')

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

            <form action="{{ action('AdminController@postEditProperty', array($property->id)) }}" method="post"
                  accept-charset="utf-8">
                {!! csrf_field() !!}

                <div class="row">
                    <div class="col-lg-12">
                        <div class="view-header">
                            <div class="pull-right text-right" style="line-height: 14px">
                                <a href="{{ action('AdminController@getProperties') }}"
                                   class="btn btn-default">Vissza</a>
                                <button class="btn btn-success" type="submit"><span class="bold">Mentés</span> <i
                                            class="fa fa-floppy-o"></i></button>
                            </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">Elem módosítása</h3>
                                <small>
                                    {{ $property->title }}
                                </small>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-6">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="panel panel-filled panel-c-white">
                                    <div class="panel-heading">
                                        <h4>Általános adatok</h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Megnevezés</label>
                                                        <input type="text" name="title" class="form-control"
                                                               value="{{ $property->title }}">
                                                        <p class="help-block small">Ingatlan megjelenített neve az
                                                            oldalon (pl. 1. emelet 3. lakás)</p>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>Státusz</label>
                                                        <select name="status" data-placeholder="Státusz kiválasztása"
                                                                class="chosen-select @if($property->status == 1) active @endif"
                                                                style="width: 350px; display: none;" tabindex="-1">
                                                            <option value="0"
                                                                    @if($property->status == 0) selected @endif>
                                                                Szabad
                                                            </option>
                                                            <option value="1"
                                                                    @if($property->status == 1) selected @endif>
                                                                Foglalt
                                                            </option>
                                                            <option value="2"
                                                                    @if($property->status == 2) selected @endif>
                                                                Szerződött
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Emelet</label>
                                                        <input type="number" name="floor" class="form-control"
                                                               value="{{ $property->floor }}">
                                                        <p class="help-block small">Listanézetben a csoportosításhoz</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="panel panel-filled panel-c-white">
                                    <div class="panel-heading">
                                        <h4>Tulajdonságok</h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    @foreach($attributions as $attribution)
                                                        <div class="form-group">
                                                            <label>{{$attribution->title}}</label>
                                                            <input type="text" name="attributions[{{$attribution->id}}]"
                                                                   class="form-control"
                                                                   value="{{ $property->attributions()->whereAttributionId($attribution->id)->first()->value }}">
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="panel panel-filled panel-c-white">
                                    <div class="panel-heading">
                                        <h4>Helyiségek</h4>
                                    </div>
                                    <div class="panel-body">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label>Helyiség</label>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label>Méret</label>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group">
                                                        <label>Burkolat</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12" id="areas">
                                                    @php $i = 0; @endphp
                                                    @if(is_array($areas = json_decode($property->areas)))
                                                        @foreach($areas as $area)
                                                            <div class="row">
                                                                <div class="col-lg-4">
                                                                    <div class="form-group">
                                                                        <input type="text"
                                                                               name="areas[{{$i}}][helyiseg]"
                                                                               class="form-control"
                                                                               placeholder="Helyiség"
                                                                               value="{{ $area->helyiseg }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-group">
                                                                        <input type="text" name="areas[{{$i}}][meret]"
                                                                               class="form-control"
                                                                               placeholder="Méret"
                                                                               value="{{ $area->meret }}">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-group">
                                                                        <input type="text"
                                                                               name="areas[{{$i}}][burkolat]"
                                                                               class="form-control"
                                                                               placeholder="Burkolat"
                                                                               value="{{ $area->burkolat }}">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @php $i++; @endphp
                                                        @endforeach
                                                    @endif
                                                </div>
                                                <div class="col-lg-12">
                                                    <a id="add_row" class="btn btn-default pull-left">Hozzáad</a>
                                                    <a id='delete_row' class="pull-right btn btn-default">Elvesz</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

            </form>

            <div class="col-lg-6">

                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-filled">
                            <div class="panel-heading">
                                <h4>Képek feltöltése</h4>
                            </div>
                            <div class="panel-body">
                                <form action="{{action('AdminController@postUploadImage')}}"
                                      enctype="multipart/form-data" class="dropzone" id="dropzone">
                                    {!! csrf_field() !!}
                                    <input type="hidden" name="property_id" value="{{ $property->id }}">

                                    <div class="dropzone-previews"></div>
                                    <div class="dz-default dz-message"><span>Kattints ide, vagy húzd be a kiválasztott fényképeket!</span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h4>Fényképek</h4>
                            </div>
                        </div>
                    </div>
                                        @foreach($property->images as $image)
                                                <div class="col-lg-6">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="media">
                                        <div class="media-left">
                                            <div class="img-circle img-custom @if($property->image_id == $image->id) active-img @endif"
                                                 style="background-image: url({{ url($image->thumbnail_path) }}?refresh={{time()}});"></div>
                                        </div>
                                        <div class="media-body">
                                            @if($property->image_id != $image->id)
                                                <a href="{{ action('AdminController@getSetPropertyThumbnail', array($property->id, $image->id)) }}">
                                                    <button type="button" class="btn btn-success btn-xs m-b-xs"><i
                                                                class="fa fa-star"></i> Fő kép beállítása
                                                    </button>
                                                    <br>
                                                </a>
                                            @endif
                                            <a href="{{ action('AdminController@getImageCrop', array($image->id, 400, 400)) }}?r={{url()->current()}}">
                                                <button type="button" class="btn btn-primary btn-xs m-b-xs"><i
                                                            class="fa fa-pencil"></i> Szerkesztés
                                                </button>
                                                <br>
                                            </a>
                                            <a class="btn btn-danger btn-xs" data-toggle="modal"
                                               data-target="#deleteModal-{{ $image->id }}"><i
                                                        class="fa fa-trash-o"></i>
                                                Törlés</a>

                                            <div class="modal fade" id="deleteModal-{{ $image->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@getDeleteImage', array($image->id)) }}">
                                                                <button type="button" class="btn btn-danger">
                                                                    Törlés
                                                                </button>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($j % 2 == 0)
                            <div class="clearfix"></div>
                        @endif
                    @endforeach

                </div>
            </div>

        </div>


        </div>
    </section>
@stop

@section('custom-css')
    <link href="{{ url('assets/admin/vendor/chosen/chosen-bs.css') }}" rel="stylesheet">
    <link href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" rel="stylesheet">

    <style>
        label small {
            font-size: 75%;
            font-weight: normal;
            color: #848c94;
        }

        .mb9 {
            margin-bottom: 9px;
        }

        .chosen-select.active + .chosen-container-single .chosen-single {
            background-color: #1bbf89 !important;
            color: white !important;
            font-weight: bold !important;
        }

        .dropzone {
            border: 2px dashed #f6a821;
            border-radius: 5px;
            background: rgba(246, 168, 33, 0.1);
            color: #f6a821;
            font-weight: bold;
            font-size: 19px;
        }

        .dropzone .dz-preview.dz-image-preview {
            background: none;
        }

        .dropzone .dz-preview .dz-image {
            border-radius: 5px !important;
        }

        .img-custom {
            width: 75px;
            height: 75px;
            background-size: cover;
        }

        .media-body {
            vertical-align: middle !important;
        }

        .active-img {
            border: 2px solid #f6a821;
        }

        .modal {
            background: rgba(0, 0, 0, 0.8) !important;
        }

        .modal-content .modal-header {
            border-top-left-radius: 6px !important;
            border-top-right-radius: 6px !important;
        }

        .modal-content .modal-footer {
            border-bottom-left-radius: 6px !important;
            border-bottom-right-radius: 6px !important;
        }

        .selectize-input {
            border: none;
            color: #949ba2;
            background-color: #494b54;
        }

        .selectize-input.focus {
            box-shadow: none !important;
        }

        .selectize-input .item {
            color: #000;
            font-size: 14px;
            margin-top: 2px;
            font-weight: bold;
        }

        .selectize-dropdown {
            box-shadow: none !important;
        }

        .selectize-dropdown-content {
            font-size: 13px;
        }
    </style>
@stop

@section('custom-js')
    <script src="{{ url('assets/admin/vendor/chosen/chosen.jquery.js') }}"></script>
    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>

    <script>
        $(document).ready(function () {

            var config = {
                '.chosen-select': {width: "100%"},
                '.chosen-select-deselect': {allow_single_deselect: true},
                '.chosen-select-no-single': {disable_search_threshold: 10},
                '.chosen-select-no-results': {no_results_text: 'Nincs találat.'},
                '.chosen-select-width': {width: "95%"}
            };
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }
            ;

            Dropzone.options.dropzone = {
                paramName: "image",
                maxFilesize: 10, // MB
                maxFiles: 100,
                autoProcessQueue: true,
                init: function () {
                    this.on("success", function (file, data) {
                        console.log(data);
                    });
                }
            };

            //Helyiségek
            var i = {{ $i }};
            $("#add_row").click(function (e) {
                $("#areas").append(
                    "<div class=\"row\">\n" +
                    "    <div class=\"col-lg-4\">\n" +
                    "        <div class=\"form-group\">\n" +
                    "            <input type=\"text\" name=\"areas[" + i + "][helyiseg]\"\n" +
                    "                   class=\"form-control\"\n" +
                    "                   placeholder=\"Helyiség\"\n" +
                    "                   value=\"\">\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "    <div class=\"col-lg-4\">\n" +
                    "        <div class=\"form-group\">\n" +
                    "            <input type=\"text\" name=\"areas[" + i + "][meret]\"\n" +
                    "                   class=\"form-control\"\n" +
                    "                   placeholder=\"Méret\"\n" +
                    "                   value=\"\">\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "    <div class=\"col-lg-4\">\n" +
                    "        <div class=\"form-group\">\n" +
                    "            <input type=\"text\" name=\"areas[" + i + "][burkolat]\"\n" +
                    "                   class=\"form-control\"\n" +
                    "                   placeholder=\"Burkolat\"\n" +
                    "                   value=\"\">\n" +
                    "        </div>\n" +
                    "    </div>\n" +
                    "</div>"
                );
                i++;
            });

            $("#delete_row").click(function (e) {
                $("#areas .row:last-child").remove();
                i--;
            });

        });
    </script>
@stop