@extends('admin/layouts/dashboard', [
    'withoutContent' => true
])

@section('breadcrumbs', Breadcrumbs::render(Route::current()->getName(), $body))

@section('page_header')
    Управление ценами автомобиля: <b>{{ $body->model->mark->name }} {{ $body->model->name }} {{ $body->name }}</b>
@endsection

@section('content')
    @if( $body->modification->isEmpty() OR $body->complectation->isEmpty() )
        <div class="content">
            <div class="card" style="margin-bottom: 0px;">
                <div class="card-body">
                    <div class="alert alert-info">
                        Нет данных
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="content">
            <div class="card" style="margin-bottom: 0px;">
                <div class="card-header header-elements-inline">
                    <h3>{{ $body->model->mark->name }} {{ $body->model->name }} {{ $body->name }}</h3>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <div>
                                    <input type="radio" value="new" name="price-recalc" checked> Цене
                                </div>
                                <div>
                                    <input type="radio" value="old" name="price-recalc"> Старой цене
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control js-recalc-value" placeholder="Разница между ценами">
                                    </div>
                                    <div class="col-md-6">
                                        <button class="btn btn-default btn-sm js-price-recalc">Пересчитать</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
                    <div class="datatable-scroll">
                        <table class="table table-hover">
                            <thead>
                            <tr role="row">
                                <th></th>
                                @foreach($body->modification as $modificationItem)
                                    <th>
                                        {{ $modificationItem->name }}
                                    </th>
                                @endforeach
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($body->complectation as $complectationItem)
                                <tr>
                                    <td>{{ $complectationItem->name }}</td>

                                    @foreach($body->modification as $modificationItem)
                                        @if( ($price = \JustWeCMS\Modules\Auto\Entities\Price::findInArray($prices, $modificationItem->id, $complectationItem->id, $body->id)) )
                                            <td>
                                                <input type="hidden" name="id" value="{{ $price->id }}">
                                                <input type="hidden" name="modification_id" value="{{ $modificationItem->id }}">
                                                <input type="hidden" name="complectation_id" value="{{ $complectationItem->id }}">
                                                <input type="hidden" name="body_id" value="{{ $body->id }}">

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-switchery">
                                                            <label class="form-check-label">
                                                                <input
                                                                        type="checkbox"
                                                                        class="form-check-input-switchery js-price-set"
                                                                        data-fouc
                                                                        checked
                                                                >
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 text-right">
                                                        <button class="btn btn-success btn-sm js-price-save">
                                                            <i class="icon-floppy-disk"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <input value="{{ $price->price }}" type="number" name="price" class="form-control" placeholder="Цена">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input value="{{ $price->price_old }}" type="number" name="price_old" class="form-control" placeholder="Старая цена">
                                                    </div>
                                                </div>
                                            </td>
                                        @else
                                            <td>
                                                <input type="hidden" name="id" value="">
                                                <input type="hidden" name="modification_id" value="{{ $modificationItem->id }}">
                                                <input type="hidden" name="complectation_id" value="{{ $complectationItem->id }}">
                                                <input type="hidden" name="body_id" value="{{ $body->id }}">

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-switchery">
                                                            <label class="form-check-label">
                                                                <input
                                                                        type="checkbox"
                                                                        class="form-check-input-switchery js-price-set"
                                                                        data-fouc
                                                                >
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 text-right">
                                                        <button class="btn btn-success btn-sm js-price-save" disabled="disabled">
                                                            <i class="icon-floppy-disk"></i>
                                                        </button>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <input type="number" name="price" class="form-control" placeholder="Цена" disabled="disabled">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="number" name="price_old" class="form-control" placeholder="Старая цена" disabled="disabled">
                                                    </div>
                                                </div>
                                            </td>
                                        @endif
                                    @endforeach
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 text-left">
                            <button class="btn btn-success js-save-all-price">
                                Сохранить все цены
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <style>
        .price-changed {
            background-color: #ffebce;
        }
    </style>
@endsection

@section('script')
    <script src="/admin/js/uniform.min.js"></script>
    <script src="/admin/js/form_checkboxes_radios.js"></script>

    <script>
        (function() {
            $('.js-save-all-price').click(function(event) {
                event.preventDefault();

                let data = [];

                $('table td').each(function() {
                    let price = $(this).find('input[name="price"]').val();

                    if(price !== undefined && price !== '') {
                        let id = $(this).find('input[name="id"]').val();
                        let price_old = $(this).find('input[name="price_old"]').val();

                        $(this).removeClass('price-changed');

                        data.push({
                            id: id,
                            price: price,
                            price_old: price_old
                        });
                    }
                });

                $.ajax({
                    url: '{{ route('admin.price.updateAll') }}',
                    method: 'POST',
                    data: {
                        data: data
                    },

                    success: function() {
                        window.FlashMessage.success('Все цены были успешно сохранены');
                    },

                    error: function(data) {
                        if( data.hasOwnProperty('responseJSON') ) {
                            window.FlashMessage.error(data.responseJSON.message);
                        }
                    }
                })
            });

            $('.js-price-recalc').click(function(event) {
                event.preventDefault();

                let value = $('.js-recalc-value').val();
                let price = $('input[name="price-recalc"]:checked').val();

                if(value !== '' && price !== '') {
                    $('.table td').each(function() {
                        let priceInput =  $(this).find('input[name="price"]:enabled');
                        let priceOldInput =  $(this).find('input[name="price_old"]:enabled');

                        if(priceInput.length && priceOldInput.length) {
                            if(price === 'new') {
                                let tmp = parseInt(priceOldInput.val()) + parseInt(value);
                                if(tmp >= 0) {
                                    priceInput.val(tmp);
                                    $(this).addClass('price-changed');
                                }
                            }

                            if(price === 'old') {
                                let tmp = parseInt(priceInput.val()) + parseInt(value);
                                if(tmp >= 0) {
                                    priceOldInput.val(tmp);
                                    $(this).addClass('price-changed');
                                }
                            }
                        }
                    });
                }
            });

            $('.js-price-set').click(function() {
                let td = $(this).parents('td');

                if( $(this).is(':checked') ) {
                    td.find('input, button').attr( 'disabled', false );

                    td.find('input[type="number"]').val(0);

                    $.ajax({
                        url: '{{ route('admin.price.store') }}',
                        method: 'POST',

                        data: collectData(td),

                        success: function(data) {
                            td.find('input[name="id"]').val(data.id);
                        }
                    });
                } else {
                    td.find('input[type="number"], button').attr( 'disabled', true ).val('');

                    $.ajax({
                        url: '{{ route('admin.price.destroy') }}',
                        method: 'POST',

                        data: {
                            id: td.find('input[name="id"]').val()
                        }
                    });
                }
            });

            $('.js-price-save').click(function(event) {
                event.preventDefault();

                let td = $(this).parents('td');

                let id = $(td).find('input[name="id"]').val();
                let price = $(td).find('input[name="price"]').val();
                let price_old = $(td).find('input[name="price_old"]').val();

                let self = this;

                $.ajax({
                    url: '{{ route('admin.price.update') }}',
                    method: 'POST',
                    data: {
                        id: id,
                        price: price,
                        price_old: price_old
                    },
                    success: function() {
                        window.FlashMessage.success('Цена на автомобиль была успешно сохранена');

                        $(self).parents('td').removeClass('price-changed');
                    },
                    error: function(data) {
                        if( data.hasOwnProperty('responseJSON') ) {
                            window.FlashMessage.error(data.responseJSON.message);
                        }
                    }
                })
            });

            $('input[name="price"], input[name="price_old"]').keyup(function() {
                $(this).parents('td').addClass('price-changed');
            });

            function collectData(selector) {
                return {
                    id : $(selector).find('input[name="id"]').val(),
                    modification_id : $(selector).find('input[name="modification_id"]').val(),
                    complectation_id : $(selector).find('input[name="complectation_id"]').val(),
                    body_id : $(selector).find('input[name="body_id"]').val(),
                    price : $(selector).find('input[name="price"]').val(),
                    price_old : $(selector).find('input[name="price_old"]').val(),
                }
            }
        })();
    </script>
@endsection