@php
    $styleHeader  = 'background-color: #6329A1; width: 100%; height: 39px; display: flex; align-items: center; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;';
    $styleModal   = 'height: 700px !important;';
    $styleContent = ' height: 120vh !important;';
    $styleFooter  = 'text-align: center';
@endphp

@component('templates.modal-build',['modalId' => 'add_campaign', 'styleModal' => $styleModal, 'styleDivHeader' => $styleHeader, 'styleContent' => $styleContent,
           'styleFooter' => $styleFooter,'styleHeader' => ' color: #fff; margin-left: 2.1rem;', 'title' => 'Agregar Campaña'])
    @slot('body')
        <form action="{{ route('api.campaign.save') }}"  method="post" id="campaign-form" style="max-height: 50% !important; overflow-y: scroll !important;">
            <input type="hidden" id="uuidKey" name="uuidKey">
            <div class="row" >
                <div class="col s12">
                    <div class="input-field col s12 m6">
                        <input id="slug" type="text" name="slug" placeholder="#Hashtag" class="validate" value="{{ $campaign->slug ?? '' }}" />
                        <label for="slug">#Hashtag <span style="color:red">*</span></label>
                        @if ($errors->has('slug'))
                            <small class="form-text text-danger">{{ $errors->first('slug') }}</small>
                        @endif
                    </div>
                    <div class="input-field col s12 m6">
                        <input id="name" name="name" type="text" placeholder="Nombre" class="validate" value="{{ $campaign->name ?? '' }}" />
                        <label for="name">Nombre <span style="color:red">*</span></label>
                        @if ($errors->has('name'))
                            <small class="form-text text-danger">{{ $errors->first('name') }}</small>
                        @endif
                    </div>
                </div>

                <div class="col s12">
                    <div class="input-field col s12 m12">
                        <textarea id="summary" placeholder="Resumen" class="materialize-textarea" name="summary">{{ $campaign->summary ?? '' }}</textarea>
                        <label for="summary">Resumen <span style="color:red">*</span></label>
                        @if ($errors->has('summary'))
                            <small class="form-text text-danger">{{ $errors->first('summary') }}</small>
                        @endif
                    </div>
                </div>

                <div class="col s12">
                    <div class="input-field col s12 m6">
                        <input id="openDate" type="date" name="openDate" value="{{ $campaign->openDate ?? '' }}" />
                        <label for="openDate">Inicio <span style="color:red">*</span></label>
                        @if ($errors->has('openDate'))
                            <small class="form-text text-danger">{{ $errors->first('openDate') }}</small>
                        @endif

                    </div>

                    <div class="input-field col s12 m6">
                        <input id="closeDate" type="date" name="closeDate" value="{{ $campaign->closeDate ?? ''}}" />
                        <label for="closeDate">Fin <span style="color:red">*</span></label>

                        @if ($errors->has('closeDate'))
                            <small class="form-text text-danger">{{ $errors->first('closeDate') }}</small>
                        @endif
                        
                    </div>

                </div>

                <div class="col s12">
                    <div class="input-field col s12 m6">
                        <div class="mb-2">
                            <label for="color">Color de texto <span style="color:red">*</span></label>
                        </div>
                        <input id="color" type="color" value="{{ $campaign->color ?? '#000000'}}" name="color" />
                        @if ($errors->has('color'))
                            <small class="form-text text-danger">{{ $errors->first('color') }}</small>
                        @endif
                    </div>
                    {{-- ColorBackground --}}
                    <div class="input-field col s12 m6">
                        <div class="mb-2">
                            <label for="colorBackground">Color de fondo <span style="color:red">*</span></label>
                        </div>
                        <input id="colorBackground" type="color" value="{{ $campaign->colorBackground ?? '#000000' }}" name="colorBackground" />
                        @if ($errors->has('colorBackground'))
                            <small class="form-text text-danger">{{ $errors->first('colorBackground') }}</small>
                        @endif
                    </div>
                </div>
                <div class="col s12">
                    <label for="info" style="margin-left:10px !important;">Información <span style="color:red">*</span></label>
                    <div class="input-field col s12 m12">
                        <textarea class="ckeditor" name="info" id="info" rows="10" cols="80">
                            {{ $campaign->info ?? '' }}
                        </textarea>
                        @if ($errors->has('info'))
                            <small class="form-text text-danger">{{ $errors->first('info') }}</small>
                        @endif
                    </div>
                </div>
                <div class="col s12">
                    <div class="input-field col s12 m6">
                        <input id="email" type="email" name="email" placeholder="Correo" class="validate" value="{{ $campaign->mail ?? '' }}" />
                        <label for="email">Correo </label>
                        @if ($errors->has('email'))
                            <small class="form-text text-danger">{{ $errors->first('email') }}</small>
                        @endif
                    </div>
                    <div class="input-field col s12 m6">
                            <input id="phone" type="text" name="phone" placeholder="Celular" value="{{ $campaign->phone ?? '' }}" class="validate" />
                        <label class="active" for="phone">Celular </label>
                    </div>
                    
                </div>
                <div class="col s12">
                    <div class="input-field col s12 m6">
                            <div class="switch center">
                                <label>
                                    Cerrar
                                    <input type="checkbox" name="enableAccess" id="enableAccess" checked @isset($campaign) @if ($campaign->enableAccess == 0) unchecked @endif @endisset>
                                    <span class="lever"></span>
                                    Abrir
                                </label>
                            </div>
                    </div>
                    <div class="input-field col s12 m6">
                            <div class="switch center">
                                <label>
                                    Inactivo
                                    <input type="checkbox" name="state" id="state" checked  @isset($campaign) @if ($campaign->state == 0) unchecked @endif @endisset>
                                    <span class="lever"></span>
                                    Activo
                                </label>
                            </div>
                    </div>
                </div>
            </div>
            <div class="row" style="text-align: center; margin-top: 2px; margin-bottom: 15px;">
                <button type="button" class="modal-action modal-close waves-red btn waves-effect waves-light mr-4" id="closeButtonCampaign">Cancelar</button>
                <button type="button" class="waves-effect btn indigo waves-light editButton" id="saveButtonCampaign">Guardar</button>
            </div>
        </form>
    @endslot

    @slot('footer')
        
    @endslot
@endcomponent