@extends('layouts.admin.admin')

@section('script')
<!-- BEGIN PAGE LEVEL CUSTOM SCRIPTS -->
<script src="{{ url('assets/js/scrollspyNav.js') }}"></script>
<script>
    checkall('todoAll', 'todochkbox');
    $('[data-toggle="tooltip"]').tooltip()
</script>
<!-- END PAGE LEVEL CUSTOM SCRIPTS -->
@endsection
@section('head')
<!-- BEGIN PAGE LEVEL CUSTOM STYLES -->
<link href="{{ url('assets/css/scrollspyNav.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="{{ url('assets/css/forms/theme-checkbox-radio.css') }}">
<link href="{{ url('assets/css/tables/table-basic.css') }}" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL CUSTOM STYLES -->
@endsection
@section('content')
<div class="container-fluid">
    <hr />
    <div class="row layout-top-spacing">
        <div id="tableHover" class="col-lg-12 col-12 layout-spacing">
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-8 col-sm-8 col-lg-8">
                            <div class=" p-3 ">
                                <div class="d-flex justify-content-center">
                                    <h5>All Album's</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-1 col-sm-1 col-lg-1">
                            <!-- <div class="card p-3">
                                <button type="button" id="delete_action" class="btn btn-sm btn-outline-danger"
                                    onclick="deleteVg();" disabled><i class="fa fa-trash"
                                        aria-hidden="true"></i></button>
                            </div> -->

                        </div>
                        <div class="col-3 col-sm-3 col-lg-3">
                            <div class=" p-3">
                                <a href="/album-create" class="btn btn-primary" style="float: right;"><b><i
                                            class="fa fa-plus fa-lg fa-fw"></i>Create New Album</b></a>
                            </div>

                        </div>
                    </div>
                    <hr />
                    <div class="row row-cards">
                        @forelse($albums as $album)
                        <div class="col">
                            <div class="card component-card_3 p-3">
                                <div class="card-body">
                                    <img alt="{{$album->name}}" src="{{$album->cover_image}}" class="rounded border"
                                        width="250" height="200">
                                    <div class="d-flex align-items-center px-2">
                                        <div class="mt-2 mb-2">
                                            <h6 class="card-user_name">{{$album->name}}</h6>
                                            <span>{{$album->description}}</span>
                                            <b class="card-user_occupation d-block text-muted">{{count($album->Photos)}} image(s).</b>
                                            <small class="card-user_occupation d-block text-muted">{{ date("d F
                                                Y",strtotime($album->created_at))
                                                }} at
                                                {{date("h:i:s A",strtotime($album->created_at)) }}</small>
                                        </div>
                                    </div>
                                    <div class="row row-cards">
                                        <div class="col-sm-6 col-lg-6">
                                            <button type="button" id="delete_action" style="font-size: 20px;" style=""
                                                class="btn btn-lg btn-outline-danger mb-2 p-0"
                                                onclick="delete_album('{{$album->id}}');"><i class="fa fa-trash"
                                                    aria-hidden="true"></i></button>
                                        </div>
                                        <div class="col-sm-6 col-lg-6">
                                            <a href="{{route('show_album', ['id'=>$album->id])}}"
                                                style="font-size: 20px;"
                                                class="btn btn-lg btn-outline-primary mb-2 p-0"><i
                                                    class="fa fa-edit"></i></a>

                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        @empty
                        <div class="col-lg-12 col-sm-12 col-md-12" style="text-align: center">
                            <div style="">
                                <span>This section is Empty</span>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    function resetVideoModalData() {

        $("#image_preview").empty();
        $("#file_name").empty();
        //    $("#progress_div").hide();
        $('.operation').show();
        $('.done').hide();
    }

    // ----------- DELETE ALBUM FUNCTION -------

    function delete_album(album_id) {
        if (confirm("Are you sure you want to delete?")) {

            var data = new FormData();
            data.append("_token", $("#_token").val());
            data.append("album_id", album_id);

            $.ajax({
                type: "POST",
                url: "/delete_album",
                data: data,
                processData: false,
                contentType: false,
                cache: false,

                success: function (response) {
                    console.log(response)
                    var data = JSON.parse(response);
                    if (data != "") {

                        if (data.status == "success") {
                            success_del_popup();
                        } else if (data.status = "unsuccess") {
                            alert("Not Deleted!");

                            toastr.error(" ", "Please Contact your Admin", {
                                "positionClass": "toast-bottom-center animated tada", "closeButton": true,
                                "debug": true, "preventDuplicates": true
                            });

                        }
                    } else {

                    }
                }
            });
        }
    }
    // ----------- DELETE ALBUM FUNCTION END-------
</script>

@endsection