@extends('admin.layouts.index')

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

            <form action="{{ action('AdminController@postEditWsDiscountPrices', 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 href="{{ action('AdminController@getEditWsDiscount', array($discount->id)) }}">
                                    <button class="btn btn-default" type="button"><span class="bold">Vissza</span></button>
                                </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-box2"></i>
                            </div>
                            <div class="header-title">
                                <h3 class="m-b-xs">{{ $discount->name }} tömeges árazása</h3>
                                <small>Akció módosítás</small>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>

                {{--<div class="row">
                    <div class="col-lg-3">
                        <div class="panel panel-filled panel-c-info">
                            <div class="panel-body">
                                <div class="form-group">
                                    <label>Százalékos kitöltés</label>
                                    <input type="text" class="form-control" id="percent">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-info btn-xs" id="calculate" type="button">
                                        <i class="fa fa-check"></i> Kitöltés
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>--}}

                <div class="row">
                    {{--<div class="col-lg-12">
                        <div class="panel panel-filled panel-c-white">
                            <div class="panel-heading">
                                <h4>Termékek árai</h4>
                            </div>
                            <div class="panel-body">
                                @foreach($discount->products as $product)
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <label>{{ $product->title }}</label>
                                            </div>
                                            <div class="col-lg-3">
                                                {{ $product->sku }}
                                            </div>
                                            <div class="col-lg-3 text-right">
                                                {{ $product->price }} Ft
                                            </div>
                                            <div class="col-lg-3">
                                                <input type="text" name="price-{{ $product->id }}"
                                                       class="form-control price-input"
                                                       data-price="{{ $product->price }}"
                                                       value="{{ $product->pivot->price }}">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>--}}


                    <div class="col-lg-12">
                        <div class="panel">
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>Cikkszám</th>
                                            <th>Státusz</th>
                                            <th>Átvételi mód</th>
                                            <th></th>
                                            <th>Termék neve</th>
                                            <th class="text-right">Egységár</th>
                                            <th class="text-right">Ár módosítása</th>
                                            <th class="text-right">Akciós ár</th>
                                            <th style="padding-right: 60px"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td colspan="6" class="text-right small" style="padding-right:20px;">Az
                                                akció %-os arányban:<br>Az árak frissítése csak egy azonnali segéd, a
                                                frissítés után manuálisan is átírhatóak!
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" id="percent"><br>
                                                <button class="btn btn-accent btn-xs" id="calculate" type="button">
                                                    Árak frissítése <i class="fa fa-refresh"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @foreach($products = $discount->products()->orderBy('webshop_discount_product.id', 'asc')->paginate(200) as $product)
                                            <tr id="product-{{ $product->id }}">
                                                <td class="col-lg-1 text-left"><span class="label label-accent"
                                                                                     style="color:#000;">{{ $product->sku }}</span>
                                                </td>
                                                <td class="col-lg-1">
                                                    @if($product->visible == 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 class="col-lg-1">
                                                    @if($product->only_personal == 1)
                                                        <small><strong>Csak személyesen átvehető</strong></small>
                                                    @else
                                                        <small>Rendelhető</small>
                                                    @endif
                                                </td>

                                                <td class="col-lg-1">
                                                    <div class="media" style="">
                                                        <a class="pull-left"
                                                           style="padding-right: 4px; margin-right: 10px; margin-top: 8px;">
                                                            @if($product->image)
                                                                <img class="media-object img-circle"
                                                                     src="{{ url($product->image->thumbnail_path) }}"
                                                                     style="width: 70px; height: 70px">
                                                            @else
                                                                <img class="media-object img-circle"
                                                                     src="https://placehold.it/70x70"
                                                                     style="width: 70px; height: 70px">
                                                            @endif
                                                        </a>
                                                    </div>
                                                </td>
                                                <td class="col-lg-4 text-left">
                                                    <span class="font-bold c-accent">{{ $product->title }}</span><br>
                                                    <small>{!! $product->category->categoryList() !!}</small>
                                                </td>
                                                <td class="col-lg-1 text-right">{{ number_format($product->price) }}
                                                    HUF
                                                </td>
                                                <td class="col-lg-1 text-right" style="padding-left: 10px">
                                                    <input type="text" name="original-price-{{ $product->id }}"
                                                           class="form-control"
                                                           value="{{ $product->price }}">
                                                </td>
                                                <td class="col-lg-1 text-right" style="padding-left: 10px">
                                                    <input type="text" name="price-{{ $product->id }}"
                                                           class="form-control price-input"
                                                           data-price="{{ $product->price }}"
                                                           value="{{ $product->pivot->price }}">
                                                </td>
                                                <td class="col-lg-1 text-right">
                                                    <button type="button" class="btn btn-danger"
                                                            onclick="deleteProduct({{ $product->id }})">
                                                        <i class="fa fa-times"></i>
                                                    </button>
                                                    <a href="{{ action('AdminController@getEditWsProduct', array($product->id)) }}" class="btn btn-primary"> <i class="fa fa-pencil"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        {{ $products->links() }}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>

            </form>

        </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 rel="stylesheet" href="{{ url('assets/admin/vendor/tipsy/tipsy.css') }}"/>
    <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;
        }

        .pointer {
            cursor: pointer;
        }

        .c-red {
            color: #DB524B !important;
        }

        .c-green {
            color: #1bbf89 !important;
        }

        .fa-check-circle-o, .fa-times-circle-o, .fa-circle-o {
            font-size: 19px;
            vertical-align: -5px;
        }

        .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;
        }

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            vertical-align: middle;
            padding: 13px 0;
            border-top: 0;
        }
    </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/tipsy/jquery.tipsy.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);
                    });
                }
            };

            $('#calculate').click(function () {
                var percent = $('#percent').val();
                $('.price-input').each(function (i) {
                    var price = $(this).data('price');
                    $(this).val(Math.round(price / 100 * (100 - percent)));
                });
            });

            $('[rel=tooltip]').tipsy({fade: true, gravity: 'w'});
        });

        function deleteProduct(pId) {
            $.get('{{ url('admin/ws/discounts/'.$discount->id.'/delete-product') }}/' + pId, function (data) {
                $("#product-" + pId).remove();
            });
        }
    </script>
@stop