[ Avaa Bypassed ]

@extends('admin.layout.app')
@section('title', 'Add News/Podcast')
@push('custom_css')
    <link rel="stylesheet" href="{{ asset('assets/js/loader/waitMe.css') }}">
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Add News & Podcasts</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Add News & Podcasts</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header align-items-center d-flex">
            <h4 class="card-title mb-0 flex-grow-1">Add News & Podcasts</h4>
        </div><!-- end card header -->

        <div class="card-body">
            <form method="post" data-post-uri="{{route('admin.news_podcasts.store')}}" id="podcast_form" data-type="add">
                <div class="row gy-4 mb-3">
                    <div class="col-md-6">
                        <div>
                            <label for="placeholderInput" class="form-label">Type</label>
                            <select class="form-select mb-3" aria-label="Default select example" name="type"
                                    id="select_type">
                                <option value="1">News</option>
                                <option value="2">Podcasts</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div>
                            <label for="placeholderInput" class="form-label">Headline</label>
                            <input type="text" class="form-control" placeholder="Enter headline" name="title">
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <div id="audio_area">

                </div>

                <div>
                    <div>
                        <label for="placeholderInput" class="form-label">Description</label>
                        <textarea id="editor"></textarea>
                    </div>
                </div>

                <div class="mt-3">
                    <button type="submit" class="btn btn-primary news_btn" id="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('custom_scripts')
    <script src="{{ asset('assets/js/loader/waitMe.js') }}"></script>
    <script src="{{asset('assets/js/custom/news_podcasts.js')}}"></script>

    <script>
        $("#select_type").on('change', function () {
            if ($(this).val() == 2) {
                $('#audio_area').html('<div class="row gy-4 align-items-end d-flex mb-3"> ' +
                    '<div class="col-md-12"> <div> <label for="placeholderInput" class="form-label">Upload Audio</label> ' +
                    '<input class="form-control" type="file" accept="audio/*" id="audio">' +
                    ' <input class="form-control" type="text" name="audio_file" hidden> ' +
                    '</div> ' +
                    '</div> ' +
                    '</div>')

                $('#audio').on('change', function () {
                    getBase64($(this)[0].files[0]).then(
                        data => $('input[name="audio_file"]').val(data)
                    )
                })
            } else $('#audio_area').html('')
        })

    </script>
@endpush