@section('title', $title)
@push('css_file')
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css" />
@endpush
<x-app-layout>
    <x-slot name="header_link">
        <a href="/dashboard">Dashboard</a>
    </x-slot>

    <x-slot name="header_sub_link">
        <a href="javascript:history.back();">Daftar Berita</a>
    </x-slot>

    <x-slot name="header_parent">
        @yield('title')
    </x-slot>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-sm-flex align-items-center justify-content-between">
                        <h5 class="mb-0">@yield('title')</h5>
                        <div>
                            <a href="javascript:history.back();" class="btn btn-outline-secondary">Kembali</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="/berita/post" method="post" class="formSubmit" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <x-input-label value="Judul" required="true" for="title" />
                                    <x-text-input type="text" required name="title" id="title"
                                        placeholder="Isi judul berita" />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Kata Kunci Berita (Meta) (opsional)" required=""
                                        for="keywords" />
                                    <x-text-input type="text" name="keywords" id="keywords"
                                        placeholder="Isi lata kunci berita disini ..." />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Deskripsi Singkat Berita (Meta) (opsional)" required=""
                                        for="description" />
                                    <textarea name="description" id="description" class="form-control" cols="20" rows="5" maxlength="500"
                                        placeholder="Tulis deskripsi singkat disini..."></textarea>
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Konten" required="true" for="title" />
                                    <textarea id="content" name="content" rows="3" placeholder="Isi konten disini"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="mb-3">
                                    <x-input-label value="Kategori" required="true" for="categoryId" />
                                    <select class="form-select" data-trigger name="categories[]" id="categoryId"
                                        required multiple>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Tagar Berita (opsional)" required="" for="tagId" />
                                    <input type="text" name="tags" id="tagId"
                                        placeholder="Isi tagar berita disini ..." />
                                </div>
                                <div class="mb-3">
                                    <x-input-label value="Status Publikasi" required="true" for="status" />
                                    <select class="form-select" name="status" id="status">
                                        @foreach ($status as $item)
                                            <option value="{{ $item }}">{{ $item }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Tanggal Publikasi" required="true" for="published_at" />
                                    <x-text-input type="text" name="published_at" id="published_at" required
                                        placeholder="Isi tanggal publikasi berita" />
                                </div>

                                <hr>

                                <div class="mb-3">
                                    <label class="mb-3 d-block text-muted">Tentukan gambar yang ingin dipublikasi, klik
                                        checkbox di bawah untuk berpindah ke mode share link gambar.</label>
                                    <div class="mb-3 form-check form-switch custom-switch-v1 form-check-inline">
                                        <input type="checkbox" class="form-check-input input-primary"
                                            id="uploadTypeCheckbox" checked="checked">
                                        <label class="form-check-label" for="uploadTypeCheckbox">Opsi Upload
                                            Gambar</label>
                                    </div>
                                </div>

                                <input type="hidden" name="type_upload" id="uploadType" value="file">

                                <div id="uploadImageContainer">
                                    <div class="mb-3">
                                        <x-input-label value="Upload Gambar" required="" for="image" />
                                        <x-text-input name="image" id="image" type="file"
                                            accept="image/jpg,image/jpeg,image/png,image/svg" />
                                        <small class="text-info">Ukuran maksimal gambar yang dapat diupload
                                            2MB.</small>
                                    </div>

                                    <img src="{{ asset('img/img-not-found.png') }}" alt="image-post"
                                        class="mb-3 img-post wid-145" id="img-post">

                                </div>

                                <div class="mb-3" id="ImageUrlContainer" style="display: none;">
                                    <x-input-label
                                        value="Link Gambar (anda dapat mengambil link gambar dipenyimpanan cloud seperti google drive)"
                                        required="" for="img_url" />
                                    <x-text-input type="url" name="img_url" id="img_url"
                                        placeholder="Isi url gambar ..." />
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Status" required="true" for="status" />
                                    @foreach ($isActive as $item => $value)
                                        <div class="form-check">
                                            <input type="radio" class="form-check-input"
                                                id="formCheck-{{ $item + 1 }}" name="is_active"
                                                value="{{ $item }}" required />
                                            <label class="form-check-label"
                                                for="formCheck-{{ $item + 1 }}">{{ $value }}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-12 text-end">
                                <x-primary-button>Simpan Berita</x-primary-button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Main Content ] end -->
    @include('admin.apps.berita.includes.action_js')
    @include('admin.apps.berita.includes.kategori_select_add_js')
</x-app-layout>