@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-3 mb-sm-0">{{ $post->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/update" method="post" class="formSubmit" enctype="multipart/form-data">
                        @csrf
                        @method('put')
                        <input type="hidden" name="id" value="{{ $post->id }}" readonly>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <x-input-label value="Judul" required="true" for="title" />
                                    <input type="text" class="form-control" required name="title" id="title"
                                        value="{{ $post->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 ..." value="{{ $post->keywords }}" />
                                </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="100"
                                        placeholder="Tulis deskripsi singkat disini...">{!! $post->description !!}</textarea>
                                </div>

                                <div class="mb-3">
                                    <x-input-label value="Konten" required="" for="title" />
                                    <textarea id="content" name="content" rows="3" placeholder="Isi konten disini">{!! $post->content !!}</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" name="categories[]" id="categoryId" multiple
                                        data-trigger required>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <x-input-label value="Tagar Berita" required="" for="tagId" />
                                    <input type="text" name="tags" id="tagId"
                                        placeholder="Isi tagar berita disini ..." value="{{ implode(',', $tag) }}" />
                                </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 }}"
                                                {{ $post->status == $item ? 'selected' : '' }}>{{ $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" required name="published_at" id="published_at"
                                        placeholder="Isi tags berita disini ..." :value="\Carbon\Carbon::parse($post->published_at)->format('Y-m-d H:i')" />
                                </div>

                                <hr>

                                <div class="mb-3">
                                    <label class="d-block text-muted">Tentukan gambar yang ingin di publis</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"
                                            {{ $post->type_upload == 'file' ? 'checked="checked"' : '' }}>
                                        <label class="form-check-label" for="uploadTypeCheckbox">Opsi Upload</label>
                                    </div>
                                </div>

                                <input type="hidden" name="type_upload" id="uploadType"
                                    value="{{ $post->type_upload }}">

                                <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="{{ $post->image != null ? asset($post->image) : asset('img/img-not-found.png') }}"
                                        alt="{{ $post->slug }}" 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 ..." :value="$post->img_url" />
                                </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
                                                {{ $post->is_active == $item ? 'checked' : '' }} />
                                            <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_edit_js')
</x-app-layout>