@extends('layouts.admin.app')
@section('page-title')
    {{ __('Sliders') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1>{{ __('Sliders') }}</h1>
            <p>{{ __('All Sliders') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Sliders') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    @include('includes.dialog')

    <div class="row">
        <div class="col-md-12">
            <div class="buttons-group">
                <a href="{{ route('admin.sliders.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> {{ __('Create Slider') }}</a>
            </div>
            <div class="tile">
                <div class="tile-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered text-center" id="sampleTable">
                            <thead>
                                <tr class="text-center">
                                    <th width="5%">{{ __('ID') }}</th>
                                    <th width="35%">{{ __('Image') }}</th>
                                    <th width="15%">{{ __('Status') }}</th>
                                    <th width="25%">{{ __('Control') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($sliders as $key => $slider)
                                    <tr class="text-center">
                                        <td>{{ ++$key }}</td>
                                        <td>
                                            @if ($slider->getFirstMediaFile('slider_photo'))
                                                <img src="{{ $slider->getFirstMediaFile('slider_photo')->url }}" alt="slider photo" width="50px" height="50px">
                                            @endif
                                        </td>
                                        <td>
                                            <select class="form-control" id="status{{ $slider->id }}" onchange="changeStatus({{ $slider->id }})">
                                                <option value="1" {{ $slider->status == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                                <option value="0" {{ $slider->status == '0' ? 'selected' : '' }}>{{ __('Non-Active') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            {{--                                        <a href="{{route("admin.sliders.edit", $slider->id)}}" class="control-link edit"><i class="fas fa-edit"></i></a> --}}
                                            <form action="{{ route('admin.sliders.destroy', $slider->id) }}" method="post" id="delete{{ $slider->id }}" style="display: none" data-swal-title="{{ __('Delete Slider') }}" data-swal-text="{{ __('Are You Sure To Delete This Slider?') }}" data-yes="{{ __('Yes') }}" data-no="{{ __('No') }}" data-success-msg="{{ __('the slider has been deleted succssfully') }}">@csrf @method('delete')</form>
                                            <span href="#" class="control-link remove form-confirm" data-form-id="#delete{{ $slider->id }}"><i class="far fa-trash-alt"></i></span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
@section('scripts')
    <!-- Data table plugin-->
    <script type="text/javascript" src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">
        $('#sampleTable').DataTable();
    </script>

    <script type="text/javascript">
        function changeStatus(id) {
            var status = $('#status' + id).val();

            Swal.fire({
                title: "{{ __('Are you sure?') }}",
                text: "{{ __('You wont be able to revert this!') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "{{ __('Yes, edit it!') }}",
                cancelButtonText: "{{ __('No, cancel!') }}",
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "post",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('ajax.slider.index') }}",
                        data: {
                            id: id,
                            status: status
                        },
                        success: function(response) {
                            window.location.reload();
                        }
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    if (status == 1) {
                        $('#status' + id).val(0);
                    } else {
                        $('#status' + id).val(1);
                    }
                    Swal.fire("{{ __('Cancelled') }}", "", 'info');
                }
            });
        }
    </script>
@endsection