@extends('layouts.app')

@section('content')

    <div class="px-3">

        <form class="row" action="{{ route('order.store') }}" method="post">
            <div class="col-xxl-6">
                <h4>Общая информация об объекте</h4>

                @csrf

                @if(isset($order))
                    <input type="hidden" name="id" value="{{ $order->id }}">
                @endif

                @include('partials.select', ['name' => 'district_id', 'title' => 'Округ', 'options' => $districts, 'value' => $order?->district_id ?? old('district_id'), 'first_empty' => true, 'required' => true])

                @include('partials.select', ['name' => 'area_id', 'title' => 'Район', 'options' => $areas, 'value' => $order?->area_id ?? old('area_id'), 'required' => true, 'first_empty' => true])

                @include('partials.input', ['name' => 'object_address', 'title' => 'Адрес объекта', 'value' => $order->object_address ?? old('object_address'), 'required' => true])

                @include('partials.select', ['name' => 'object_type_id', 'title' => 'Тип объекта', 'options' => $objectTypes, 'value' => $order->object_type_id ?? old('object_type_id'), 'required' => true, 'first_empty' => true])

                @include('partials.input', ['name' => 'contract_date', 'title' => 'Дата договора', 'type' => 'date', 'value' => $order->contract_date ?? old('contract_date')])

                @include('partials.input', ['name' => 'contract_number', 'title' => 'Номер договора', 'value' => $order->contract_number ?? old('contract_number')])

                @include('partials.textarea', ['name' => 'comment', 'title' => 'Комментарий', 'value' => $order->comment ?? old('comment')])

                @include('partials.input', ['name' => 'installation_date', 'title' => 'Дата выхода на монтаж', 'type' => 'date', 'value' => $order->installation_date ?? old('installation_date')])

                @include('partials.select', ['name' => 'brigadier_id', 'title' => 'Бригадир', 'options' => $brigadiers, 'value' => $order->brigadier_id ?? old('brigadier_id')])

                @include('partials.select', ['name' => 'user_id', 'title' => 'Менеджер', 'options' => $users, 'value' => $order->user_id ?? old('user_id') ?? auth()->user()->id])

                @include('partials.input', ['name' => 'tg_group_name', 'title' => 'Название группы в ТГ', 'value' => $order->tg_group_name ?? old('tg_group_name')])

                @include('partials.input', ['name' => 'tg_group_link', 'title' => 'Ссылка на группу в ТГ', 'value' => $order->tg_group_link ?? old('tg_group_link')])

            </div>
            <div class="col-xxl-6">
                <h4>МАФ</h4>
                <div>
                    <input type="text" class="form-control mb-2" @disabled($order->order_status_id ?? 0 > 1) placeholder="Поиск номенклатуры" id="search_maf">
                    <select id="select_maf" class="form-select mb-3" multiple @disabled($order->order_status_id ?? 0 > 1)></select>
                </div>

                <div id="selected_maf">
                    @isset($order)
                        <div class="changes-message small text-warning visually-hidden">* необходимо сохранить изменения</div>
                    @endisset
                    @if(isset($order) && $order->products_sku)
                        @foreach($order->products_sku as $p)
                            <div class="maf d-flex justify-content-between mb-1">
                                <div>
                                    <input type="hidden" class="visually-hidden" name="products_sku[]" value="{{ $p->id }}">
                                    <input type="hidden" class="visually-hidden" name="products[]" value="{{ $p->product->id }}">
                                    <div class="p-1">{!! $p->product->common_name !!}</div>
                                </div>
                                <div class="col-1 d-flex justify-content-end">
                                    <div>
                                        <input class="form-control text-end form-control-sm quantity" type="number" name="quantity[]" value="1" @disabled($order->order_status_id > 1)>
                                    </div>
                                    <div class="p-1">
                                        @if($order->order_status_id == 1)
                                            <i onclick="$(this).parent().parent().parent().remove(); $('.changes-message').removeClass('visually-hidden');" class="bi bi-trash text-danger cursor-pointer"></i>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

            </div>
            <div class="col-12 text-end">
                @include('partials.submit')
            </div>
        </form>

    </div>

    @if($errors->any())
        @dump($errors->all())
    @endif

@endsection

@push('scripts')
    <script type="module">
        $('#select_maf').on('change', function () {
            $('#selected_maf').append(
                '<div class="maf  d-flex justify-content-between mb-1">' +
                '<div>' +
                '<input type="hidden" name="products[]" value="'+ $(this).val() +'">' +
                '<div class="p-1">'+ $('#select_maf option:selected').text() +'</div> ' +
                '</div>' +
                '<div class="col-1 d-flex justify-content-end">' +
                '<div>' +
                '<input class="form-control text-end form-control-sm quantity" type="number" name="quantity[]" value="1">' +
                '</div>' +
                '<div class="p-1">' +
                '<i onclick="$(this).parent().parent().parent().remove();" class="bi bi-trash text-danger cursor-pointer"></i>' +
                '</div>' +
                '</div>'
            );
            $('#select_maf').children().remove();
            $('#search_maf').val('');
            $('.changes-message').removeClass('visually-hidden');
        });

        $('#district_id').on('change', function () {
            // load areas of selected district
            console.log($(this).val());

            $.get('{{ route('area.ajax-get-areas-by-district') }}/' + $(this).val(),
                function (data) {
                    $('#area_id').children().remove();
                    $.each(data, function (id, name) {
                        $('#area_id').append('<option value=\'' + id + '\'>' + name + '</option>');
                    });
                }
            );
        });

    </script>

@endpush