@extends('admin.layouts.index')

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

            <form action="{{ action('AdminController@postEditWsDiscount', array($discount->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="margin-top: 8px;">
                                <a class="btn btn-info"
                                   href="{{ action('AdminController@getEditWsDiscountPrices', $discount->id) }}"><span
                                            class="bold">Termékek kezelése</span></a>
                                <button class="btn btn-default" type=""><span class="bold">Vissza</span></button>
                                <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-box2"></i>
                            </div>
                            <div class="header-title">
                                <h3 class="m-b-xs">{{ $discount->name }} módosítása</h3>
                                <small>Akció módosítás</small>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>

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

                        @php $nfs = session('notFoundSkus'); @endphp
                        @if($nfs && count($nfs))
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="panel panel-filled panel-c-danger">
                                        <div class="panel-heading">
                                            <div class="panel-tools">
                                                <a class="panel-toggle"><i class="fa fa-chevron-up"></i></a>
                                                <a class="panel-close"><i class="fa fa-times"></i></a>
                                            </div>
                                            <h4>Nem talált cikkszámok</h4>
                                        </div>
                                        <div class="panel-body">
                                            <ul>
                                                @foreach($nfs as $sku)
                                                    <li>{{ $sku }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <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="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>Akció megnevezése</label>
                                                    <input type="text" name="name" id="name" class="form-control" value="{{ $discount->name }}">
                                                    <p class="help-block small">Akció megnevezése az oldalon és a sliderben.</p>
                                                </div>
                                                <div class="form-group">
                                                    <label>Rendezés</label>
                                                    <input type="text" name="order" id="order" class="form-control" value="{{ $discount->order }}">
                                                    <p class="help-block small">Akció sorrendje a főoldali sliderben.</p>
                                                </div>
                                                <div class="form-group" id="sandbox-container">
                                                    <label>Akció időtartama</label>

                                                    <div class="input-daterange input-group" id="datepicker">
                                                        <input type="text" class="form-control" name="start_date" value="{{ $discount->start_date }}"/>
                                                        <span class="input-group-addon">-</span>
                                                        <input type="text" class="form-control" name="end_date" value="{{ $discount->end_date }}"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>Státusz</label>
                                                    <select name="visible" data-placeholder="Státusz kiválasztása"
                                                            class="chosen-select @if($discount->visible) active @endif"
                                                            style="width: 350px; display: none;" tabindex="-1">
                                                        <option value="0" @if(!$discount->visible) selected @endif>Nem
                                                            látható az oldalon
                                                        </option>
                                                        <option value="1" @if($discount->visible) selected @endif>
                                                            Látható az oldalon
                                                        </option>
                                                    </select>

                                                    <p class="help-block small">Akció láthatósága az oldalon.</p>
                                                </div>


                                                <div class="form-group">
                                                    <label>Termékek hozzáadása</label>
                                                    <select multiple name="products[]"
                                                            data-placeholder="Termékek kiválasztása"
                                                            class="chosen-select" style="display: none;" tabindex="-1">
                                                        @php $pIds = $discount->productIds(); @endphp
                                                        @foreach($products as $product)
                                                            <option value="{{ $product->id }}"
                                                                    @if(in_array($product->id, $pIds)) disabled @endif>{{ $product->sku }}
                                                                : {{ $product->title }}</option>
                                                        @endforeach
                                                    </select>

                                                    <p class="help-block small">Termékek felvétele egyesével.</p>
                                                </div>


                                                <div class="form-group">
                                                    <label>Termékek tömeges hozzáadása (Cikkszám alapján)</label>
                                                    <textarea name="addProducts"
                                                              data-placeholder="Termékek kiválasztása"
                                                              class="form-control" rows="4"></textarea>

                                                    <p class="help-block small">Csoportos hozzárendelés (pl. excel tábla
                                                        celláinak kimásolása).</p>
                                                </div>


                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label>Leírás</label>
                                                    <textarea name="description" class="form-control"
                                                              rows="5">{{ $discount->description }}</textarea>

                                                    <p class="help-block small">Akció rövid bemutatása.</p>
                                                </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ép feltöltése</h4>
                            </div>
                            <div class="panel-body">
                                <form action="{{action('AdminController@postUploadWsImage', [400, 400])}}"
                                      enctype="multipart/form-data" class="dropzone" id="dropzone">
                                    {!! csrf_field() !!}
                                    <input type="hidden" name="discount_id" value="{{ $discount->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 class="panel-footer">
                                <small>Maximum 1 darab fénykép feltöltése lehetséges.</small>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h4>Fényképek</h4>
                            </div>
                        </div>
                    </div>
                                        @foreach($discount->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($discount->image_id == $image->id) active-img @endif"
                                                 style="background-image: url({{ url($image->thumbnail_path) }}?refresh={{time()}});"></div>
                                        </div>
                                        <div class="media-body">
                                            @if($discount->image_id != $image->id)
                                                <a href="{{ action('AdminController@getSetProductThumbnail', array($discount->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@getDeleteWsImage', 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($i % 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="{{ url('assets/admin/vendor/icheck/custom.css') }}" rel="stylesheet">
    <link href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" rel="stylesheet">
    <link href="{{ url('assets/admin/vendor/datepicker/bootstrap-datepicker3.standalone.min.css') }}" rel="stylesheet">
    <style>
        th {
            color: #000 !important;
        }

        .datepicker table tr td.active.active, .datepicker table tr td span.active.active {
            background: #f6a821 !important;
        }

        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;
        }
    </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 src="{{ url('assets/admin/vendor/icheck/icheck.min.js') }}"></script>
    <script src="{{ url('assets/admin/vendor/datepicker/bootstrap-datepicker.js') }}"></script>
    <script src="{{ url('assets/admin/vendor/datepicker/bootstrap-datepicker.hu.min.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: "file",
                maxFilesize: 10, // MB
                maxFiles: 100,
                autoProcessQueue: true,
                init: function () {
                    this.on("success", function (file, data) {
                        console.log(data);
                    });
                }
            };

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_flat-orange',
                radioClass: 'icheckbox_flat-orange'
            });

            $('#sandbox-container .input-daterange').datepicker({
                format: "yyyy.mm.dd",
                language: "hu",
                orientation: "bottom auto",
                keyboardNavigation: false,
                forceParse: true,
                calendarWeeks: false,
                todayHighlight: true,
                //defaultViewDate: { year: {{ Carbon::now()->format('Y') }}, month: {{ Carbon::now()->format('m') }}, day: {{ Carbon::now()->format('d') }} },
            });
        });
    </script>
@stop