@extends('vendor.site-bases.admin.inc.layout')

@section('title', 'პროდუქცია')

@section('content')
    <div class="page-title">
        <div class="title_left">
            <h3>პროდუქცია</h3>
        </div>
    </div>
    @include('vendor.site-bases.admin.inc.message')
    <div class="row">
        <div class="col-md-12">
            <div class="pagin">
                {{ $products->appends(request()->except('page'))->links() }}
                <select class="form-control" id="select-per-page">
                    <option value="">აირჩიეთ რამდენი გამოჩნდეს</option>
                    <option value="50" {{ request()->input('per_page') == 50 ? 'selected' : '' }}>გამოჩნდეს 50</option>
                    <option value="100" {{ request()->input('per_page') == 100 ? 'selected' : '' }}>გამოჩნდეს 100</option>
                </select>
            </div>
            <div class="x_panel">
                <div class="x_title">
                    <a href="{{ url('admin/products/create') }}" class="btn btn-sm btn-success pull-right">
                        <i class="fa fa-models"></i> დამატება
                    </a>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form action="">
                        <div class="col-md-12">
                            <div class="col-md-5">
                                <span>კატეგორიები</span>
                                <select name="categories[]" id="categories" multiple class="form-control">
                                    <option value="">აირჩიეთ</option>
                                    @foreach ($categories as $item)
                                        <option value="{{ $item->id }}"
                                            {{ request()->get('categories') && in_array($item->id, request()->get('categories')) ? 'selected' : '' }}>
                                            {{ $item->title }}
                                        </option>
                                        @foreach ($item->children as $child)
                                            <option value="{{ $child->id }}"
                                                {{ request()->get('categories') && in_array($child->id, request()->get('categories')) ? 'selected' : '' }}>
                                                &nbsp;&nbsp;&nbsp;{{ $child->title }}
                                                @foreach ($child->children as $third)
                                            <option value="{{ $third->id }}"
                                                {{ request()->get('categories') && in_array($third->id, request()->get('categories')) ? 'selected' : '' }}>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $third->title }}
                                            </option>
                                        @endforeach
                                        </option>
                                    @endforeach
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="q" value="{{ request()->input('q') }}"
                                    class="form-control" placeholder="საძიებო სიტყვა">
                            </div>
                            <div class="col-md-1">
                                <input type="submit" class="btn btn-sm btn-success" value="ფილტრაცია">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="x_content {{ auth()->user()->can('ordering-product')? 'admin_container': '' }}">
                    @if (count($products))
                        <table class="table table-striped jambo_table bulk_action">
                            <thead>
                                <tr class="headings">
                                    <th class="text-center column-title" width="40px">ID</th>
                                    @can('publish-product')
                                        <th class="text-center column-title" width="70px">სტატუსი</th>
                                    @endcan
                                    @can('on-main-page-product')
                                        <th class="text-center column-title" width="70px">გამოჩნდეს მთავარზე</th>
                                    @endcan
                                    <th class="column-title">სათაური</th>
                                    <th class="column-title">Fina ID</th>
                                    <th class="column-title">Fina კოდი</th>
                                    <th class="column-title text-center">თარიღი</th>
                                    @can('update-product')
                                        <th class="column-title text-center">მახასიათებლები</th>
                                    @endcan
                                    <th class="column-title"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($products as $key => $product)
                                    <tr class="{{ auth()->user()->can('ordering-product')? 'cursor-move': '' }}">
                                        @can('ordering-product')
                                            <td class="text-center sort" id="sort{{ $key }}"
                                                data-id="{{ $product->id }}" data-ordering="{{ $product->ordering }}">
                                                {{ $product->ordering }}
                                            </td>
                                        @else
                                            <td class="text-center">
                                                {{ $product->id }}
                                            </td>
                                        @endcan
                                        @can('publish-product')
                                            <td class="text-center">
                                                <input type="checkbox" value="published" id="{{ $product->id }}"
                                                    class="js-switch publish" {{ $product->published ? 'checked' : '' }} />
                                            </td>
                                        @endcan
                                        @can('on-main-page-product')
                                            <td class="text-center">
                                                <input type="checkbox" value="on_main_page" id="{{ $product->id }}"
                                                    class="js-switch on_main_page"
                                                    {{ $product->shop_main_page ? 'checked' : '' }} />
                                            </td>
                                        @endcan
                                        <td>
                                            @if ($product->thumb)
                                                <img class="post" src="{{ asset($product->thumb) }}" alt="" />
                                            @endif
                                            @can('update-product')
                                                <a href="{{ url('admin/products/edit/' . $product->id) }}">
                                                    {{ Str::limit($product->detail()->where('locale', 'ka')->first()->title,35) }}
                                                    <b>(ზომები: {{ $product->children_count }})</b>
                                                </a>
                                            @else
                                                {{ Str::limit($product->detail()->where('locale', 'ka')->first()->title,35) }}
                                                <b>(ზომები: {{ $product->children_count }})</b>
                                            @endcan
                                        </td>
                                        <td>{{ $product->unique_code }}</td>
                                        <td>{{ Arr::get($product->fina_data, 'code') }}</td>
                                        <td class="text-center">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                                            {{ $product->created_at }}
                                        </td>
                                        @can('update-product')
                                            <td class="text-center">
                                                <button class="btn btn-info btn-sm" data-id="{{ $product->id }}"
                                                    class="product-properties-button" data-toggle="modal"
                                                    data-target="#properties" title="მახასიათებლები"><i class="fa fa-tasks"
                                                        aria-hidden="true"></i>
                                                </button>
                                            </td>
                                        @endcan
                                        <td align="right">
                                            @can('merge-product')
                                                <button class="btn btn-dark btn-sm" data-id="{{ $product->id }}"
                                                    class="product-merge-button" data-toggle="modal" data-target="#mergeProduct"
                                                    title="გაერთიანება"><i class="fa fa-compress"
                                                        aria-hidden="true"></i></button>
                                            @endcan
                                            @can('update-product')
                                                <a href="{{ url('admin/products/edit/' . $product->id) }}"
                                                    class="btn btn-info btn-sm"><i class="fa fa-pencil"></i> </a>
                                            @endcan
                                            @can('delete-product')
                                                <a href="{{ url('admin/products/delete/' . $product->id) }}"
                                                    class="delete btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></a>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $products->appends(request()->except('page'))->links() }}
                    @else
                        <div class="alert alert-info">პროდუქცია ვერ მოიძებნა</div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mergeProduct" tabindex="-1" role="dialog" aria-labelledby="mergeProductTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form action="{{ route('products.merge') }}" method="POST">
                @csrf
                <input type="hidden" name="product_id" id="product_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <ul class="nav nav-tabs">
                                        @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                            @php
                                                if ($localeCode == 'en') {
                                                    $ico = 'gb';
                                                } elseif ($localeCode == 'ka') {
                                                    $ico = 'ge';
                                                } else {
                                                    $ico = $localeCode;
                                                }
                                            @endphp

                                            <li
                                                class="{{ $localeCode == config('kakhura.site-bases.admin_editors_default_locale') ? 'active' : '' }}">
                                                <a href="#{{ $localeCode }}" data-toggle="tab">
                                                    <span class="flag-icon flag-icon-{{ $ico }}"></span>
                                                    {{ $properties['native'] }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                    <div class="tab-content">
                                        @foreach (LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                            <div class="tab-pane {{ $localeCode == config('kakhura.site-bases.admin_editors_default_locale') ? 'active' : '' }}"
                                                id="{{ $localeCode }}">
                                                <div class="form-group">
                                                    <input type="text" name="title_{{ $localeCode }}"
                                                        class="form-control" id="title_{{ $localeCode }}" required>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button class="btn btn-primary" type="button" data-toggle="collapse"
                                        data-target="#sizePlusCollapse" aria-expanded="false"
                                        aria-controls="sizePlusCollapse">პროდუქტის დამატება</button>
                                    <div class="collapse" id="sizePlusCollapse">
                                        <div class="card card-body">
                                            <input type="text" class="form-control" id="searchProduct"
                                                placeholder="ჩაწერე პროდუქციის დასახელება">
                                            <div class="list-group" id="searchProductList"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-12" id="sizes"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">შენახვა</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">დახურვა</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="properties" tabindex="-1" role="dialog" aria-labelledby="propertiesTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <button type="submit" form="properties-form" class="btn btn-primary">შენახვა</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">დახურვა</button>
                </div>
                <form id="properties-form" method="POST" action="{{ route('products.update.properties') }}">
                    @csrf
                    <input type="hidden" name="product_id" id="product_id_prop">
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">
                                <input type="text" placeholder="ძებნა" class="form-control"
                                    id="search-into-properties">
                            </div>
                            <br>
                            <div id="properties_list"></div>
                        </div>
                    </div>
                    <div class="modal-footer pull-left">
                        <button type="submit" class="btn btn-primary">შენახვა</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">დახურვა</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        .modal-dialog {
            width: 65%;
        }

        .close {
            margin: 0;
        }

        .close span {
            font-size: 30px;
        }

        .product-title {
            font-size: 18px;
        }

        .list-group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .full-size {
            background-color: #e0e0e0;
            padding: 10px 0;
        }

        .full-size-new {
            background: #2bd600;
            padding: 10px 0;
        }

        .select2.select2-container.select2-container--default {
            width: 85% !important;
        }

        .input-div {
            padding-left: 0px !important;
        }

        .delete-button {
            display: flex;
            flex-direction: column;
        }

        .checkbox label:after,
        .radio label:after {
            content: '';
            display: table;
            clear: both;
        }

        .checkbox .cr,
        .radio .cr {
            position: relative;
            display: inline-block;
            border: 1px solid #a9a9a9;
            border-radius: .25em;
            width: 1.3em;
            height: 1.3em;
            float: left;
            margin-right: .5em;
        }

        .radio .cr {
            border-radius: 50%;
        }

        .checkbox .cr .cr-icon,
        .radio .cr .cr-icon {
            position: absolute;
            font-size: .8em;
            line-height: 0;
            top: 50%;
            left: 20%;
        }

        .radio .cr .cr-icon {
            margin-left: 0.04em;
        }

        .checkbox label input[type="checkbox"],
        .radio label input[type="radio"] {
            display: none;
        }

        .checkbox label input[type="checkbox"]+.cr>.cr-icon,
        .radio label input[type="radio"]+.cr>.cr-icon {
            transform: scale(3) rotateZ(-20deg);
            opacity: 0;
            transition: all .3s ease-in;
        }

        .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
        .radio label input[type="radio"]:checked+.cr>.cr-icon {
            transform: scale(1) rotateZ(0deg);
            opacity: 1;
        }

        .checkbox label input[type="checkbox"]:disabled+.cr,
        .radio label input[type="radio"]:disabled+.cr {
            opacity: .5;
        }
    </style>
    <link href="{{ asset('assets/admin') }}/vendors/select2/dist/css/select2.min.css" rel="stylesheet">

    <link href="{{ asset('assets/admin') }}/vendors/switchery/dist/switchery.min.css" rel="stylesheet">

    <link href="{{ asset('assets/admin') }}/vendors/redactor/redactor1.css" rel="stylesheet">

    <link href="{{ asset('assets/admin/vendors/jquery.fileuploader/jquery.fileuploader.css') }}" rel="stylesheet">
@endsection

@section('script')
    <script src="{{ asset('assets/admin') }}/vendors/jquery.tagsinput/src/jquery.tagsinput.js"></script>
    <script src="{{ asset('assets/admin') }}/vendors/switchery/dist/switchery.min.js"></script>
    <script src="{{ asset('assets/admin') }}/vendors/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('assets/admin') }}/vendors/autosize/dist/autosize.min.js"></script>
    <script src="{{ asset('assets/admin') }}/vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js"></script>
    <script src="{{ asset('assets/admin') }}/vendors/starrr/dist/starrr.js"></script>
    <script src="{{ asset('assets/admin/vendors/redactor/redactor1.js') }}"></script>
    <script src="{{ asset('assets/admin/vendors/jquery.fileuploader/jquery.fileuploader.js') }}"></script>
    <script>
        $('#categories').select2();

        $('#properties').on('shown.bs.modal', function(e) {
            let id = $(e.relatedTarget).data('id');
            $('#product_id_prop').val(id);
            $.ajax({
                url: "{{ route('products.full.properties') }}",
                type: "POST",
                data: "_token={{ csrf_token() }}" + "&id=" + id,
            }).done(function(data) {
                $('#properties_list').html(data);
            });
        });

        $('#search-into-properties').keyup(function() {
            let id = $("#product_id_prop").val();
            $.ajax({
                url: "{{ route('products.filtered.properties') }}",
                type: "POST",
                data: "_token={{ csrf_token() }}" + "&id=" + id + "&q=" + this.value,
            }).done(function(data) {
                $('.property-type').each(function () {
                    if (!data.includes($(this).data('id'))) {
                        $(this).addClass('display-none');
                    } else {
                        $(this).removeClass('display-none');
                    }
                });
                // $('#properties_list').html(data);
            });
        });
    </script>
@endsection

@section('js')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    @if (isset($limit))
        <script>
            $(document).ready(function() {

                $page = "1";

                $limit = "";
                $k = $limit * ($page - 1);

                $('.admin_container tbody').sortable({
                    start: function(event, ui) {

                        var start_pos = ui.item.index();
                        ui.item.data('start_pos', start_pos);
                    },
                    update: function(event, ui) {
                        var index = ui.item.index();
                        var start_pos = ui.item.data('start_pos');

                        //update the html of the moved item to the current index
                        $('.admin_container tbody tr:nth-child(' + (index + 1) + ') .sort').html(index +
                            $k + 1).attr('data-ordering', index + $k + 1);

                        if (start_pos < index) {
                            //update the items before the re-ordered item
                            for (var i = index; i > 0; i--) {
                                $('.admin_container tbody tr:nth-child(' + i + ') .sort').html(i + $k).attr(
                                    'data-ordering', i + $k);

                            }
                        } else {
                            //update the items after the re-ordered item
                            for (var i = index + 2; i <= $(".admin_container tbody tr").length; i++) {
                                $('.admin_container tbody tr:nth-child(' + i + ') .sort').html(i + $k).attr(
                                    'data-ordering', i + $k);


                            }
                        }
                        changeordering();
                    },
                });

            });

            function changeordering() {
                var multi = $('.sort');
                var arr = [];
                for (var i = 0; i < multi.length; i++) {
                    arr.push([$('#sort' + i).attr('data-id'), $('#sort' + i).attr('data-ordering')]);
                }

                arr = JSON.stringify(arr);
                $.ajax({
                    url: "{{ url('admin/products/ordering') }}",
                    type: "POST",
                    data: "_token={{ csrf_token() }}" + "&ordering=" + arr +
                        "&className={{ addslashes(config('kakhura.site-bases.ordering_classes.products')) }}",
                }).done(function(data) {})
            }
        </script>
    @endif

    <script type="text/javascript">
        $(document).ready(function() {
            $('.delete').click(function(e) {
                var target = $(this).attr('href');
                e.preventDefault();
                $.confirm({
                    title: 'დასტური',
                    content: 'დარწმუნებული ხართ, რომ გურთ ამის სამუდამოდ წაშლა?',
                    buttons: {

                        confirm: {

                            text: 'წაშლა',

                            btnClass: 'btn-red',

                            action: function() {

                                location.replace(target)

                            }

                        },

                        close: {

                            text: 'დახურვა',

                            action: function() {

                            }

                        }

                    }
                });
            });

            $('.publish').change(function(event) {
                var id = $(this).attr('id');
                var published = ($(this).is(':checked')) ? 1 : 0;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    url: '{{ url('admin/products/publish') }}',
                    type: "post",
                    data: {
                        id: id,
                        published: published,
                        _token: '{{ csrf_token() }}',
                        className: "{{ addslashes(config('kakhura.site-bases.publish_classes.products')) }}"
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            new PNotify({
                                text: 'წარმატებით განახლდა',
                                type: 'success',
                                styling: 'bootstrap3'
                            });
                        } else {
                            new PNotify({
                                text: 'დაფიქსირდა შეცდომა',
                                type: 'error',
                                styling: 'bootstrap3'
                            });
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        new PNotify({
                            text: 'დაფიქსირდა შეცდომა',
                            type: 'error',
                            styling: 'bootstrap3'
                        });
                    }
                });
            });

            $('.on_main_page').change(function(event) {
                var id = $(this).attr('id');
                var on_main_page = ($(this).is(':checked')) ? 1 : 0;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    url: '{{ url('admin/products/on-main-page') }}',
                    type: "post",
                    data: {
                        id: id,
                        on_main_page: on_main_page,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            new PNotify({
                                text: 'წარმატებით განახლდა',
                                type: 'success',
                                styling: 'bootstrap3'
                            });
                        } else {
                            new PNotify({
                                text: 'დაფიქსირდა შეცდომა',
                                type: 'error',
                                styling: 'bootstrap3'
                            });
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        new PNotify({
                            text: 'დაფიქსირდა შეცდომა',
                            type: 'error',
                            styling: 'bootstrap3'
                        });
                    }
                });
            });
        });

        let units = {!! json_encode($units) !!};

        $('#mergeProduct').on('shown.bs.modal', function(e) {
            let id = $(e.relatedTarget).data('id');
            $.ajax({
                url: "{{ route('products.get') }}",
                type: "POST",
                data: "_token={{ csrf_token() }}" + "&id=" + id,
            }).done(function(data) {
                $('#product_id').val(data.id);
                data.detail.forEach(detail => {
                    $('#title_' + detail.locale).val(detail.title);
                });

                let index = 0;
                let html = '';
                data.children.forEach(child => {
                    html += generateHtml(child, index);
                    index++;
                });
                $('#sizes').html(html);
                deleteSize();
            });
        });

        $('#searchProduct').keyup(function() {
            $('#searchProductList').html('');
            if (this.value.length > 3) {
                $.ajax({
                    url: "{{ route('products.get.q') }}",
                    type: "POST",
                    data: "_token={{ csrf_token() }}" + "&q=" + this.value,
                }).done(function(data) {
                    let html = '';
                    data.forEach(product => {
                        html += '<button type="button" data-id="' + product.id +
                            '" class="list-group-item list-group-item-action">' + product.detail[0]
                            .title + '</button>';
                    });
                    $('#searchProductList').html(html);
                    addProduct();
                });
            }
        });

        function addProduct() {
            $('.list-group-item-action').click(function() {
                let id = $(this).data('id');
                $.ajax({
                    url: "{{ route('products.get') }}",
                    type: "POST",
                    data: "_token={{ csrf_token() }}" + "&id=" + id,
                }).done(function(data) {
                    let size = {
                        id: data.id,
                        discounted_price: data.discounted_price,
                        price: data.price,
                        quantity: data.quantity,
                        size: null,
                        unique_code: data.unique_code == null ? '' : data.unique_code,
                        unit_id: data.unit_id,
                    };
                    let index = $('.full-size').length + $('.full-size-new').length;
                    let html = generateHtml(size, index, 'full-size-new');
                    if ($('#sizes .full-size').length == 0 && $('#sizes .full-size-new').length == 0) {
                        $('#sizes').html(html);
                    } else {
                        if ($('#sizes .full-size-new').length == 0) {
                            $(html).insertBefore($('.full-size').first());
                        } else {
                            $(html).insertBefore($('.full-size-new').first());
                        }
                    }
                    deleteSize();
                    $('#sizePlusCollapse input').val('');
                    $('#sizePlusCollapse #searchProductList').html('');
                });
            });
        }

        function deleteSize() {
            $('.sizes-delete').click(function() {
                let parent = $(this).parent().parent().parent().parent();
                let that = this;
                $.confirm({
                    title: 'დასტური',
                    content: 'დარწმუნებული ხართ, რომ გურთ ამის სამუდამოდ წაშლა?',
                    buttons: {
                        confirm: {
                            text: 'წაშლა',
                            btnClass: 'btn-red',
                            action: function() {
                                let id = $(that).data('id');
                                $.ajax({
                                    url: "{{ route('products.delete.merged') }}",
                                    type: "POST",
                                    data: "_token={{ csrf_token() }}" + "&product_id=" + id,
                                }).done(function(data) {
                                    if (data.success) {
                                        $(parent).remove();
                                    }
                                });
                            }
                        },
                        close: {
                            text: 'დახურვა',
                            action: function() {}
                        }
                    }
                });
            })
        }

        function convertToString(val) {
            return val === null ? '' : parseFloat(val).toFixed(2);
        }

        function convertToInt(val) {
            return val === 0 ? '' : val;
        }

        function generateHtml(size, index, className = 'full-size') {
            let html = '<div class="' + className + '"><input name="sizes[' + index +
                '][id]" class="size_id" type="hidden" value="' + size.id +
                '"><div class="row prices-sizes"><div class="col-md-12"><div class="col-md-2"><label>ზომა</label><input type="text" name="sizes[' +
                index + '][size]" class="form-control" value="' + (size.size === null ? '' : size.size) +
                '" placeholder="ზომა"></div><div class="col-md-2"><label>საზომი ერთეული</label><select name="sizes[' +
                index + '][unit_id]" class="form-control"><option value="">საზომი ერთეული</option>';
            units.forEach(unit => {
                html += '<option value="' + unit.id + '" ' + (unit.id === size.unit_id ? 'selected' : '') + '>' +
                    unit.detail[0].title + '</option>';
            });
            html += '</select></div><div class="col-md-1"><label>ფასი</label><input type="text" required name="sizes[' +
                index + '][price]" value="' + (size.price == null ? '' : parseFloat(size.price).toFixed(2)) +
                '" placeholder="ფასი" class="form-control"></div><div class="col-md-2"><label>ფასდაკლებული ფასი</label><input type="text" value="' +
                (size.discounted_price == null ? '' : parseFloat(size.discounted_price).toFixed(2)) + '" name="sizes[' +
                index +
                '][discounted_price]" placeholder="ფასდაკლებული ფასი" class="form-control"></div><div class="col-md-2"><label>უნიკალური კოდი</label><input type="text" value="' +
                size.unique_code + '" required name="sizes[' + index +
                '][unique_code]" placeholder="უნიკალური კოდი" class="form-control"></div><div class="col-md-2"><label>რაოდენობა</label><input type="text" value="' +
                convertToInt(size.quantity) + '" required name="sizes[' + index +
                '][quantity]" placeholder="რაოდენობა" class="form-control"></div><div class="col-md-1 delete-button"><label>წაშლა</label><button type="button" data-id="' +
                size.id +
                '" class="sizes-delete btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button></div></div></div></div><br>';
            return html;
        }

        $('#select-per-page').change(function() {
            location.href = location.href.indexOf('?') == -1 ? location.href + '?per_page=' + this.value : location
                .href + '&per_page=' + this.value
        });

        function getParams(url) {
            var queryString = url.substring(url.indexOf('?') + 1);
            var paramsArr = queryString.split('&');
            var params = [];

            for (var i = 0, len = paramsArr.length; i < len; i++) {
                var keyValuePair = paramsArr[i].split('=');
                params.push({
                    name: keyValuePair[0],
                    value: keyValuePair[1]
                });
            }

            return params;
        }
    </script>

@endsection

@section('css')
    <style type="text/css">
        .post {
            height: 100px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            vertical-align: middle;
        }

        .table>thead .iCheck-helper {
            background: #101010 !important;
        }

        #categories {
            width: 50%;
        }

        .cursor-move {
            cursor: move;
        }

        .pagin {
            display: flex;
            justify-content: flex-start;
        }

        .pagin nav {
            width: 35%
        }

        .pagin .form-control {
            width: 16%
        }

        .pagin nav .pagination {
            margin: 0;
            margin-bottom: 10px;
        }
        .display-none {
            display: none;
        }
    </style>
@endsection