@extends('themes.base.layout')
@section('title', $album->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin') }}">@lang('navigation.breadcrumb.admin')</a></li>
    <li class="breadcrumb-item"><a href="{{ route('albums.index') }}">@lang('navigation.breadcrumb.albums')</a></li>
    <li class="breadcrumb-item active">{{ $album->name }}</li>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <a class="pull-right btn btn-secondary" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>

                <h1 class="page-title">{{ $album->name }}</h1>
                <p>{{ $album->description }}</p>
                <hr/>

                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'photos', 'tab_icon' => 'photo', 'tab_text' => trans('admin.album_photos_tab')])
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'upload', 'tab_icon' => 'upload', 'tab_text' => trans('admin.album_upload_tab')])
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'permissions', 'tab_icon' => 'lock', 'tab_text' => trans('admin.album_security_tab')])
                        @include(Theme::viewName('partials.tab'), ['tab_name' => 'settings', 'tab_icon' => 'cog', 'tab_text' => trans('admin.album_settings_tab')])
                    </ul>

                    <div class="tab-content">
                        {{-- Photos --}}
                        <div role="tabpanel" class="tab-pane{{ $active_tab == 'photos' ? ' active' : '' }}" id="photos-tab">
                            @if (count($photos) == 0)
                                <div class="text-center" style="margin-top: 30px;">
                                    <h4 class="text-danger"><b>@lang('admin.album_no_photos_p1')</b></h4>
                                    <p>@lang('admin.album_no_photos_p2')</p>
                                    <p style="margin-top: 30px;"><button id="upload-button" class="btn btn-lg btn-success"><i class="fa fa-fw fa-upload"></i> @lang('admin.album_no_photos_button')</button></p>
                                </div>
                            @else
                                <form action="{{ route('photos.updateBulk', [$album->id]) }}" method="POST">
                                    {{ csrf_field() }}
                                    {{ method_field('PUT') }}

                                    @foreach ($photos as $photo)
                                        @include (Theme::viewName('partials.single_photo_admin'))
                                    @endforeach

                                    <div class="pull-left" style="margin-bottom: 15px;">
                                        <p style="margin-bottom: 15px;">
                                            <button data-bind="click: selectAll" type="button" class="btn btn-default">@lang('admin.select_all_action')</button>
                                            <button data-bind="click: selectNone" type="button" class="btn btn-default">@lang('admin.select_none_action')</button>
                                        </p>
                                        <input data-bind="value: selectAllInAlbum" type="hidden" name="select-all-album"/>

                                        <div data-bind="visible: selectAllInAlbum" class="alert alert-warning">
                                            <p>@lang('admin.select_all_album_active')</p>
                                        </div>

                                        <p><label class="control-label" for="bulk-action">@lang('forms.bulk_edit_photos_label')</label></p>
                                        <input type="hidden" name="new-album-id" value="{{ $album->id }}"/>
                                        <select name="bulk-action" data-bind="value: bulkModifyMethod, enable: photoIDs().length > 0">
                                            <option>@lang('forms.bulk_edit_photos_placeholder')</option>
                                            @foreach ($bulk_actions as $key => $value)
                                                <option value="{{ $key }}"{{ $key == old('bulk-action') ? ' selected="selected"' : '' }}>{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        <button type="submit" class="btn btn-sm btn-primary" name="bulk-apply" value="clicked" data-bind="click: bulkModifySelected, enable: photoIDs().length > 0">@lang('forms.apply_action')</button>
                                    </div>
                                    <div class="text-right">
                                        <button type="submit" class="btn btn-success">@lang('forms.save_action')</button>
                                    </div>
                                </form>

                                <div class="text-center">
                                    {{ $photos->links() }}
                                </div>
                            @endif
                        </div>

                        {{-- Upload --}}
                        @include(Theme::viewName('partials.album_upload_tab'))

                        {{-- Permissions --}}
                        <div role="tabpanel" class="tab-pane{{ $active_tab == 'permissions' ? ' active' : '' }}" id="permissions-tab">
                            <h4>@lang('admin.security_heading')</h4>
                            <p>@lang('admin.security_text')</p>
                            <hr/>

                            <h5 style="font-weight: bold;">@lang('admin.security_groups_heading')</h5>

                            <form action="{{ route('albums.set_group_permissions', ['id' => $album->id]) }}" method="post">
                                {{ csrf_field() }}

                                @if (count($existing_groups) > 0)
                                    <div class="panel-group" id="groups-accordion" role="tablist" aria-multiselectable="true">
                                        @foreach ($existing_groups as $group)
                                            @include(Theme::viewName('partials.album_permissions'), [
                                                'key_id' => 'group_' . $group->id,
                                                'object_id' => $group->id,
                                                'title' => $group->name,
                                                'callback' => [$album, 'doesGroupHavePermission'],
                                                'callback_object' => $group,
                                                'parent_id' => 'groups-accordion'
                                            ])
                                        @endforeach
                                    </div>
                                @endif

                                <div class="row">
                                    <div class="col-md-4">
                                        <select class="form-control" name="group_id" style="margin-bottom: 2px;"@if (count($add_new_groups) == 0) disabled="disabled"@endif>
                                            @foreach ($add_new_groups as $group)
                                                <option value="{{ $group->id }}">{{ $group->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" name="action" value="add_group" class="btn btn-primary">Assign Permissions</button>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <button type="submit" name="action" value="update_group_permissions" class="btn btn-success">
                                            <i class="fa fa-fw fa-check"></i> @lang('forms.save_action')
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <hr/>

                            <h5 style="font-weight: bold;">@lang('admin.security_users_heading')</h5>

                            <form action="{{ route('albums.set_user_permissions', ['id' => $album->id]) }}" method="post">
                                {{ csrf_field() }}

                                <div class="panel-group" id="users-accordion" role="tablist" aria-multiselectable="true">
                                    {{-- Anonymous users --}}
                                    @include(Theme::viewName('partials.album_permissions'), [
                                        'key_id' => 'anonymous',
                                        'object_id' => 'anonymous',
                                        'title' => trans('admin.anonymous_users'),
                                        'callback' => [$album, 'doesUserHavePermission'],
                                        'callback_object' => null,
                                        'parent_id' => 'users-accordion'
                                    ])

                                    @foreach ($existing_users as $user)
                                        @include(Theme::viewName('partials.album_permissions'), [
                                            'key_id' => 'user_' . $user->id,
                                            'object_id' => $user->id,
                                            'title' => $user->name,
                                            'callback' => [$album, 'doesUserHavePermission'],
                                            'callback_object' => $user,
                                            'parent_id' => 'users-accordion'
                                        ])
                                    @endforeach
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <input class="form-control" name="user_name" id="user-search-textbox" size="20" style="margin-bottom: 2px;" />
                                        <input type="hidden" name="user_id" id="user-id-field" />
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" name="action" value="add_user" class="btn btn-primary">Assign Permissions</button>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <button type="submit" name="action" value="update_user_permissions" class="btn btn-success">
                                            <i class="fa fa-fw fa-check"></i> @lang('forms.save_action')
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- Settings --}}
                        <div role="tabpanel" class="tab-pane{{ $active_tab == 'settings' ? ' active' : '' }}" id="settings-tab">
                            <form action="{{ route('albums.update', [$album->id]) }}" method="POST">
                                {{ csrf_field() }}
                                {{ method_field('PUT') }}

                                <h4><i class="fa fa-fw fa-info"></i> @lang('admin.album_basic_info_heading')</h4>
                                <p>@lang('admin.album_basic_info_intro')</p>

                                <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}" style="margin-top: 20px;">
                                    <label class="form-control-label" for="album-name">@lang('forms.name_label')</label>
                                    <input type="text" class="form-control" id="album-name" name="name" value="{{ old('name') }}">

                                    @if ($errors->has('name'))
                                        <div class="form-control-feedback">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label class="form-control-label" for="album-description">@lang('forms.description_label')</label>
                                    <textarea class="form-control" id="album-description" name="description">{{ old('description') }}</textarea>
                                </div>

                                <hr/>

                                <h4><i class="fa fa-fw fa-paint-brush"></i> @lang('admin.album_appearance_heading')</h4>
                                <p>@lang('admin.album_appearance_intro')</p>

                                <div class="form-group" style="margin-top: 20px;">
                                    <label class="control-label" for="album-view">@lang('forms.default_album_view_label')</label>
                                    <select class="form-control" name="default_view">
                                        @foreach ($allowed_views as $view)
                                            <option value="{{ $view }}"{{ $view == old('default_view') ? ' selected="selected"' : '' }}>{{ $view }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <hr/>

                                <div class="row">
                                    <div class="col-sm-6 push-sm-6">
                                        <div class="card">
                                            <div class="card-header">@lang('admin.save_changes_heading')</div>
                                            <div class="card-block">
                                                <p>@lang('admin.save_changes_intro')</p>
                                                <div class="text-right">
                                                    <button type="submit" class="btn btn-success"><i class="fa fa-fw fa-floppy-o"></i> @lang('forms.save_action')</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 pull-sm-6">
                                        <div class="card card-outline-danger">
                                            <div class="card-header card-danger">@lang('admin.danger_zone_heading')</div>
                                            <div class="card-block">
                                                <p class="text-danger">@lang('admin.danger_zone_intro')</p>
                                                <div>
                                                    <a href="{{ route('albums.delete', ['id' => $album->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="text/javascript">
    var language = [];
    language.action_cancel = '{!! addslashes(trans('forms.cancel_action')) !!}';
    language.action_continue = '{!! addslashes(trans('forms.continue_action')) !!}';
    language.action_delete = '{!! addslashes(trans('forms.delete_action')) !!}';
    language.change_album_message = '{!! addslashes(trans('admin.change_album_message')) !!}';
    language.change_album_title = '{!! addslashes(trans('admin.change_album_title')) !!}';
    language.delete_bulk_confirm_message = '{!! addslashes(trans('admin.delete_bulk_photos_message')) !!}';
    language.delete_bulk_confirm_title = '{!! addslashes(trans('admin.delete_bulk_photos_title')) !!}';
    language.delete_confirm_message = '{!! addslashes(trans('admin.delete_photo_message')) !!}';
    language.delete_confirm_title = '{!! addslashes(trans('admin.delete_photo_title')) !!}';
    language.not_an_image_file = '{!! addslashes(trans('admin.upload_file_not_image_messages')) !!}';
    language.select_all_choice_all_action = '{!! addslashes(trans('admin.select_all_choice.all_action')) !!}';
    language.select_all_choice_message = '{!! addslashes(trans('admin.select_all_choice.message')) !!}';
    language.select_all_choice_title = '{!! addslashes(trans('admin.select_all_choice.title')) !!}';
    language.select_all_choice_visible_action = '{!! addslashes(trans('admin.select_all_choice.visible_action')) !!}';
    language.image_failed = '{!! addslashes(trans('admin.upload_file_status_failed')) !!}';
    language.image_uploaded = '{!! addslashes(trans('admin.upload_file_status_success')) !!}';
    language.upload_status = '{!! addslashes(trans('admin.upload_file_status_progress')) !!}';

    var urls = [];
    urls.analyse = '{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}';
    urls.delete_photo = '{{ route('photos.destroy', ['id' => 0]) }}';
    urls.flip_photo = '{{ route('photos.flip', ['id' => 0, 'horizontal' => -1, 'vertical' => -2]) }}';
    urls.move_photo = '{{ route('photos.move', ['photoId' => 0]) }}';
    urls.regenerate_thumbnails = '{{ route('photos.regenerateThumbnails', ['photoId' => 0]) }}';
    urls.rotate_photo = '{{ route('photos.rotate', ['id' => 0, 'angle' => 1]) }}';

    var viewModel = new UploadPhotosViewModel('{{ $album->id }}', '{{ $queue_token }}', language, urls);
    /*var editViewModel = new EditPhotosViewModel('{{ $album->id }}', language, urls);

    @foreach ($photos as $photo)
        editViewModel.photoIDsAvailable.push('{{ $photo->id }}');
    @endforeach

    // Populate the list of albums in the view model
    @foreach ($albums as $album)
        editViewModel.albums.push({
            'id': '{{ $album->id }}',
            'name': '{!! addslashes($album->name) !!}'
        });
    @endforeach*/

    $(document).ready(function() {
        $('#upload-button').click(function() {
            $('.nav-tabs a[href="#upload-tab"]').tab('show');
        });

        {{-- Photo editing tasks - the buttons beneath the photos in partials/single_photo_admin --}}
        /*$('a.change-album').click(editViewModel.changeAlbum);
        $('a.delete-photo').click(editViewModel.delete);
        $('a.flip-photo-both').click(editViewModel.flipBoth);
        $('a.flip-photo-horizontal').click(editViewModel.flipHorizontal);
        $('a.flip-photo-vertical').click(editViewModel.flipVertical);
        $('a.regenerate-thumbnails').click(editViewModel.regenerateThumbnails);
        $('a.rotate-photo-left').click(editViewModel.rotateLeft);
        $('a.rotate-photo-right').click(editViewModel.rotateRight);*/

        {{-- Photo uploads using AJAX --}}
        if (window.FormData)
        {
            $('#bulk-upload-form').submit(function(event) {
                // Set the in progress flag - no need to unset it as this is a synchronous process so the browser
                // will reload the page in some way after completion
                if (!viewModel.isBulkUploadInProgress())
                {
                    viewModel.isBulkUploadInProgress(true);

                    // Wait a minute to give KnockoutJS chance to update the UI
                    window.setTimeout(function() {
                        $('#bulk-upload-form').submit();
                    }, 1000);

                    return false;
                }

                // Already set the flag, let the upload commence
                return true;
            });
        }

        {{-- Select All/None links on the permissions tab --}}
        $('a.select-all').click(function() {
            $('input:checkbox', $(this).closest('.panel-body')).prop('checked', true);
            return false;
        });
        $('a.select-none').click(function() {
            $('input:checkbox', $(this).closest('.panel-body')).prop('checked', false);
            return false;
        });

        {{-- Type-ahead support for users textbox on the permissions tab --}}
        /*var userDataSource = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            //prefetch: '../data/films/post_1960.json',
            remote: {
                url: '{{ route('users.searchJson') }}?q=%QUERY',
                wildcard: '%QUERY'
            }
        });

        $('#user-search-textbox').typeahead(null, {
            name: 'user-search',
            display: 'name',
            source: userDataSource
        });
        $('#user-search-textbox').bind('typeahead:select', function(ev, suggestion) {
            $('#user-id-field').val(suggestion.id);
        });*/

        // Bind the view models to the relevant tab
        //ko.applyBindings(editViewModel, document.getElementById('photos-tab'));
        var appUpload = new Vue(viewModel);
        appUpload.$watch('isUploadInProgress', function(value) {
            if (value)
            {
                $('#upload-progress-modal').modal('show');
            }
            else if (this.statusMessages.length === 0)
            {
                $('#upload-progress-modal').modal('hide');
            }
        });
        {{-- Whatever I try, I could not get VueJS to adjust the progress bars automatically --}}
        /*appUpload.$watch('failedPercentage', function(value) {
            alert('failed: ' + value);
            $('.progress-bar.bg-danger', '#upload-progress-modal').width(value);
        });
        appUpload.$watch('successfulPercentage', function(value) {
            alert('success: ' + value);
            $('.progress-bar.bg-success', '#upload-progress-modal').width(value);
        });*/
    })
</script>
@endpush