@extends('back.layout.page-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Albums')
@section('content')

<div class="page-header">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="title">
                <h4>Album</h4>
            </div>
            <nav aria-label="breadcrumb" role="navigation">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Album List
                    </li>
                </ol>
            </nav>
        </div>
        <div class="col-md-6 col-sm-12 text-right">
            <a href="{{ route('admin.add_album') }}" class="btn btn-primary">
                <i class="icon-copy bi bi-plus-circle"> </i> Add Album
            </a>

        </div>
    </div>

</div>

@livewire('admin.albums')
@endsection
@push('scripts')
<script>
    window.addEventListener('deleteAlbum', function(event){
        var id = event.detail[0].id;

        Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete this album? All the photo will be deleted also.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Delete',
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#d33',
            confirmButtonColor: '#3085d6',
            width: '320px',
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                Livewire.dispatch('deleteAlbumAction', { id: id });
            }
        });
    })
</script>
@endpush