@extends('layouts.app-basic')

@section('content')
    <div class="container px-2">

        <!-- Logo di pojok kanan atas -->
        <img src="{{ asset('img/icon2.png') }}" class="logo" alt="Logo">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <!-- Judul -->
        <div class="report-title">
            <h4 style="font-size: 18px;font-weight:bold;">PENDAFTARAN KOMPOSISI LAGU KE PUBLISHING</h4>

        </div>
        <p>&nbsp;</p>
        <!-- Nomor & Tanggal Laporan -->
        <div class="mb-4">
            <table class="table" style="width: 100%; font-size: 13px;">
                <tbody>
                    <tr>
                        <th style="width: 35%; border: none;">Nomor</th>
                        <td style="border: none;">{{ $reportNumber }}</td>
                    </tr>
                    <tr>
                        <th style="width: 35%; border: none;">Tanggal Pengajuan</th>
                        <td style="border: none;">{{ date('d-m-Y') }}</td>
                    </tr>
                </tbody>
            </table>
        </div>



        <!-- Konten -->
        <div class="mb-4">
            <table class="table" style="width: 100%; font-size: 13px;">
                <tbody>
                    <tr>
                        <th style="width: 35%; border: none;">Nama KTP Pencipta Lagu</th>
                        <td style="border: none;"> {{ $song->creator->name ?? '-' }} </td>
                    </tr>
                    <tr>
                        <th style="width: 35%; border: none;">Judul Lagu</th>
                        <td style="border: none;">{{ $song->title ?? '-' }}</td>
                    </tr>
                    <tr>
                        <th style="width: 35%; border: none;">Lirik</th>
                        <td style="border: none;">
                            {!! nl2br(e($song->lyrics ?? '-')) !!}
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 35%; border: none;">Link Youtube</th>
                        <td style="border: none;">
                            @foreach ($song->links  as $item )
                                <div class="d-flex flex-column">
                                    <div class="mb-1">{{ $item->platform }}</div>
                                    <a href="{{ $item->link }}" target="_blank">{{ $item->link }}</a>
                                </div>
                            @endforeach
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 35%; border: none;">Jenis Kontrak</th>
                        <td style="border: none;">...........................................</td>
                    </tr>
                </tbody>
            </table>
        </div>




    </div>
@endsection
@push('styles')
    <style>
        body {
            font-size: 14px;
        }

        .logo {
            width: 150px;
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .report-title {
            margin-top: 50px;
            margin-bottom: 30px;
            text-align: center;
        }

        .report-section {
            margin-bottom: 15px;
        }
    </style>
@endpush