@extends('admin.layouts.master')

@section('title', 'Edit Track')

@section('content')
    @include('admin.partials.page-header', [
        'title' => 'Edit Track',
        'crumbs' => [
            ['label' => 'Playlist', 'url' => route('admin.playlist.index')],
            ['label' => 'Edit'],
        ],
    ])

    <div class="card mt-3">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.playlist.update') }}" enctype="multipart/form-data" id="playlistEditForm">
                @csrf
                <input type="hidden" name="id" value="{{ $track->track_id }}">
                <div class="mb-3">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control" value="{{ old('title', $track->title) }}">
                </div>
                <div class="mb-3">
                    <label class="form-label">Current File</label>
                    <p class="text-muted small mb-2">{{ $track->audio ?: 'No file' }}</p>
                    <label class="form-label">Replace Audio File (optional)</label>
                    <input type="file" name="audiofile" class="form-control" accept=".mp3,audio/mpeg">
                    <div class="form-text">MP3 only</div>
                </div>
                <button type="submit" class="btn btn-primary">Update</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(function () {
        $('#playlistEditForm').validate({
            rules: {
                title: { required: true },
                audiofile: { extension: 'mp3' }
            },
            messages: {
                audiofile: { extension: 'Only MP3 files are allowed' }
            }
        });
    });
</script>
@endpush