@extends('layouts.master')
@section('page_title', 'Business Recordings')
@section('content')
    <div class="container recording">
        {{ Form::page_header("Business Recordings", "paper_stack") }}
        @if(\Gate::allows(\App\Providers\AuthServiceProvider::SUPER_ADMIN))
            <div class="row grid-header">
                {{ Form::button_with_class('Add a recording', 'add-recording', 'add_recording_btn') }}
            </div>
        @endif
        @if($google_drive_recordings_link)
            <div class="row">
                {{ Form::label_styled('Google Drive Recordings:', '', \App\Helpers\FormComponentHelper::SIZE_MEDIUM, 3) }}
                {{ Form::label_link($google_drive_recordings_link, $google_drive_recordings_link) }}
            </div>
        @endif
        <div class="row">
            <div class="recording-wrap" style="display: none;" data-bucket="{{config('aws.buckets.intake')}}">
                <div class="recording-info">
                    {!! Form::open(['url' => action('BusinessIntakeController@post_business_recording', compact('business')), 'files' => true, 'id' => 'business_form']) !!}
                    <div class="row">{{ Form::label_styled('Add a Recording', 'add-recording-title', \App\Helpers\FormComponentHelper::SIZE_EXLARGE) }}</div>
                    {{ Form::row_text_inline('name', 'Name', null, 1, 4, \App\Helpers\FormComponentHelper::SIZE_LARGE) }}
                    <div class="row"><p class="name-errors"></p></div>
                    {{ Form::row_date_inline('date', 'Date', old('intake_date', Carbon\Carbon::today()->format('m/d/Y')), 1, 2, \App\Helpers\FormComponentHelper::SIZE_LARGE, 'recording_date') }}
                    <div class="row"><p class="date-errors"></p></div>
                    <div class="row">
                        <div class="no-left-pad col-md-1 col-xs-1">
                            {{ Form::label_ex('File', \App\Helpers\FormComponentHelper::SIZE_LARGE) }}
                        </div>
                        <div class="no-left-pad col-md-6 col-xs-1">
                            @include('shared.forms._browse_button', ['name' => 'recording_file', 'limitations' => ''])
                        </div>
                    </div>
                    <div class="row">
                        <div class="progress-area" style="display: none;">
                            <div class="progress progress-sm progress-striped active">
                                <div class="progress-bar bg-color-darken recording-progress" role="progressbar"><p
                                            id="progress-count"></p>
                                    %
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="no-left-pad col-md-11 col-xs-11 col-md-offset-1 col-xs-offset-1">
                            <p class="file-errors"></p>
                        </div>
                    </div>
                    <div class="row bt-button-row">
                        {{ Form::button_with_class('Add', 'add-img', 'save_btn') }}
                        {{ Form::button_with_class('Cancel', 'cancel-btn') }}
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        @include('search._complex_search_parameter')
        @include('search._search_grid_wrapper', compact('column_set'))
    </div>
@endsection()
@section('page_script')
    {!! HTML::script('/js/moment.min.js') !!}
    {!! HTML::script('/js/daterangepicker.js') !!}
    @include('shared_script._browse_button_script')
    @include('shared_script._search_script_render')
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.7.min.js"></script>
    <script>

        function delete_action(title, business_recordings_url, button_id) {
            showYesNoModalAlert('Delete Business Recording', 'Are you sure you want to delete ' + title + '?', "delete_business_recordings('" + title + "','" + business_recordings_url + "','" + button_id + "')");
        }

        function delete_business_recordings(title, business_recordings_url, button_id) {
            $.ajax({
                url: business_recordings_url,
                method: 'DELETE',
                success: function (result) {
                    $('#modal-alert').modal('hide');
                    $('#' + button_id).closest('tr').remove();
                }
            });
        }

        function play_btn(title, source) {

            var player = '<div class="container">' +
                '<div class="row"><div class="col-md-offset-4 col-md-4"><video id="play_vid" controls><source src="' + source + '"></video><div class="col-md-4">&nbsp;</div></div></div>' +
                '<div class="row text-center">' +
                '<span id="go_start" class="record_btn"><i class="fa fa-step-backward" aria-hidden="true"></i></span>' +
                '<span id="skip_back_10" title="Rewind 10 seconds" class="record_btn"><i class="fa fa-step-backward" aria-hidden="true"></i> 10 sec</span>' +
                '<span id="fforward_1" class="record_btn"><i class="fa fa-fast-forward" aria-hidden="true"></i> 1.0x</span>' +
                '<span id="fforward_15" class="record_btn"><i class="fa fa-fast-forward" aria-hidden="true"></i> 1.5x</span>' +
                '<span id="fforward_2" class="record_btn"><i class="fa fa-fast-forward" aria-hidden="true"></i> 2x</span>' +
                '<span id="skip_forward_10" title="Fast-forward 10 seconds" class="record_btn"><i class="fa fa-step-forward" aria-hidden="true"></i> 10 sec</span>' +
                '<span id="go_end" class="record_btn"><i class="fa fa-step-forward" aria-hidden="true"></i></span>' +
                '<div>' +
                '<div>';
            $('#modal-alert').on('show.bs.modal', function (event) {
                $(this).find('.modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
            });
            presentModalAlert(title, player, true);
        }

        $('#modal-alert').on('show.bs.modal', function () {
            var play_vid = document.getElementById('play_vid');
            $('#fforward_1').click(function () {
                play_vid.playbackRate = 1;
            });
            $('#fforward_15').click(function () {
                play_vid.playbackRate = 1.5;
            });
            $('#fforward_2').click(function () {
                play_vid.playbackRate = 2;
            });
            $('#skip_back_10').click(function () {
                play_vid.currentTime = play_vid.currentTime - 10;
            });
            $('#skip_forward_10').click(function () {
                play_vid.currentTime = play_vid.currentTime + 10;
            });
            $('#go_start').click(function () {
                play_vid.currentTime = 0.0;
            });
            $('#go_end').click(function () {
                play_vid.currentTime = play_vid.duration;
            });
        });

        $('#modal-alert').on('hidden.bs.modal', function () {
            var play_vid = document.getElementById('play_vid');
            play_vid.pause();
            $('#layout-preview-modal-content').attr('src', '');
        });

        var $error;

        function do_on_change_file() {
            $error.text('');
        }

        $(document).ready(function () {

            init_browse_button('recording_file', 'do_on_change_file');

            init_daterangepicker('recording_date');

            $error = $('.file-errors');
            var bucket = '{{config('aws.buckets.intake')}}'.split('|'),
                s3Config = {
                    access_key: '{{config('aws.credentials.key')}}',
                    secret_key: '{{config('aws.credentials.secret')}}',
                    bucket: bucket[0],
                    region: bucket[1]
                },
                arInput = {
                    business_record: '',
                    name: '',
                    date: '',
                    location: '',
                    filename: ''
                };
            AWS.config.update({accessKeyId: s3Config.access_key, secretAccessKey: s3Config.secret_key});
            var s3 = new AWS.S3({params: {Bucket: s3Config.bucket}});

            $('.cancel-btn').on('click', function (e) {
                e.preventDefault();
                $('.recording-wrap').hide();
                $('.add-recording').show();
                formReset();
            });
            $('.add-recording').on('click', function (e) {
                e.preventDefault();
                $('.recording-wrap').show();
                $(this).hide();
            });

            $('.name-errors').hide();
            $('.date-errors').hide();

            $('.add-img').on('click', function (e) {
                e.preventDefault();
                var file = $('input[type=file]')[0].files[0];
                var inputed_date = $('input[name="date"]').val();
                if ($('input[name="name"]').val() == '') {
                    $('.name-errors').text('Recording name is required').show();
                    $('input#name').on('input', function () {
                        $('.name-errors').hide();
                    });
                    return false;
                }
                if (inputed_date == '' || isNaN(Date.parse(inputed_date))) {
                    $('.date-errors').text(((inputed_date == '') ? 'Date is required' : 'Date must be a valid format')).show();
                    $('#recording_date').on('focusout', function () {
                        $('.date-errors').hide();
                    });
                    return false;
                }
                if (!file) {
                    $error.text('Input file is required');
                    return false;
                }
                if (file.size > 200000000) {
                    $error.text('File size must not be greater than 200MB');
                    return false;
                }
                $(this).prop('disabled', true);

                arInput = {
                    name: $('input[name="name"]').val(),
                    date: $('#recording_date').val(),
                    filename: file.name
                };
                $('.add-img').addClass('disabled');
                $('.cancel-btn').addClass('disabled');
                $('.progress-area').show();
                $('#progress-count').html('preparing ...');

                $.post('{!! action('BusinessIntakeController@post_business_recording', compact('business')) !!}', arInput, function (res) {

                    var current_delete_url = res.data.record.delete_url;

                    if (res.status == 'ok') {
                        var params = {
                            Key: res.data.path,
                            ContentType: file.type,
                            Body: file,
                            ServerSideEncryption: 'AES256',
                            ACL: 'public-read'
                        };
                        var request = s3.putObject(params);

                        $('.cancel-btn').unbind().on('click', function (e) {
                            e.preventDefault();
                            $('.recording-wrap').hide();
                            $('.add-recording').show();
                            request.abort();
                            formReset();
                            delete_file(current_delete_url);
                        });

                        request.on('httpUploadProgress', function (progress) {
                            // Log Progress Information
                            var count = Math.round(progress.loaded / progress.total * 100);
                            $error.text('');
                            $('.recording-progress').css('width', count + "%");
                            $('#progress-count').html(Math.round(count) + "%");
                        }).on('success', function (resp) {
                            if (resp.httpResponse.statusCode = 200) {
                                var url = s3.getSignedUrl('getObject', {Key: params.Key});
                                arInput.location = url.substring(0, url.indexOf("?"));
                                arInput.business_record = res.data.record.business_recording;
                                _ajaxCall();
                            }
                        }).on('complete', function (resp) {
                            if (resp.data == null) {
                                $error.text(resp.error.message);
                                console.log("Complete! ", resp);
                            }
                        }).send();
                    } else {
                        $error.text('Error while uploading a record');
                    }
                });
            });

            var _ajaxCall = function () {
                $.post('{!! action('BusinessIntakeController@update_business_recording') !!}', arInput, function (res) {

                    if (res.status == 'ok') {
                        var new_row = '<tr>' +
                            '<td class="col-width-30">' + res.data.name + '</td>' +
                            '<td class="col-width-30">' + res.data.date_display + '</td>' +
                            '<td class="col-width-10 text-right">' + res.data.play_btn + res.data.edit_btn + res.data.delete_btn + '</td>' +
                            '</tr>';

                        if ($('.source-data-table tbody tr').length)
                            var last_id = $('.source-data-table tbody tr:last').after(new_row);
                        else
                            var last_id = $('.source-data-table tbody').append(new_row);


                        $('.recording-wrap').hide();
                        $('.add-recording').show();

                        formReset();
                    }
                });

            };

            var formReset = function () {
                $error.text('');
                $("#business_form").get(0).reset();
                $('.progress-area').hide();
                $('.recording-progress').css('width', "0%");
                $('#progress-count').html("");
                $('.add-img').prop("disabled", true);
                $('.add-img').removeProp('disabled');
                $('.cancel-btn').removeClass('disabled');
                $('.add-img').removeClass('disabled');
                $('.name-errors').hide();
                $('.date-errors').hide();
            };

            var delete_file = function (current_delete_url) {
                $.ajax({
                    url: current_delete_url,
                    method: 'DELETE'
                });
            }
        });
    </script>

@endsection
@section('page_style')
    {!! HTML::style('/css/daterangepicker.css') !!}
    {{ Html::style('/css/daterangepicker_custom.css') }}
    <style>
        #play_vid {
            width: 100%;
        }

        .record_btn {
            background: #f0f0f0;
            border: 1px solid #000000;
            padding: 4px 20px;
            cursor: pointer;
            margin-right: 10px;
            margin-top: 10px;
        }

        .add-recording-title {
            margin-bottom: 15px;
        }

        .bt-button-row {
            padding-top: 5px;
        }

        .recording-info {
            margin-left: 30px;
        }

        .progress-area {
            margin-top: 20px;
        }

        .name-errors,
        .date-errors {
            font-size: 14px;
            color: #cc0000;
            margin-left: 80px;
            padding-bottom: 0;
        }

        .file-errors {
            font-size: 14px;
            color: #cc0000;
            padding-bottom: 0;
        }

        video,
        video controls {
            cursor: pointer;
        }
    </style>
@endsection