@extends('admin.layout')

@section('title', $album->exists ? 'Edit Album' : 'Tambah Album')

@section('content')
    <div class="card">
        <div class="card-body">
        <form method="post" action="{{ $album->exists ? route('dashboard.albums.update', $album) : route('dashboard.albums.store') }}">
            @csrf
            @if ($album->exists)
                @method('put')
            @endif

            <div class="mb-3">
                <label class="form-label">Title</label>
                <input id="album-title" class="form-control" type="text" name="title" value="{{ old('title', $album->title) }}" required>
                @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Seo Title</label>
                <input id="album-seotitle" class="form-control" type="text" name="seotitle" value="{{ old('seotitle', $album->seotitle) }}" readonly>
                @error('seotitle')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3 form-check">
                <input class="form-check-input" type="checkbox" name="active" value="1" id="active" {{ old('active', $album->active ?? true) ? 'checked' : '' }}>
                <label class="form-check-label" for="active">Active</label>
            </div>

            <button type="submit" class="btn btn-primary">Simpan</button>
            <a href="{{ route('dashboard.albums.index') }}" class="btn btn-outline-secondary">Kembali</a>
        </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            var $title = $('#album-title');
            var $slug = $('#album-seotitle');

            if (!$title.length || !$slug.length) {
                return;
            }

            var slugify = function (text) {
                text = (text || '').toString();
                try {
                    text = text.normalize('NFKD').replace(/[\u0300-\u036f]/g, '');
                } catch (e) {}

                return text
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/^-+|-+$/g, '')
                    .replace(/-+/g, '-');
            };

            var syncSlug = function () {
                $slug.val(slugify($title.val()));
            };

            $title.on('input', syncSlug);
            syncSlug();
        });
    </script>
@endpush