kfhXD2A0

1@extends('layouts.template')
2
3@section('title', $record->title)
4
5@section('main')
6    <h1>{{ $record->title }}</h1>
7    <div class="row">
8        <div class="col-sm-4 text-center">
9            <img class="img-thumbnail" id="cover" src="/assets/vinyl.png" data-src="{{ $record->cover }}"
10                 alt="{{ $record->title }}">
11            <p>
12                <a href="#!" class="btn {{ $record->btnClass }} btn-sm btn-block mt-3
13                 {{ $record->stock == 0 ? 'disabled' : '' }}">
14                    <i class="fas fa-cart-plus mr-3"></i>Add to cart
15                </a>
16            </p>
17            <p class="text-left">Genre: {{ $record->genreName }}<br>
18                Stock: {{ $record->stock }}<br>
19                Price: € {{ number_format($record->price,2) }}</p>
20        </div>
21        <div class="col-sm-8">
22            <table class="table table-sm">
23                <thead>
24                <tr>
25                    <th scope="col">#</th>
26                    <th scope="col">Track</th>
27                    <th scope="col">Length</th>
28                </tr>
29                </thead>
30                <tbody>
31
32                </tbody>
33            </table>
34        </div>
35    </div>
36@endsection
37
38@section('script_after')
39    <script>
40        $(function () {
41            // Replace vinyl.png with real cover
42            $('#cover').attr('src', $('#cover').data('src'));
43            // Get tracks from MusicBrainz API
44            $.getJSON('{{ $record->recordUrl }}')
45                .done(function (data) {
46                    console.log(data);
47                    // loop over each track
48                    $.each(data.media[0].tracks, function (key, value) {
49                        // Construct a table row
50                        let row = `<tr>
51                <td>${value.position}</td>
52                <td>${value.title}</td>
53                 <td>${vinylShop.to_mm_ss(value.recording.length)}</td>
54            </tr>`;
55                        // Append the row to the tbody tag
56                        $('tbody').append(row);
57                    });
58                })
59                .fail(function (error) {
60                    console.log("error", error);
61                })
62        });
63
64    </script>
65@endsection