@extends('layouts.app', [
    'class' => 'notifications create edit',
])

@section('content')
    @include('partials._page-title', [
        'title' => 'Gerenciar Notificações',
        'desc' => 'Preencha as informações necessárias',
    ])

    <div class="panel-body">

        <form method="POST" class='default-form' action="{{ url('notifications') }}" data-parsley-validate>
            @include('partials._alert')

            @csrf

            @if ($isEdit)
                <input type="hidden" name="id" value="{{ $notification->id }}">
                <input type="hidden" name="_method" value="put">
            @endif

            <div class='hide' data-json="weather-params">{!! json_encode($params->keyBy('id')) !!}</div>
            <div class='hide' data-json="operators">{!! json_encode($operators->keyBy('id')) !!}</div>
            
            @if(isset($notification->conditions))
                <div class='hide' data-json="conditions">{!! json_encode($notification->conditions) !!}</div>
                {{-- <div class='hide' data-json="conditions">{!! json_encode($notification->fields) !!}</div> --}}
            @endif

            <div class="row">

                <div class="form-group col-sm-6">
                    <label>Talhões</label>
                    <select class="form-select select2" name='field_id[]' multiple="multiple"
                        placeholder="Selecione os talhões">
                        <option value>Selecione</option>
                        @foreach ($fields as $f)
                            <option value="{{ $f->id }}"
                                {{ $notification->fields->pluck('field_id')->contains($f->id) || (old('field_id') && in_array($f->id, old('field_id'))) ? 'selected' : '' }}>
                                {{ $f->name }}</option>
                        @endforeach
                    </select>

                </div>

                <div class="form-group col-sm-6">
                    <label>Nome</label>
                    <input class="form-control" type="text" name="name" autofocus="autofocus"
                        value="{{ $notification->name ?? old('name') }}" placeholder="Nome da notificação"
                        required="required">
                </div>

            </div>

            <div class="row">
                <div class="form-group col-sm-12">
                    <label>Mensagem</label>

                    <textarea class="form-control" name="message" autofocus="autofocus" placeholder="Mensagem personalizada"
                        required="required">{{ $notification->message ?? old('message') }}</textarea>
                </div>
            </div>

            <div class="row">
                <div class="form-group col-sm-12">
                    <label>Condições</label>

                    <div class="conditions-block">

                        <div class="btn-open-rules">

                            <i class="far fa-plus-circle"></i>
                            Criar nova condição

                        </div>

                        <div class="condition-list">


                        </div>

                    </div>

                </div>
            </div>

            <div class="row">
                <div class="form-group col-sm-4 btn-group">
                    <a href="{{ route('notifications.index') }}" class="btn btn-light mt-3">Voltar</a>
                    <button type="submit" class="btn btn-primary mt-3">{{$notification->id ? 'Atualizar' : 'Cadastrar'}}</button>
                </div>
            </div>

        </form>

        <div class="dynamic-contents hide">

            <div class="row parameter-row">

                <div class="form-group col-sm-3">
                    <label>Parâmetro</label>
                    <select class="form-select" name='weather_param_id' placeholder="Selecione o parâmetro"
                        required="required">
                        @foreach ($params as $p)
                            <option value="{{ $p->id }}">{{ $p->name }}</option>
                        @endforeach
                    </select>

                </div>

                <div class="form-group col-sm-3">
                    <label>Operador</label>
                    <select class="form-select" name='operator_id' placeholder="Selecione o operador" required="required">
                        @foreach ($operators as $o)
                            <option value="{{ $o->id }}">{{ $o->name }}</option>
                        @endforeach
                    </select>

                </div>

                <div class="form-group col-sm-3">
                    <label>Valor para menor</label>
                    <input class="form-control" type="number" name="smaller_than" autofocus="autofocus" placeholder="Valor"
                        required="required">
                </div>

                <div class="form-group col-sm-3">
                    <label>Valor para maior</label>
                    <input class="form-control" type="number" name="bigger_than" autofocus="autofocus" placeholder="Valor"
                        required="required">
                </div>
                

                <button type="button" class="btn btn-light btn-icon btn-remove-rule">
                    <i class="far fa-trash"></i>
                </button>

            </div>

            <div class="condition">

                <input type="hidden" name='conditions[]' value=''>

                <div class="header">

                    <div class="title">
                        
                    </div>

                    <div class="actions">

                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name='is_active' checked>
                        </div>
                        
                        <button type="button" class="btn btn-light btn-icon btn-remove-condition">
                            <i class="far fa-trash"></i>
                        </button>


                    </div>

                </div>

                <div class="message quote small">
                    <i class="far fa-info-circle"></i> 
                    <span>
                    </span>
                </div>

            </div>

        </div>

    </div>
@endsection