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

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

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a class="pull-right btn btn-default" 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::open(['route' => ['photos.updateBulk', $album->id], 'method' => 'PUT', 'id' => 'bulk-modify-form']) !!}

                                @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>{!! Form::label('bulk-action', trans('forms.bulk_edit_photos_label'), ['class' => 'control-label']) !!}</p>
                                    {!! Form::hidden('new-album-id', $album->id) !!}
                                    {!! Form::select('bulk-action', $bulk_actions, null, ['placeholder' => trans('forms.bulk_edit_photos_placeholder'), 'id' => 'bulk-action-apply', 'data-bind' => 'value: bulkModifyMethod, enable: photoIDs().length > 0']) !!}
                                    <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="pull-right">
                                    <button type="submit" class="btn btn-success">@lang('forms.save_action')</button>
                                </div>
                                <div class="clearfix"></div>

                                {!! Form::close() !!}

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

                        {{-- Upload --}}
                        <div role="tabpanel" class="tab-pane{{ $active_tab == 'upload' ? ' active' : '' }}" id="upload-tab">
                            @if (!$is_upload_enabled)
                                <div class="row">
                                    <div class="col-xs-12">
                                        <p class="text-danger" style="font-weight: bold">@lang('admin.upload_disabled_heading')</p>
                                        <p>@lang('admin.upload_disabled_text')</p>
                                    </div>
                                </div>
                            @else
                                <h4>@lang('admin.upload_single_file_heading')</h4>
                                <p>@lang('admin.upload_single_file_text')</p>
                                <div class="alert alert-info">
                                    <p>@lang('admin.upload_single_file_text2', [
                                        'file_size' => sprintf('<b>%s%s</b>', round($file_upload_limit, 2), trans('global.units.megabytes')),
                                        'max_upload_size' => sprintf('<b>%s%s</b>', round($max_post_limit, 2), trans('global.units.megabytes'))
                                    ])</p>
                                </div>

                                <div class="row">
                                    <div class="col-sm-5" style="margin-bottom: 20px;">
                                        {!! Form::open(['route' => 'photos.store', 'method' => 'POST', 'files' => true, 'id' => 'single-upload-form']) !!}
                                        {!! Form::hidden('album_id', $album->id) !!}
                                        {!! Form::hidden('queue_token', $queue_token) !!}

                                        <div class="form-group">
                                            {!! Form::file('photo[]', ['class' => 'control-label', 'multiple' => 'multiple', 'id' => 'single-upload-files']) !!}
                                        </div>

                                        <div>
                                            <button type="submit" class="btn btn-success" data-bind="disable: (isUploadInProgress() || isBulkUploadInProgress()), text: isUploadInProgress() ? '@lang('admin.is_uploading')' : '@lang('forms.upload_action')'"><i class="fa fa-fw fa-upload"></i> @lang('forms.upload_action')</button>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>

                                    <div class="col-sm-5">
                                        <div class="text-center" data-bind="visible: isUploadInProgress">
                                            <p><b>@lang('admin.is_uploading')</b></p>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-success" data-bind="style: { width: successfulPercentage() }">
                                                    <span class="sr-only"><span class="percentage-success" data-bind="text: successfulPercentage"></span></span>
                                                </div>
                                                <div class="progress-bar progress-bar-danger" data-bind="style: { width: failedPercentage() }">
                                                    <span class="sr-only"><span class="percentage-danger" data-bind="text: failedPercentage"></span></span>
                                                </div>
                                            </div>
                                            <p data-bind="text: currentStatus"></p>
                                        </div>

                                        <div data-bind="visible: statusMessages().length > 0">
                                            <p data-bind="visible: !isUploadInProgress()" class="text-danger" style="font-weight: bold">
                                                <span data-bind="text: imagesFailed"></span> @lang('admin.upload_file_number_failed')
                                            </p>
                                            <p data-bind="visible: imagesUploaded() > 0">
                                                @lang('admin.upload_file_failed_continue')<br /><br/>
                                                <a href="{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}" class="btn btn-primary">@lang('forms.continue_action')</a>
                                            </p>

                                            <ul data-bind="foreach: statusMessages">
                                                <li data-bind="css: message_class, text: message_text"></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <hr/>
                                <h4>@lang('admin.upload_bulk_heading')</h4>
                                <p>@lang('admin.upload_bulk_text')</p>
                                <div class="alert alert-info">
                                    <p>@lang('admin.upload_bulk_text2', [
                                        'max_upload_size' => sprintf('<b>%s%s</b>', round($max_post_limit_bulk, 2), trans('global.units.megabytes'))
                                    ])</p>
                                </div>

                                {!! Form::open(['route' => 'photos.storeBulk', 'method' => 'POST', 'files' => true, 'id' => 'bulk-upload-form']) !!}
                                {!! Form::hidden('album_id', $album->id) !!}
                                {!! Form::hidden('queue_token', $queue_token) !!}

                                <div class="form-group">
                                    {!! Form::file('archive', ['class' => 'control-label']) !!}
                                </div>

                                <div>
                                    <button type="submit" class="btn btn-success" data-bind="disable: (isUploadInProgress() || isBulkUploadInProgress()), text: isBulkUploadInProgress() ? '@lang('admin.is_uploading')' : '@lang('forms.upload_action')'"><i class="fa fa-fw fa-upload"></i> @lang('forms.upload_action')</button>
                                </div>
                                {!! Form::close() !!}
                            @endif
                        </div>

                        {{-- 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)
                                            <div class="panel panel-default">
                                                <div class="panel-heading" role="tab" id="heading-{{ $group->id }}">
                                                    <h4 class="panel-title">
                                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#groups-accordion" href="#collapse-{{ $group->id }}" aria-expanded="true" aria-controls="collapse-{{ $group->id }}">
                                                            {{ $group->name }}
                                                        </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse-{{ $group->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ $group->id }}">
                                                    <div class="panel-body">
                                                        <p style="margin-bottom: 20px;"><a class="select-all" href="#">Select All</a> &middot; <a class="select-none" href="">Select None</a></p>

                                                        @foreach ($all_permissions as $permission)
                                                            <div class="checkbox">
                                                                <label for="permission|{{ $group->id }}|{{ $permission->id }}">
                                                                    <input id="permission|{{ $group->id }}|{{ $permission->id }}" name="permissions[{{ $group->id }}][]" value="{{ $permission->id }}" type="checkbox"{{ $album->doesGroupHavePermission($group, $permission) ? ' checked="checked"' : '' }} /> {{ trans(sprintf('permissions.%s.%s', $permission->section, $permission->description)) }}
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif

                                <div class="form-group">
                                    <select class="form-control" name="group_id" style="width: auto; display: inline;"@if (count($add_new_groups) == 0) disabled="disabled"@endif>
                                        @foreach ($add_new_groups as $group)
                                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                                        @endforeach
                                    </select>
                                    <button type="submit" name="action" value="add_group" class="btn btn-primary"@if (count($add_new_groups) == 0) disabled="disabled"@endif>Assign Permissions</button>
                                    <button type="submit" name="action" value="update_group_permissions" class="btn btn-success pull-right">
                                        <i class="fa fa-fw fa-check"></i> @lang('forms.save_action')
                                    </button>
                                </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 --}}
                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="heading-anonymous">
                                            <h4 class="panel-title">
                                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#users-accordion" href="#collapse-anonymous" aria-expanded="true" aria-controls="collapse-anonymous">
                                                    @lang('admin.anonymous_users')
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse-anonymous" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-anonymous">
                                            <div class="panel-body">
                                                <p style="margin-bottom: 20px;"><a class="select-all" href="#">Select All</a> &middot; <a class="select-none" href="">Select None</a></p>

                                                @foreach ($all_permissions as $permission)
                                                    <div class="checkbox">
                                                        <label for="permission|anonymous|{{ $permission->id }}">
                                                            <input id="permission|anonymous|{{ $permission->id }}" name="permissions[anonymous][]" value="{{ $permission->id }}" type="checkbox"{{ $album->doesAnonymousHavePermission($permission) ? ' checked="checked"' : '' }} /> {{ trans(sprintf('permissions.%s.%s', $permission->section, $permission->description)) }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <input class="form-control" name="user_id" size="20" style="width: auto; display: inline;" />
                                    <button type="submit" name="action" value="add_user" class="btn btn-primary">Assign Permissions</button>

                                    <button type="submit" name="action" value="update_user_permissions" class="btn btn-success pull-right">
                                        <i class="fa fa-fw fa-check"></i> @lang('forms.save_action')
                                    </button>
                                </div>
                                <div class="clearfix"><!-- --></div>
                            </form>
                        </div>

                        {{-- Settings --}}
                        <div role="tabpanel" class="tab-pane{{ $active_tab == 'settings' ? ' active' : '' }}" id="settings-tab">
                            {!! Form::model($album, ['route' => ['albums.update', $album->id], 'method' => '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-error' : '' }}" style="margin-top: 20px;">
                                {!! Form::label('name', trans('forms.name_label'), ['class' => 'control-label']) !!}
                                {!! Form::text('name', old('name'), ['class' => 'form-control']) !!}

                                @if ($errors->has('name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>

                            <div class="form-group">
                                {!! Form::label('description', trans('forms.description_label'), ['class' => 'control-label']) !!}
                                {!! Form::textarea('description', old('description'), ['class' => 'form-control']) !!}
                            </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">@lang('forms.default_album_view_label')</label>
                                {!! Form::select('default_view', $allowed_views, old('default_view'), ['class' => 'form-control']) !!}
                            </div>

                            <hr/>

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

                                <div class="col-sm-6 col-sm-pull-6">
                                    <div class="panel panel-danger">
                                        <div class="panel-heading">@lang('admin.danger_zone_heading')</div>
                                        <div class="panel-body">
                                            <p class="text-danger">@lang('admin.danger_zone_intro')</p>
                                            <p>
                                                <a href="{{ route('albums.delete', ['id' => $album->id]) }}" class="btn btn-danger">@lang('forms.delete_action')</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </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.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)
        {
            $('#single-upload-form').submit(function(event) {
                var fileSelect = $('#single-upload-files', this);
                var uploadButton = $('button[type=submit]', this);

                // Get the selected files
                var notImageString = '{!! addslashes(trans('admin.upload_file_not_image_messages')) !!}';
                var files = fileSelect[0].files;

                // Reset statistics
                viewModel.startUpload(files.length);

                // Loop through each of the selected files and upload them individually
                for (var i = 0; i < files.length; i++)
                {
                    var file = files[i];

                    // We're only interested in image files
                    if (!file.type.match('image.*'))
                    {
                        alert(notImageString.replace(':file_name', file.name));
                        viewModel.onUploadFailed(null, file.name);
                        continue;
                    }

                    // Upload the file
                    viewModel.uploadFile($(this), file);
                }

                // Prevent standard form upload
                event.preventDefault();
                return false;
            });

            $('#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;
        });

        // Bind the view models to the relevant tab
        ko.applyBindings(editViewModel, document.getElementById('photos-tab'));
        ko.applyBindings(viewModel, document.getElementById('upload-tab'));
    })
</script>
@endpush