@extends('layout.admin')

@section('title', 'Patrocinadores')

<!-- ======================================================= -->

@section('content')

<!-- ======================================================= -->
<section id="admin-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Patrocinadores</h1>
        <h3>Gestión de patrocinadores para FICG.</h3>
    </div>

    <div id="objects">

        @if(count($objects) < 1)
            <p>No hay objetos.</p>
        @else

            <div class="heading left-align">
                <h2>Presentadores</h2>
            </div>

            <div>
                <form id="visibility_form_presenter" action="{{ route('section.update') }}" method="post" class="block-form">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="id" value="6">
                    <input type="hidden" name="is_visible" value="{{ $section_presenter->is_visible ? '1' : '0' }}">

                    <div class="inline field">
                        <div class="ui toggle checkbox field-block">
                            <input type="checkbox" tabindex="0" class="show-section hidden" {{ $section_presenter->is_visible ? 'checked' : '' }}>
                            <label>Mostrar en la página principal.</label>
                        </div>
                    </div>
                </form>

                <form id="bg_color_form_presenters" action="{{ route('section.update') }}" class="block-form" method="post">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="id" value="6">
                    <div class="inline field">
                        <div class="ui field-block color-control">
                            <label>Color de fondo: </label>
                            <input type="color" tabindex="0" class="show-section" name="color" value="{{ $section_presenter->color }}">
                            <input type="submit" value="Aplicar">
                        </div>
                    </div>
                </form>
            </div>

            @if(count($presenter) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($presenter as $probject)
                    <div class="object" mtrigger="modal-object-{{ $probject->id }}" style="background-color: {{ $section_presenter->color }}">
                        <div class="thumb" style="background-image: url('{{ asset($probject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Auspiciadores</h2>
            </div>
            @if(count($sponsors) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($sponsors as $sponsor)
                    <div class="object" mtrigger="modal-object-{{ $sponsor->id }}" style="background-color: {{ $section_presenter->color }}">
                        <div class="thumb" style="background-image: url('{{ asset($sponsor->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Sedes y salas de exhibición</h2>
            </div>
            @if(count($venue) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($venue as $vobject)
                    <div class="object" mtrigger="modal-object-{{ $vobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($vobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Patrocinadores Platinum</h2>
            </div>

            <div>
                <form id="visibility_form" action="{{ route('section.update') }}" method="post" class="block-form">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="id" value="4">
                    <input type="hidden" name="is_visible" value="{{ $section_platinum->is_visible ? '1' : '0' }}">

                    <div class="inline field">
                        <div class="ui toggle checkbox field-block">
                            <input type="checkbox" tabindex="0" class="show-section hidden" {{ $section_platinum->is_visible ? 'checked' : '' }}>
                            <label>Mostrar en la página principal.</label>
                        </div>
                    </div>
                </form>

                <form id="bg_color_form_platinum" action="{{ route('section.update') }}" class="block-form" method="post">
                    @csrf
                    @method('PUT')

                    <input type="hidden" name="id" value="4">
                    <div class="inline field">
                        <div class="ui field-block color-control">
                            <label>Color de fondo: </label>
                            <input type="color" tabindex="0" class="show-section" name="color" value="{{ $section_platinum->color }}">
                            <input type="submit" value="Aplicar">
                        </div>
                    </div>
                </form>
            </div>

            @if(count($platinum) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($platinum as $pobject)
                    <div class="object" mtrigger="modal-object-{{ $pobject->id }}" style="background-color: {{ $section_platinum->color }}">
                        <div class="thumb" style="background-image: url('{{ asset($pobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Patrocinadores Gold</h2>
            </div>
            @if(count($gold) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($gold as $gobject)
                    <div class="object" mtrigger="modal-object-{{ $gobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($gobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Patrocinadores Plata</h2>
            </div>
            @if(count($silver) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($silver as $sobject)
                    <div class="object" mtrigger="modal-object-{{ $sobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($sobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Patrocinadores Bronce</h2>
            </div>
            @if(count($bronze) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($bronze as $bobject)
                    <div class="object" mtrigger="modal-object-{{ $bobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($bobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Apoyos Institucionales</h2>
            </div>
            @if(count($institutional) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($institutional as $iobject)
                    <div class="object" mtrigger="modal-object-{{ $iobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($iobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Colaboradores</h2>
            </div>
            @if(count($colab) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($colab as $cobject)
                    <div class="object" mtrigger="modal-object-{{ $cobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($cobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Hoteles Sede</h2>
            </div>
            @if(count($hotels) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($hotels as $hobject)
                    <div class="object" mtrigger="modal-object-{{ $hobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($hobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Restaurantes</h2>
            </div>
            @if(count($restaurants) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($restaurants as $robject)
                    <div class="object" mtrigger="modal-object-{{ $robject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($robject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Medios</h2>
            </div>
            @if(count($media) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($media as $mobject)
                    <div class="object" mtrigger="modal-object-{{ $mobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($mobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

            <div class="heading left-align">
                <h2>Un Festival Mexicano</h2>
            </div>
            @if(count($mexicano) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($mexicano as $mobject)
                    <div class="object" mtrigger="modal-object-{{ $mobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($mobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif
            
            <div class="heading left-align">
                <h2>Media Partner</h2>
            </div>
            @if(count($media_partner) < 1)
                <p class="empty">No hay objetos.</p>
            @else
                @foreach ($media_partner as $mobject)
                    <div class="object" mtrigger="modal-object-{{ $mobject->id }}">
                        <div class="thumb" style="background-image: url('{{ asset($mobject->image ) }}')"></div>
                    </div>
                @endforeach
            @endif

        @endif
    </div>

    <div id="new-modal-object" class="ui modal object">
        <div class="header">Agregar</div>
        <div class="scrolling content">
            <form class="row" action="{{ route('sponsor.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="block">

                    <div class="ui labeled input">
                        <div class="ui label">*Imagen (1024 x 480):</div>
                        <input name="image" type="file" placeholder="Portada" required>
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">URL:</div>
                        <input name="url" type="text" placeholder="URL">
                    </div>
                    <div class="ui labeled input">
                        <div class="ui label">Orden:</div>
                        <input name="order" type="number" value="1000" placeholder="Orden">
                    </div>
                    <div class="field">
                        <label>Categoría</label>
                        <select name="category" class="ui fluid dropdown">
                            <option value="1">Presentador</option>
                            <option value="13">Auspiciador</option>
                            <option value="2">Sede</option>
                            <option value="3">Platino</option>
                            <option value="4">Oro</option>
                            <option value="5">Plata</option>
                            <option value="6">Bronce</option>
                            <option value="7">Apoyos institucionales</option>
                            <option value="8">Colaboradores</option>
                            <option value="9">Hoteles Sedes</option>
                            <option value="10">Restaurantes</option>
                            <option value="11">Medios</option>
                            <option value="12">Un Festival Mexicano</option>
                            <option value="14">Media Partner</option>
                        </select>
                    </div>

                    <p style="color: #000; font-size: 12px;">Los tamaños son solo medidas recomendadas para una mejor visualización, no es obligatorio que la imagen subida sea del tamaño indicado.</p>

                    <div class="space-before center-align">
                        <button class="ui button primary" type="submit">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @foreach ($objects as $object)
	    <div id="modal-object-{{ $object->id }}" class="ui modal object">
	        <div class="header">Editar</div>
	        <div class="scrolling content">
	            <form class="row" action="{{ route('sponsor.update') }}" method="post" enctype="multipart/form-data">
	                @csrf
	                <div class="block">
                        <input type="hidden" name="id" value="{{ $object->id }}">
                        <input type="hidden" name="_method" value="PUT">

	                    <div class="ui labeled input">
                            <div class="ui label">*Imagen (1024 x 480):</div>
                            <input name="image" type="file" placeholder="Portada">
                        </div>
                        <div class="ui labeled input">
                            <div class="ui label">URL:</div>
                            <input name="url" type="text" value="{{ $object->url }}" placeholder="URL">
                        </div>
                        <div class="ui labeled input">
                            <div class="ui label">Orden:</div>
                            <input name="order" type="number" value="{{ $object->order }}" placeholder="Orden">
                        </div>
                        <div class="field">
                            <label>Categoría</label>
                            <select name="category" class="ui fluid dropdown">
                                <option value="1" {{ $object->category == 1 ? "selected":"" }}>Presentador</option>
                                <option value="2" {{ $object->category == 2 ? "selected":"" }}>Sede</option>
                                <option value="3" {{ $object->category == 3 ? "selected":"" }}>Platino</option>
                                <option value="4" {{ $object->category == 4 ? "selected":"" }}>Oro</option>
                                <option value="5" {{ $object->category == 5 ? "selected":"" }}>Plata</option>
                                <option value="6" {{ $object->category == 6 ? "selected":"" }}>Bronce</option>
                                <option value="7" {{ $object->category == 7 ? "selected":"" }}>Apoyos institucionales</option>
                                <option value="8" {{ $object->category == 8 ? "selected":"" }}>Colaboradores</option>
                                <option value="9" {{ $object->category == 9 ? "selected":"" }}>Hoteles Sedes</option>
                                <option value="10" {{ $object->category == 10 ? "selected":"" }}>Restaurantes</option>
                                <option value="11" {{ $object->category == 11 ? "selected":"" }}>Medios</option>
                                <option value="12" {{ $object->category == 12 ? "selected":"" }}>Un Festival Mexicano</option>
                            </select>
                        </div>

	                    <p style="color: #000; font-size: 12px;">Los tamaños son solo medidas recomendadas para una mejor visualización, no es obligatorio que la imagen subida sea del tamaño indicado.</p>

	                    <div class="space-before center-align">
	                        <button class="ui button primary" type="submit">Actualizar</button>
	                        <button class="ui button red erase" objectid="{{ $object->id }}">Borrar</button>
	                    </div>
	                </div>
	            </form>
	        </div>
	    </div>
    @endforeach

    <div id="erase-modal" class="ui mini modal">
        <div class="header">¿Borrar?</div>
        <div class="content">
            <p style="color: #000;">¿Confirmas el borrado permanente de este objeto?</p>
        </div>
        <div class="actions">
            <div class="ui negative button primary">
                No
            </div>
            <div class="ui positive button red">
                Yes
            </div>
        </div>
    </div>

    <form id="erase-form" method="post" action="{{ route('sponsor.destroy') }}">
        @csrf
        <input type="hidden" name="_method" value="DELETE">
        <input class="erase-field" type="hidden" name="id" value="">
    </form>
</section>

<a class="addobject floating-circle right bottom"><i class="fas fa-plus" style="top: 1px;"></i></a>

@endsection

<!-- ======================================================* -->

@push('scripts')
    <script>
        jQuery(function( $ ) {
            /// Init modals
            $('.ui.modal').modal();

            /// Init dropdowns
            $('.ui.dropdown').dropdown();

            /// Init checkbox
            $('.ui.checkbox').checkbox();

            /// Add new
            $('.addobject').on('click', function() {
                $('#new-modal-object').modal('show');
            });

            /// Listen the main checkbox (show platinum section in home)
            $('#visibility_form .show-section').on('change', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                var status = $(this).prop('checked');

                if( status ) $('#visibility_form input[name="is_visible"]').val('1');
                else $('#visibility_form input[name="is_visible"]').val('0');

                $('#visibility_form').submit();
            });

            /// Listen the main checkbox (show presenter section in home)
            $('#visibility_form_presenter .show-section').on('change', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                var status = $(this).prop('checked');

                if( status ) $('#visibility_form_presenter input[name="is_visible"]').val('1');
                else $('#visibility_form_presenter input[name="is_visible"]').val('0');

                $('#visibility_form_presenter').submit();
            });

            /// Listen the color picker form for platinum sponsors
            $('#bg_color_form_platinum').on('submit', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                return true;
            });

            /// Listen the color picker form for presenters sponsors
            $('#bg_color_form_presenters').on('submit', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                return true;
            });

            /// Manage click on objects
            $('#objects .object').on('click', function(){
                var modal = '#' + $(this).attr('mtrigger');
                $(modal).modal('show');
            });

            /// Erase object
            $('.erase').on('click', function(e) {
                e.preventDefault();
                var id = $(this).attr('objectid');

                $('#erase-form .erase-field').val(id);

                $('#erase-modal').modal({
                    onApprove: function() {
                        $('#erase-form').submit();
                    }
                }).modal('show');
                return false;
            });
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/home.min.css') }}">
    <style>
        #objects .object {
            background-color: #001a71;
            padding: 15px;
        }

        #objects .object:hover {
            background-color: #203a91;
        }

        #objects .object .thumb {
            background-size: contain;
            background-repeat: no-repeat;
            height: 90px;
            width: 100%;
        }

        .empty {
            padding-left: 10px;
        }
    </style>
@endpush