@extends('layouts.app-admin')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid pt-0" id="kt_content">
        <div class="d-flex flex-column-fluid">
            <div class="container">
                <div class="card shadow mb-4">
                    <div class="card-header p-2">
                        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                            <div class="col-6 d-flex align-items-center flex-wrap mr-2">
                                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                                    Palabras
                                </h5>
                            </div>
                            <div class="col-6 d-flex justify-content-end">
                                <a href="{{ route('admin.words.create') }}" class="btn btn-primary btn-rounded m-1">
                                    <i class="fas fa-plus fa-sm text-white-50"></i> {{ __('all.add_word') }}
                                </a>

                                <a href="{{ route('admin.words.import') }}" class="btn btn-primary btn-rounded m-1">
                                    <i class="fas fa-file-import fa-sm text-white-50"></i> {{ __('all.import_words') }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body card-body-table">
                        <div class="table-responsive">
                            <table class="table table-bordered table-custom" id="dataTableWords" width="100%" cellspacing="0">
                                <thead class="thead-custom">
                                    <tr class="tr-custom" align="center">
                                        <th class="th-custom th-table-index">Palabra</th>
                                        <th class="th-custom th-table-index">Tamaño</th>
                                        <th class="th-custom th-table-index">Tipo</th>
                                        <th class="th-custom th-table-index">Creada</th>
                                        <th class="th-custom th-table-index">Activa</th>
                                        <th class="th-custom th-table-index">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody-custom">
                                    @if($words->count())
                                        @foreach($words as $word)
                                            <tr class="tr-custom">
                                                <td class="td-custom text-center">
                                                    <a href="{{url('admin-words-edit')}}/{{$word->id}}" class="text-dark-75 font-weight-bolder text-hover-primary font-size-lg">
                                                        {{$word->item}}
                                                    </a>
                                                </td>
                                                <td class="td-custom text-center">
                                                    @if($word->weight)
                                                        {{$word->weight}}
                                                    @else
                                                        -----
                                                    @endif
                                                </td>
                                                <td class="td-custom text-center">
                                                    @if($word->pos)
                                                        {{$word->pos}}
                                                    @else
                                                        -----
                                                    @endif
                                                </td>
                                                <td class="td-custom text-center">
                                                    <span class="text-dark-75 font-weight-bolder d-block font-size-lg">
                                                        {{Carbon\Carbon::parse($word->created_at)->format('d/m/Y H:i')}}
                                                    </span>
                                                </td>
                                                <td class="td-custom" align="center">
                                                    @if($word->active === 1)
                                                        <span class="label label-lg font-weight-bold label-light-success label-inline">
                                                            Activada
                                                        </span>
                                                    @else
                                                        <span class="label label-lg font-weight-bold label-light-danger label-inline">
                                                            Desactivada
                                                        </span>
                                                    @endif
                                                </td>
                                                <td class="td-custom" style="text-align: center;">
                                                    <div class="d-flex justify-content-center">
                                                        <a href="{{url('admin-words-edit')}}/{{$word->id}}" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon mr-2" title="Editar">
                                                            <span class="svg-icon svg-icon-md svg-icon-primary">
                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                        <rect x="0" y="0" width="24" height="24"></rect>
                                                                        <path
                                                                            d="M12.2674799,18.2323597 L12.0084872,5.45852451 C12.0004303,5.06114792 12.1504154,4.6768183 12.4255037,4.38993949 L15.0030167,1.70195304 L17.5910752,4.40093695 C17.8599071,4.6812911 18.0095067,5.05499603 18.0083938,5.44341307 L17.9718262,18.2062508 C17.9694575,19.0329966 17.2985816,19.701953 16.4718324,19.701953 L13.7671717,19.701953 C12.9505952,19.701953 12.2840328,19.0487684 12.2674799,18.2323597 Z"
                                                                            fill="#000000" fill-rule="nonzero"
                                                                            transform="translate(14.701953, 10.701953) rotate(-135.000000) translate(-14.701953, -10.701953) ">
                                                                        </path>
                                                                        <path
                                                                            d="M12.9,2 C13.4522847,2 13.9,2.44771525 13.9,3 C13.9,3.55228475 13.4522847,4 12.9,4 L6,4 C4.8954305,4 4,4.8954305 4,6 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,13 C20,12.4477153 20.4477153,12 21,12 C21.5522847,12 22,12.4477153 22,13 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,6 C2,3.790861 3.790861,2 6,2 L12.9,2 Z"
                                                                            fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                                    </g>
                                                                </svg>
                                                            </span>
                                                        </a>
                                                        @if($word->active === 1)
                                                            <a href="{{url('admin-words-desactivate')}}/{{$word->id}}" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon mr-2" title="Desactivar">
                                                                <span class="svg-icon svg-icon-md svg-icon-primary">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                            <rect x="0" y="0" width="24" height="24"/>
                                                                            <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                                                            <path d="M12.0355339,10.6213203 L14.863961,7.79289322 C15.2544853,7.40236893 15.8876503,7.40236893 16.2781746,7.79289322 C16.6686989,8.18341751 16.6686989,8.81658249 16.2781746,9.20710678 L13.4497475,12.0355339 L16.2781746,14.863961 C16.6686989,15.2544853 16.6686989,15.8876503 16.2781746,16.2781746 C15.8876503,16.6686989 15.2544853,16.6686989 14.863961,16.2781746 L12.0355339,13.4497475 L9.20710678,16.2781746 C8.81658249,16.6686989 8.18341751,16.6686989 7.79289322,16.2781746 C7.40236893,15.8876503 7.40236893,15.2544853 7.79289322,14.863961 L10.6213203,12.0355339 L7.79289322,9.20710678 C7.40236893,8.81658249 7.40236893,8.18341751 7.79289322,7.79289322 C8.18341751,7.40236893 8.81658249,7.40236893 9.20710678,7.79289322 L12.0355339,10.6213203 Z" fill="#000000"/>
                                                                        </g>
                                                                    </svg>
                                                                </span>
                                                            </a>
                                                        @else
                                                            <a href="{{url('admin-words-activate')}}/{{$word->id}}" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon mr-2" title="Activar">
                                                                <span class="svg-icon svg-icon-md svg-icon-primary">
                                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                            <rect x="0" y="0" width="24" height="24"/>
                                                                            <circle fill="#000000" opacity="0.3" cx="12" cy="12" r="10"/>
                                                                            <path d="M16.7689447,7.81768175 C17.1457787,7.41393107 17.7785676,7.39211077 18.1823183,7.76894473 C18.5860689,8.1457787 18.6078892,8.77856757 18.2310553,9.18231825 L11.2310553,16.6823183 C10.8654446,17.0740439 10.2560456,17.107974 9.84920863,16.7592566 L6.34920863,13.7592566 C5.92988278,13.3998345 5.88132125,12.7685345 6.2407434,12.3492086 C6.60016555,11.9298828 7.23146553,11.8813212 7.65079137,12.2407434 L10.4229928,14.616916 L16.7689447,7.81768175 Z" fill="#000000" fill-rule="nonzero"/>
                                                                        </g>
                                                                    </svg>
                                                                </span>
                                                            </a>
                                                        @endif
                                                        <a href="javascript:;" class="btn btn-sm btn-default btn-text-primary btn-hover-primary btn-icon open-deleteWord" title="Eliminar" data-toggle="modal" data-target="#modalDeleteWord" data-word-id="{{$word->id}}" data-word-item="{{$word->item}}">
                                                            <span class="svg-icon svg-icon-md svg-icon-primary">
                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                                        <rect x="0" y="0" width="24" height="24"></rect>
                                                                        <path
                                                                            d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z"
                                                                            fill="#000000" fill-rule="nonzero"></path>
                                                                        <path
                                                                            d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z"
                                                                            fill="#000000" opacity="0.3"></path>
                                                                    </g>
                                                                </svg>
                                                            </span>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Delete -->
    <div class="modal fade" id="modalDeleteWord" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Eliminar Palabra</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    Esta seguro que desea eliminar la Palabra <b><span id="word_item"></span></b>?
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                    <form method="POST" action="{{route('admin-words-delete')}}">
                    @csrf
                    <input type="hidden" id="word_id" name="word_id">
                    <button class="btn btn-primary">Eliminar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- END | Modal Delete -->
@endsection