@extends(getTemplate('admin'))
@section('content')
    @push('custom-css')
        <link href="{{asset('assets/core/plugins/lity/dist/lity.min.css')}}" rel="stylesheet" />
        <script src="{{asset('assets/core/plugins/lightbox/lightbox.min.js')}}"></script>
    @endpush
    <div class="gadmin-pagesidebar-width-1">
        <div class="panel panel-default gadmin-pagesidebar-width-1-panel">
            <!-- begin panel-heading -->
            <div class="panel-heading gadmin-pagesidebar-width-1-heading">
                <h4 class="panel-title">{{__('takenplace::takenplace.event_management')}}</h4>
            </div>
            <!-- end panel-heading -->
            <div class="gadmin-pagesidebar-body">
                <div class="gadmin-pagesidebar-main">
                    <ul class="nav gadmin-pagesidebar-ul">
                        <li>
                            <form id="deleteForm" class="gadmin-pagesidebar-options-danger-button" action="{{url('admin/ajax/bulk_delete/Wedding')}}" method="POST">
                                <button type="submit" id="deleteChecked" name="bulkDelete" class="gadmin-pagesidebar-options-danger"  style="display:none"><i class="fa fa-trash"></i> {{__('admin.bulk_delete')}}</button>
                            </form>
                        </li>
                    </ul>
                    <ul class="nav gadmin-pagesidebar-ul gadmin-mhide">
                        <li><hr></li>
                        {{--  <li><a href="{{url('admin/takenplace/approvals')}}">{{__('takenplace::takenplace.approvals')}}</a></li>--}}
                        <li><a class="btn btn-md btn-success" style="margin:10px" href="{{url('admin/takenplace/create')}}">Create New Wedding</a></li>
                        <li><a href="{{url('admin/takenplace/weddings')}}" class="">{{__('takenplace::takenplace.couples_events')}}</a></li>
                        <li><a href="{{url('admin/takenplace/stats')}}" class="active">{{__('takenplace::takenplace.stats')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="gadmin-pagesidebar-width-2">
        <div class="panel panel-default" data-sortable-id="ui-widget-6">
            <!-- begin panel-heading -->
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                </div>
                <h4 class="panel-title">{{$title}}</h4>
            </div>
            <!-- end panel-heading -->
            <div id="info-alert" class="alert" style="display:none">
                <span class="close" onclick="$('#info-alert').fadeOut()">×</span>
                <div class="alert-container"></div>
            </div>
            <div class="panel-body">
                <form id="deleteForm" action="{{url('admin/ajax/bulk_delete/Wedding')}}" method="POST">
                    <style>
                        .btn-container{
                            padding: 5px;
                        }
                    </style>
                    <div class="container row mx-auto tp-album ">
                        <div class="col-md-12 mt-4">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item active" aria-current="page">{{ ucwords($wedding->name) }} Photo Album</li>
                                </ol>
                            </nav>
                        </div>
                        @foreach ($albums as $album)
                        <div class="col-md-12 mt-4">
                            <!-- begin page-header -->
                                        <div class="account-page-header">
                                            <h4 class="page-header">{{$album->guest_name}} Photo Album <!--small>View album photos</small--></h4>
                                        </div>
                            <!-- end page-header -->
                            <div class="row album-body tp-form">
                                @foreach ($album->photos as $photo)
                                    <div class="col-md-3">
                                        <a href="{{ url($photo[0]) }}" download class="tp-download"><i class="fas fa-download"></i></a>
                                        <a href="{{ url($photo[0]) }}"  data-lightbox="images">
                                            <div class="capt position-relative">
                                                <div class="bg-overlay"></div>
                                                <a href="{{ url($photo[0]) }}" class="roadtrip" data-lightbox="roadtrip">
                                                    <img src="{{ url($photo[0]) }}" alt="Album 1" style="max-width:250px" class="img-responsive roadtrip" />
                                                </a>
                                            </div>
                                        </a>
                                        <div class="btn-container">
                                            @if ($album->isInPhotos($photo[0]))
                                                <a href="javascript:void(0);" class="btn btn-danger btn-xs del-{{ $album->getKey() }} w-100 lpurplebtn" data-image-path="{{ $photo[0] }}"><i class="fa fa-trash-alt"></i> Remove From Slideshow </a>
                                            @else
                                                <a href="javascript:void(0);" class="btn btn-success btn-xs add-{{ $album->getKey() }} w-100 lpurplebtn" data-image-path="{{ $photo[0] }}"><i class="fa fa-plus"></i> Add To Slideshow </a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                            <script>
                                $(document).ready(function() {

                                    $('.add-{{ $album->getKey() }}').on('click', function (e) {
                                        e.preventDefault();
                                        let el = this;
                                        $.post("{{ route('takenplace::admin.takenplace.albums.showPhotoInSlideshow', $album) }}", {image_path: $(el).attr('data-image-path')})
                                            .done(function () {
                                                Swal.fire({
                                                    position: 'center',
                                                    type: 'success',
                                                    title: 'You Have successfully added a photo!',
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                }).then(function () {
                                                    location.reload();
                                                    $(el).closest('.col-md-2').remove();
                                                });
                                            })
                                            .fail(function () {
                                                Swal.fire({
                                                    position: 'center',
                                                    type: 'error',
                                                    title: 'Oops, something went wrong!',
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                });
                                            });
                                    });

                                    $('.del-{{ $album->getKey() }}').on('click', function (e) {
                                        e.preventDefault();
                                        let el = this;
                                        $.post("{{ route('takenplace::admin.takenplace.albums.hidePhotoFromSlideshow', $album) }}", {image_path: $(el).attr('data-image-path')})
                                            .done(function () {
                                                Swal.fire({
                                                    position: 'center',
                                                    type: 'success',
                                                    title: 'You Have successfully deleted photo!',
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                }).then(function () {
                                                    location.reload();
                                                    $(el).closest('.col-md-2').remove();
                                                });
                                            })
                                            .fail(function () {
                                                Swal.fire({
                                                    position: 'center',
                                                    type: 'error',
                                                    title: 'Oops, something went wrong!',
                                                    showConfirmButton: false,
                                                    timer: 1500
                                                });
                                            });
                                    });
                                });
                            </script>
                        @endforeach
                    </div>
                    @push('custom-js')

                    @endpush
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            beDataTable('#beDataTable')
        })
    </script>
@endsection