@extends('themes.cp.'.setting('active_cp_theme').'.layouts.default')
@section('content')
    <style>
        :root {

            /* ------------------ */
            /* approve-reject-btn */
            /* ------------------ */

            --approve-reject-btn-dark-purple: #390746; /* 1e0234 */
            --approve-reject-btn-dark-green: #00aa00;
            --approve-reject-btn-light-green: #00ff00;
            --approve-reject-btn-dark-red: #cc0000;
            --approve-reject-btn-light-red: #ff0000;
        }

        .btn-container{
            padding: 5px;
        }

        .btn-approved{
            padding: 7px;
            color:  var(--approve-reject-btn-dark-green);
            background: var(--approve-reject-btn-dark-purple);
            border-radius: 10px;
            width: 150px;
            height: 40px;
        }
        .btn-approved:visited{
            color: var(--approve-reject-btn-dark-green);
        }
        .btn-approved:focus{
            color: var(--approve-reject-btn-dark-green);
        }
        .btn-approved:hover{
            color: var(--approve-reject-btn-light-green);
        }

        .btn-rejected{
            padding: 7px;
            color: var(--approve-reject-btn-dark-red);
            background: var(--approve-reject-btn-dark-purple);
            border-radius: 10px;
            width: 150px;
            height: 40px;
        }
        .btn-rejected:visited{
            color: var(--approve-reject-btn-dark-red);
        }
        .btn-rejected:focus{
            color: var(--approve-reject-btn-dark-red);
        }
        .btn-rejected:hover{
            color: var(--approve-reject-btn-light-red);
        }
    </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">
                        <a href="{{ route('takenplace::cp.event.events') }}">
                            Personalise Slideshow
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ucwords($album->guest_name)}}
                        Photo Album
                    </li>
                </ol>
            </nav>
        </div>
        <div style="width: 100%; margin-top: 10px">
            @if($album->approved)
                {{-- current status: album is approved --}}
                {{-- click to reject --}}
                <a href="{{ route('takenplace::cp.event.albums.reject', $album->storage_name) }}" class="btn btn-approved">
                    <span> Album Is Approved </span>
                </a>
            @else
                {{-- current status: album is rejected --}}
                {{-- click to approve --}}
                <a href="{{ route('takenplace::cp.event.albums.approve', $album->storage_name) }}" class="btn btn-rejected">
                    <span> Album Is Rejected </span>
                </a>
            @endif
        </div>
        <div class="col-md-12 mt-4">
            <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>
                                <img src="{{ url($photo[0]) }}" alt="Album 1" class="img-responsive" />
                            </div>
                        </a>
                        <div class="btn-container">
                            @if (!$album->isInPhotos($photo[0]))
                                <a href="javascript:void(0);" class="btn btn-success btn-xs add w-100 btn-tp-main" data-image-path="{{ $photo[0] }}"><i class="fa fa-plus"></i> Add To Album</a>
                            @else
                                <a href="javascript:void(0);" class="btn btn-danger btn-xs del w-100 lpurplebtn btn-tp-main" data-image-path="{{ $photo[0] }}"><i class="fa fa-trash-alt"></i> Remove From Album </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    @push('custom-js')
        <link href="{{asset('assets/core/plugins/lity/dist/lity.min.css')}}" rel="stylesheet" />
        <script src="{{asset('assets/core/plugins/lightbox/lightbox.min.js')}}"></script>
        <script>
            $(document).ready(function() {

                $('.add').on('click', function (e) {
                    e.preventDefault();
                    let el = this;
                    $.post("{{ route('takenplace::cp.event.albums.showPhotoInSlideshow', $album->storage_name) }}", {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').on('click', function (e) {
                    e.preventDefault();
                    let el = this;
                    $.post("{{ route('takenplace::cp.event.albums.hidePhotoFromSlideshow', $album->storage_name) }}", {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>
    @endpush
@endsection