@extends('socialite::layouts.default')

@section('content')
    <div class="container section-container @if($timeline->hide_cover) no-cover @endif">
        <div class="row">
            <div class="col-md-12">
                @include('beers.show.partials.header')
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                @include('beers.show.partials.left')
            </div>

            @yield('beer_content')
        </div>
    </div>

    <!-- Modal starts here-->
    <div class="modal fade" id="usersModal" tabindex="-1" role="dialog" aria-labelledby="usersModalLabel">
        <div class="modal-dialog modal-likes" role="document">
            <div class="modal-content">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>
    </div>
@endsection

@section('bottom_js')
    @parent

    <script>
        $('.like-beer-button').on('click', function (e) {
            e.preventDefault();

            var beerButtonsSection = $(this).closest('.beer-buttons');
            $.post(
                $(this).attr('href'),
                {
                    timeline_id: $(this).data('timeline-id'),
                    _token: $('[name="csrf_token"]').attr('content')
                },
                function (data) {
                    if (data.status === 200) {
                        // beerButtonsSection.find('.like').parent().addClass('hidden');
                        // beerButtonsSection.find('.liked').parent().removeClass('hidden');
                        beerButtonsSection.find('.like').addClass('hidden');
                        beerButtonsSection.find('.liked').removeClass('hidden');
                        var previousLikesCountVal = $(".beers-likes-count").html();
                        var newLikesCountVal = parseInt(previousLikesCountVal) + 1;
                        $(".beers-likes-count").html(newLikesCountVal);
                    }
                });
        });

        $('.unlike-beer-button').on('click', function (e) {
            e.preventDefault();

            var beerButtonsSection = $(this).closest('.beer-buttons');
            $.post(
                $(this).attr('href'),
                {
                    timeline_id: $(this).data('timeline-id'),
                    _token: $('[name="csrf_token"]').attr('content')
                },
                function (data) {
                    if (data.status === 200) {
                        // beerButtonsSection.find('.like').parent().removeClass('hidden');
                        // beerButtonsSection.find('.liked').parent().addClass('hidden');
                        beerButtonsSection.find('.like').removeClass('hidden');
                        beerButtonsSection.find('.liked').addClass('hidden');
                        var previousLikesCountVal = $(".beers-likes-count").html();
                        var newLikesCountVal = parseInt(previousLikesCountVal) - 1;
                        $(".beers-likes-count").html(newLikesCountVal);
                    }
                });
        });
    </script>
@endsection