@extends('backend.layouts.master')

@section('title')
Quản lý Slider
@endsection

@section('styles')
@include('backend.pages.partials.style_index')
@endsection

@section('page-header')
<div class="row g-2 align-items-center">
    <div class="col">
        <h2 class="page-title">
            Tất cả Slider
        </h2>
    </div>
    <div class="col-auto ms-auto d-print-none">
        @if (Auth::guard('admin')->user()->can('slider.create'))
        <a href="{{ route('admin.slider.create') }}" class="btn btn-primary">
            <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 5l0 14"></path>
                <path d="M5 12l14 0"></path>
            </svg>
            Tạo mới Slider
        </a>
        @endif
    </div>
</div>
@endsection

@section('admin-content')
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    Danh sách Slider
                </h4>
            </div>
            <!--col-->
        </div>
        <!--row-->
        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive" style="overflow-y:visible;overflow-x:visible;">
                    @include('backend.layouts.partials.messages')
                    <table class="table" id="dataTable">
                        <thead>
                            <tr>
                                <th width="5%">No</th>
                                <th width="20%">Tên sản phẩm</th>
                                <th width="30%">Ảnh</th>
                                <th width="30%">Đường dẫn</th>
                                <th width="15%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($sliders as $slider)
                            <tr>
                                <td>{{ $loop->index+1 }}</td>
                                <td>{{ $slider->name }}</td>
                                <td><img src="/{{ $slider->image }}" style="width: 40%" alt=""></td>
                                <td>{{ $slider->slug }}</td>
                                <td>
                                    @if (Auth::guard('admin')->user()->can('admin.edit'))
                                    <a class="btn btn-success text-white btn-edit"
                                        href="{{ route('admin.slider.edit', $slider->id) }}">Sửa</a>
                                    @endif

                                    @if (Auth::guard('admin')->user()->can('admin.edit'))
                                    <form method="POST" action="{{ route('admin.slider.destroy', $slider->id) }}">
                                        @method('DELETE')
                                        @csrf
                                        <input name="_method" type="hidden" value="DELETE">
                                        <button type="submit" class="btn btn-danger btn-flat remove_row"
                                            data-toggle="tooltip" title="Delete">
                                            <i class="fa fa-trash"></i> Xóa
                                        </button>
                                    </form>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!--col-->
        </div>
        <!--row-->
    </div>
    <!--card-body-->
</div>
@endsection


@section('scripts')
@include('backend.pages.partials.script_index')
<script>
    /*================================
    datatable active
    ==================================*/
    if ($('#dataTable').length) {
        $('#dataTable').DataTable({
            responsive: false
        });
    }

    $('.remove_row').click(function(event) {
        event.preventDefault();

        Swal.fire({
            title: "Bạn có chắc muốn xóa dòng này không?",
            text: "Nếu như bạn xóa, dòng dữ liệu này sẽ không thể khôi phục.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Xóa"
        }).then((result) => {
            if (result.isConfirmed) {
                $(this).closest("form").submit();
            }
        });
    });
</script>
@endsection