@extends('layouts.admin')
@section('title', 'Youtube List')

@section('page-header')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h4 class="m-0">Youtube List</h4>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item active">Youtube List</li>
                    </ol>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-sm-12 text-right">
                    <a href="{{route('youtube.create')}}" class="btn btn-sm btn-success">Add New Youtube</a>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- main content --}}
@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Youtube List</h4>
                </div>
                <div class="card-body">
                    <table class="table table-sm text-sm" id="blog_list">
                        <thead class="bg-light">
                            <tr>
                                <th>SL</th>
                                <th>Title</th>
                                <th>Slug</th>
                                <th>Sub Title</th>
                                <th>Link</th>
                                <th>Platform</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($youtubes as $youtube)
                                <tr>
                                    <td>{{$loop->iteration}}</td>
                                    <td>{{$youtube->title}}</td>
                                    <td>{{$youtube->slug}}</td>
                                    <td>{{$youtube->sub_title}}</td>
                                    <td>{{$youtube->link}}</td>
                                    <td>{{ucfirst($youtube->platform)}}</td>
                                    <td>
                                        @if($youtube->is_active)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                        <span class="badge badge-danger">Deactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group dropstart">
                                            <button type="button" class="btn btn-success btn-xs dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                                Action <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <div class="dropdown-menu" role="menu">
                                                <a class="dropdown-item" href="{{route("youtube.edit", ['youtube' => $youtube->id])}}">Edit</a>
                                                <a
                                                  class="dropdown-item delete_btn" href="javascript:void(0)"
                                                  data-link="{{route("youtube.destroy", ["youtube" => $youtube->id])}}"
                                                >Delete</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No Data Found!</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- delete form --}}
    <form action="" id="delete_form" method="post">@csrf @method("DELETE")</form>
@endsection

{{-- extra css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endpush

{{-- extra js --}}
@push('js')
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#blog_list').dataTable({
            columnDefs: [{
                targets: -1,
                orderable: false,
                searchable: false
            }],
        });

        $(document).on('click', '.delete_btn', function(){
            let link = $(this).data('link');
            Swal.fire({
                title: 'Are you sure to delete?',
                text: "You won't be able to revert this!",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete It!'
            }).then((result) => {
                if(result.isConfirmed) {
                    $("#delete_form").attr('action', link);
                    $('#delete_form').submit();
                }else {
                    return;
                }
            });
        });
    });


</script>
@endpush