@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.select', ['name' => 'order_status_id', 'title' => 'Статус', 'options' => $orderStatuses, 'value' => $order->order_status_id ?? old('order_status_id'), 'required' => 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>

                @include('partials.input', ['name' => 'search_maf', 'title' => 'Поиск МАФ', 'value' => '',
                    'placeholder' => 'Артикул или номер номенклатуры', 'datalist' => []])
                @include('partials.select', ['name' => 'select_maf', 'title' => '', 'options' => [], 'multiple' => true])

                <div id="selected_maf"></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">

        let selectMaf = $('#select_maf');
        $('#search_maf').on('keyup', function () {
            // search products on backend
            $.get('{{ route('product.search') }}?s=' + $(this).val(),
                function (data) {
                    selectMaf.children().remove()
                    $.each(data, function (id, name) {
                        selectMaf.append('<option value=\'' + id + '\'>' + name + '</option>');
                    });
                }
            );
        });

        selectMaf.on('change', function () {
            $('#selected_maf').append('' +
                '<div class="maf">' +
                '<input type="hidden" name="products[]" value="'+ $(this).val() +'">' +
                '<span>'+ $('#select_maf option:selected').text() +'</span> ' +
                '<i onclick="$(this).parent().remove()" class="bi bi-trash text-danger cursor-pointer"></i>' +
                '</div>'

            );
            $('#select_maf').children().remove();
            $('#search_maf').val('');

        });

        $('#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