@extends('layouts.panel.app')

@push('link')
    <style>
        .bg {
            width: 170px;
            height: 100px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
@endpush

@section('content')
    <!-- Header -->
    @include('includes.panel.header')

    <!-- Page content -->
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
				<div class="card">
				<!-- Card header -->
					<div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-12 col-sm-6">
                                <h3 class="mb-0 mr-4">Slide principal</h3>
                            </div>
                            <div class="col-12 col-sm-6 text-center text-sm-right">
                                <button class="btn btn-success pt-2 pb-2" data-toggle="modal" data-target="#mdAdd"><i class="fas fa-plus mr-2"></i> Agregar</button>
                                {{-- @can(PermissionKey::SimposioGallery['permissions']['create']['name'])
                                @endcan --}}
                            </div>
                        </div>
					</div>
                    <!-- Light table -->
					<div class="table-responsive pb-3">
						<table class="table align-items-center table-flush" id="dataTable" data-order='[[ 1, "asc" ]]'>
							<thead class="thead-light">
								<tr>
									<th scope="col" class="sort" data-sort="portada">Portada</th>
									<th scope="col" class="no-sort text-center" width="200px">Acciones</th>
								</tr>
							</thead>
							<tbody class="list">
								@if ((isset($lista)) && (count($lista) > 0))
                                    @foreach ($lista as $num => $row)
                                        <tr>
                                            <td>
                                                <div class="bg" style="background-image: url({{asset($row -> portada)}});"></div>
                                            </td>
                                            <td class="text-center" width="200px">
                                                <button onclick="mdEdit({{$num}})" class="btn btn-info btn-sm"><i class="fas fa-edit mr-2"></i> Editar</button>
                                                {{-- @can(PermissionKey::SimposioGallery['permissions']['edit']['name'])
                                                @endcan --}}
                                                <form action="{{route('panel.slide.destroy', ["id" => $row -> id])}}" method="post" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i></button>
                                                </form>
                                                {{-- @can(PermissionKey::SimposioGallery['permissions']['destroy']['name'])
                                                @endcan --}}
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
							</tbody>
						</table>
					</div>
				</div>
			</div>
        </div>
    </div>

    {{-- Agregar --}}
    <div class="modal" tabindex="-1" role="dialog" id="mdAdd">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{route('panel.slide.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                        <h5 class="modal-title">Agregar nueva imagen</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <p>Haga clic en el cuadro para subir una o multiples imagenes desde el ordenador o si lo prefiere puede arrastrar y soltar en el cuadro de portada:</p>
                        <div class="row">
                            <div class="col-12 mb-4">
                                <label for="portada">Portada <span class="text-danger">*</span></label>
                                <input type="file" name="portada[]" class="dropify" data-height="250" data-allowed-file-extensions="png jpg jpeg" data-max-file-size="2M" multiple requied />
                                <small>
                                    Medidas recomendadas: 1600px x 900px, solo se aceptan jpg, jpeg y png<br> Peso máximo soportado 2Mb.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-default"><i class="fas fa-save mr-2"></i> Guardar</button>
                        {{-- @can(PermissionKey::SimposioGallery['permissions']['create']['name'])
                        @endcan --}}
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- @can(PermissionKey::SimposioGallery['permissions']['create']['name'])
    @endcan --}}

    {{-- Editar --}}
    <div class="modal" tabindex="-1" role="dialog" id="mdEdit">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="{{route('panel.slide.update')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Editar imagen</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body pt-0">
                        <input type="hidden" name="id" id="idx" required>
                        <p>Haga clic en el cuadro para subir la nueva imagen para reemplazar desde el ordenador o si lo prefiere puede arrastrar y soltar en el cuadro de portada:</p>
                        <div class="row">
                            <div class="col-12 mb-4">
                                <label for="portada">Portada <span class="text-danger">*</span></label>
                                <div class="inputE">
                                    {{-- <input type="file" name="portada" class="dropifyE" data-height="250" data-allowed-file-extensions="png jpg jpeg" data-max-file-size="2M" data-default-file="" requied /> --}}
                                </div>
                                <small>Medidas recomendadas: 1600px x 900px, solo se aceptan jpg, jpeg y png<br> Peso máximo soportado 2Mb.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-default"><i class="fas fa-save mr-2"></i> Guardar</button>
                        {{-- @can(PermissionKey::SimposioGallery['permissions']['update']['name'])
                        @endcan --}}
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- @can(PermissionKey::SimposioGallery['permissions']['edit']['name'])
    @endcan --}}
@endsection

@push('js')
    <script>
        const all = @json($lista);
        $('.dropify').dropify();

        function mdEdit(idx) {
            let index = all[idx];

            document.getElementById('idx').value = index['id'];

            let contenedor = document.querySelector('.inputE');
                if(contenedor.querySelector('.dropify-wrapper')){
                    contenedor.querySelector('.dropify-wrapper').remove();
                }

            let input = document.createElement('input');
                input.classList.add('dropifyE');
                input.type = 'file';
                input.name = 'portada';
                input.setAttribute('data-height', '250');
                input.setAttribute('data-allowed-file-extensions', 'png jpg jpeg');
                input.setAttribute('data-max-file-size', '2M');
                input.setAttribute('required', 'required');
                input.setAttribute('data-default-file', PATH + index['portada']);

            contenedor.appendChild(input);

            $('.dropifyE').dropify();
            $('#mdEdit').modal('show');
        }
    </script>
@endpush