@extends('admin.layouts.app')

@push('css')
    <!-- Scripts -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- JS Color for Appearence (color_primary, color_secondary) -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/jscolor@2.4.5/jscolor.min.js"></script> --}}

@endpush

@section('content')

    @component('components.toast') @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Sliders</h4>
                <div class="page-title-right">
                    <a href="{{ route('sliders.create') }}" class="btn btn-primary">Nuevo Slider</a>
                </div>
            </div>
        </div>
    </div>


            <!-- @include('admin.message') -->

            <div class="card">
                <form action="" method="get">

                    <div class="card-header">

                        <div class="card-title">
                            <button type="button" onclick="window.location.href='{{ route("sliders.index")}}'" class="btn btn-default btn-sm">Restablecer</button>
                        </div>

                        <div class="card-tools">
                            <div class="input-group input-group" style="width: 250px;">
                                <input value="{{ Request::get('keyword') }}" type="text" name="keyword" class="form-control float-end" placeholder="Buscar">

                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-default">
                                    <i class="ri-search-line"></i>
                                    </button>
                                </div>
                                </div>
                        </div>
                    </div>

                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover text-nowrap">
                            <thead>
                                <tr>
                                    <th width="60">ID</th>
                                    <th width="80"></th>
                                    <th>Nombre</th>
                                    <th>Slug</th>
                                    <th width="100">Estado</th>
                                    <th width="100">Accion</th>
                                </tr>
                            </thead>

                            <tbody>

                                @if ($sliders->isNotEmpty())
                                    @foreach ($sliders as $slider)

                                    <tr>
                                        <td>{{ $slider->id }}</td>
                                        <td>
                                          @if ($slider->image != "")
                                            <img src="{{ asset('uploads/slider/thumb/'.$slider->image) }}" width="50" alt="" class="img-thumbnail">
                                          @else
                                            <img src="{{ asset('front-assets/images/no_image.jpg') }}" width="50" alt="" class="img-thumbnail">
                                          @endif
                                        </td>
                                        <td>{{ $slider->name }}</td>
                                        <td>{{ $slider->slug }}</td>

                                        <td>
                                            @if ($slider->status == 1)
                                                <svg class="text-success-500 h-6 w-6 text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                            @else
                                                <svg class="text-danger h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                            @endif
                                        </td>


                                        <td>
                                            <a href="{{ route('sliders.edit', $slider->id) }}">
                                                <svg class="filament-link-icon w-4 h-4 me-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                                                </svg>
                                            </a>

                                        <a href="#" onclick="deleteSlider( {{ $slider->id }} )" class="text-danger w-4 h-4 me-1">
                                                <svg wire:loading.remove.delay="" wire:target="" class="filament-link-icon w-4 h-4 me-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path   ath fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                                </svg>
                                            </a>
                                        </td>
                                    </tr>

                                    @endforeach

                                @else

                                    <tr>
                                        <td colspan="5">Registros No Encontrados</td>
                                    </tr>

                                @endif

                            </tbody>
                        </table>
                    </div>

                    <div class="card-footer clearfix">

                        {{ $sliders->links() }}

                        {{-- <ul class="pagination pagination m-0 float-end">
                            <li class="page-item"><a class="page-link" href="#">«</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">»</a></li>
                        </ul> --}}
                    </div>

                </form>
            </div>

        <!-- /.card -->
    
@endsection


@section('customJs')
<script>

    function deleteSlider(id){

        var url = '{{ route("sliders.delete", "ID") }}';
        var newUrl = url.replace("ID",id);

        if (confirm("¿Esta seguro que desea eliminar?")){

            $.ajax({
                url: newUrl,
                type: 'delete',
                data: {},
                dataType: 'json',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    if (response["status"] == true) {
                        window.location.href = "{{ route('sliders.index')}}";
                    } else {
                        window.location.href = "{{ route('sliders.index')}}";
                    }
                }
            });
        }
    }

</script>
@endsection