@extends('backoffice.template.app')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <nav style="--bs-breadcrumb-divider: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&quot;);"
        aria-label="breadcrumb" class="fs-5">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('backoffice.ebook') }}">Ebook</a></li>
            <li class="breadcrumb-item"><a class="text-primary">Tambah</a></li>
        </ol>
    </nav>
</div>

<div class="row">
    <div class="col-lg-9">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('backoffice.ebook.store') }}" method="POST" id="form-ebook-create"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="cover" class="form-label">Cover</label>
                        <input required type="file" class="dropify" name="cover">
                    </div>
                    <div class="mb-3">
                        <label for="file" class="form-label">File</label>
                        <input required type="file" class="dropify" name="file" data-allowed-file-extensions='["pdf"]'>
                    </div>
                    <div class="mb-3">
                        <label for="judul" class="form-label">Judul</label>
                        <input required type="text" class="form-control" name="judul">
                    </div>
                   
                    <div id="lokasi-form" class="mb-3 d-none">
                        <label for="lokasi" class="form-label">Lokasi</label>
                        <input  type="text" class="form-control" name="lokasi">
                    </div>
                    <div id="tanggal-form" class="mb-3 d-none">
                        <label for="tanggal" class="form-label ">Tanggal</label>
                        <input  type="date" class="form-control" name="tanggal">
                    </div>
                    <div class="mb-3">
                        <label for="kategori" class="form-label">Kategori</label>
                        <select class="form-select" aria-label="Default select example" required name="kategori_id">
                            <option selected disabled value="">Pilih Kategori</option>
                            @foreach ($categories as $c)
                            <option value="{{ $c->id }}">{{ $c->nama }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="deskripsi" class="form-label">Deskripsi</label>
                        <textarea row="4" col="50" class="form-control"  name="deskripsi"></textarea>
                    </div>

                </form>
            </div>
            <div class="card-footer">
                <button class="btn btn-primary w-100" type="submit" form="form-ebook-create">Simpan</button>
            </div>
        </div>
    </div>

</div>
@endsection
@section('script')
<script>
    $('.dropify').dropify({
        tpl: {
            message: '<div class="dropify-message"><span class="file-icon" /></div>',
        }
    });

</script>
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Sukses',
        text: "{{ session('success') }}",
    })

</script>
@elseif(session('error'))
<script>
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: "{{ session('success') }}",
    })

</script>
@endif

<script>
    $('#tipe').on('change', () => {
        $('#lokasi').val('')
        $('#tanggal').val('')
        if ($('#tipe').val() == 'edukasi') {
            $('#lokasi-form').addClass('d-none')
            $('#tanggal-form').addClass('d-none')
        } else {
            $('#lokasi-form').removeClass('d-none')
            $('#tanggal-form').removeClass('d-none')
        }
    })

</script>
@endsection