@extends('layouts.admin.main')

@section('content')
<div class="mb-3">
    <h1 class="h3 d-inline align-middle">Media</h1>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    <a href="{{ route('admin.contents.media.index') }}" class="btn btn-secondary"><i class="align-middle me-2" data-feather="table"></i>Daftar Media</a>
                </div>
                <h4 class="card-title mb-0">Tambah Media Baru</h4>
            </div>
            <div class="card-body">
                <form id="form-create-media" action="{{ route('admin.contents.media.store') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                    @csrf

                    <div class="row mb-3">
                        <div class="col-md-4 col-12 form-group">
                            <label for="file" class="form-label">File</label>
                            <input type="file" class="form-control @error('file') is-invalid @enderror" id="file" name="file"
                                accept="image/*, video/*, audio/*">
                            @error('file')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 col-12 form-group">
                            <label for="alt" class="form-label">Alt</label>
                            <input type="text" class="form-control @error('alt') is-invalid @enderror" id="alt" name="alt" value="{{ old('alt') }}">
                            @error('alt')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 col-12 form-group">
                            <label for="caption" class="form-label">Caption</label>
                            <input type="text" class="form-control @error('caption') is-invalid @enderror" id="caption" name="caption" value="{{ old('caption') }}">
                            @error('caption')
                            <div class="error invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <button type="reset" class="btn btn-secondary mt-3"><i class="align-middle me-2" data-feather="refresh-ccw"></i>Reset</button>
                    <button type="submit" class="btn btn-success mt-3"><i class="align-middle me-2" data-feather="save"></i>Simpan</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.22.1/jquery.validate.min.js" integrity="sha512-aK+gwLBXdXY6QDrdpK6jYtTlIfzChVNqAh3V6D5c8nV8U9O5NvC/EJ44aAKj9moRsx7bAibHZbX0wvblVp8wSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.22.1/additional-methods.min.js" integrity="sha512-prU59crmDRtArYh698UgT9nZVsFz3aIU7hIwvWT6iUKM5CvlWzZU6ATd/yO9lbrV7ie5WoGGJrifw6vWqppmJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function() {
        $("#form-create-media").validate({
            rules: {
                file: { required: true, accept: "image/*, video/*, audio/*" },
                alt: { maxlength: 255 },
                caption: { maxlength: 255 },
            },
            messages: {
                file: { required: "File harus diunggah.", accept: "File harus berupa gambar, video, atau audio." },
                alt: { maxlength: "Alt maksimal 255 karakter." },
                caption: { maxlength: "Caption maksimal 255 karakter." },
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush