@extends('layouts.app')

@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" rel="stylesheet" type="text/css">
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-receipt menu-icon"></i>
        </span> notificaciones </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/users')!!}"><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>editar notificación</span> <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">editar notificación</h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                @include('flash::message')
                <div>
                    {{-- Usamos Form::model para edición --}}
                    {!! Form::model($notificacion, ['route' => ['notificaciones.update', $notificacion->id], 'method' => 'PUT', 'enctype' => 'multipart/form-data']) !!}
                        <div class="form-group row">
                            <div class="col-sm-12">
                                {!! Form::label('titulo', 'Título de la notificación:') !!}
                                {!! Form::text('titulo', null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="col-sm-12 pt-2">
                                {!! Form::label('mensaje', 'Mensaje:') !!}
                                {!! Form::textarea('mensaje', null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="col-sm-12 pt-2">
                                {!! Form::label('imagen', 'Imagen promocional') !!}
                                <div class="input-group col-xs-12">
                                    <input type="file" name="imagen" class="file-upload-default">
                                    <input type="text" class="form-control file-upload-info" disabled placeholder="Sube tu imagen">
                                    <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-gradient-primary_local" type="button">Subir</button>
                                    </span>
                                </div>
                                @if($notificacion->imagen)
                                    <div class="mt-2">
                                        <img src="{{ asset('storage/'.$notificacion->imagen) }}" alt="Imagen actual" width="150">
                                    </div>
                                @endif
                            </div>

                            <div class="col-sm-12 pt-2">
                                <select multiple="multiple" class="w-100" id="seleccion_usuarios" name="usuarios_seleccionados[]">
                                    @foreach ($clientes as $user)
                                        <option value="{{ $user->id }}" 
                                            {{ in_array($user->id, $usuariosSeleccionados) ? 'selected' : '' }}>
                                            {{ $user->name.' '.$user->a_paterno.' '.$user->a_materno }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-sm-12 pt-2">
                                <a href='#' class="btn btn-primary_local" id='select-all'>Seleccionar todos</a>
                                <a href='#' class="btn btn-primary_local" id='deselect-all'>Deseleccionar todos</a>
                            </div>

                            <div class="form-group col-sm-12 pt-5">
                                {!! Form::submit('Actualizar', ['class' => 'btn btn-primary_local']) !!}
                                <a href="{!! url('/notificaciones') !!}" class="btn btn-secondary">Cancelar</a>
                            </div>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script>
    <script>
        $('#seleccion_usuarios').multiSelect({
            selectableHeader: "<div class='header-multiselect'>Usuarios disponibles</div>",
            selectionHeader: "<div class='header-multiselect'>Usuarios seleccionados</div>",
        });
        $("#ms-seleccion_usuarios").addClass('w-100');

        $('#select-all').click(function(){
            $('#seleccion_usuarios').multiSelect('select_all');
            return false;
        });
        $('#deselect-all').click(function(){
            $('#seleccion_usuarios').multiSelect('deselect_all');
            return false;
        });

        $('.file-upload-browse').on('click', function() {
            var file = $(this).parent().parent().parent().find('.file-upload-default');
            file.trigger('click');
        });
        $('.file-upload-default').on('change', function() {
            $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
        });
    </script>
@endsection