@extends('layouts.app')
@section('title')
    {{ 'News Feeds' }}
@endsection
@push('styles')
    <style>
/* CSS code for horizontal rule */
    hr {
        border: 1px solid #ccc; /* Set border with grey color */
        height: 1px;
        margin: 20px 0; /* Add spacing above and below */
    }
    .preview{
        display: none;
    }
    </style>
@endpush
@section('content')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">{{ isset($newsFeedDetails->id) ? 'Update' : 'Create' }} News Feed</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    @if (Auth::user()->role_id == 1)
                        <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
                    @else
                        <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
                    @endif
                </li>
                <li class="breadcrumb-item active" aria-current="page"><a
                        href="javascript:void(0);">{{ isset($newsFeedDetails->id) ? 'Update' : 'Create' }} News Feed</a></li>
            </ol>
        </div>
    </div>
    <!-- breadcrumb -->
    @include('layouts.message')
    <div class="row row-sm">
        <div class="col-lg-12 col-md-12 col-md-12">
            <form action = "{{ route('news-feeds.store') }}" method="post" enctype="multipart/form-data" id="feed_form">
                @csrf
                <div class="card blog-edit">
                    @if (isset($newsFeedDetails))
                        <input type="hidden" name="id" value="{{ $newsFeedDetails->id }}">
                    @endif
                    <div class="card-body">
                        <div class="form-group">
                            <label class="form-label text-dark">Title</label>
                            <input type="text" class="form-control" name="title"
                                value = "{{ $newsFeedDetails->title ?? old('title') }}">
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea type="text" id="description" name="description" class="form-control content5">{{ $newsFeedDetails->description ?? old('description') }}</textarea>
                                    <label id="content-error" class="error" for="description"></label>
                                </div>
                            </div>
                        </div>
                        @php
                            $contentUrl =
                                isset($newsFeedDetails) && $newsFeedDetails->content ? $newsFeedDetails->content : null;
                        @endphp
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="content" class="form-label">Media Content</label>
                                    <input id="demo" type="file" name="content" class="dropify"
                                        data-allowed-file-extensions="jpg jpeg png mp4 doc docx pdf"
                                        @if ($contentUrl) data-default-file="{{ $contentUrl }}" @endif
                                        data-parsley-errors-container="#slider-image-error" data-parsley-required="true">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="description2" class="form-label">Criteria</label>
                                    <div class=" border p-3 rounded-7">
                                        <div class="d-md-flex ad-post-details">
                                            <label class="custom-control form-radio  mb-0 me-4">
                                                <input type="radio" class="custom-control-input" name="crtieria"
                                                    value="affiliate"
                                                    {{ isset($newsFeedDetails) && $newsFeedDetails->criteria ? ($newsFeedDetails->criteria == 'affiliate' ? 'checked' : '') : 'checked' }}>
                                                <span class="custom-control-label">Affiliate</span>
                                            </label>
                                            <label class="custom-control form-radio  mb-0 me-4">
                                                <input type="radio" class="custom-control-input" name="crtieria"
                                                    value="public"
                                                    {{ isset($newsFeedDetails) && $newsFeedDetails->criteria ? ($newsFeedDetails->criteria == 'public' ? 'checked' : '') : '' }}>
                                                <span class="custom-control-label">Public</span>
                                            </label>
                                            <label class="custom-control form-radio  mb-0 me-4">
                                                <input type="radio" class="custom-control-input" name="crtieria"
                                                    value="other"
                                                    {{ isset($newsFeedDetails) && $newsFeedDetails->criteria ? ($newsFeedDetails->criteria == 'other' ? 'checked' : '') : '' }}>
                                                <span class="custom-control-label">Other</span>
                                            </label>
                                        </div>
                                        <div class="criteria_details"
                                            @if (!empty($industry) || !empty($busienss_owner_groups)) style="display: block" @else style="display: none" @endif>
                                            <div class="form-group mt-3">
                                                <label class="form-label">Business Ownership Groups</label>
                                                <select class="form-control form-select select2" id="busienss_owner_groups"
                                                    name="busienss_owner_groups">
                                                    <option></option>
                                                    @foreach ($businessOwnershipGroups as $group)
                                                        <option value="{{ $group['id'] }}"
                                                            {{ isset($busienss_owner_groups) && $busienss_owner_groups == $group['id'] ? 'selected' : '' }}>
                                                            {{ $group['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group mt-2">
                                                <label class="form-label">Industry</label>
                                                <select class="form-control form-select select2" id="industry"
                                                    name="industry">
                                                    <option></option>
                                                    @foreach ($BusinessIndustryTypeCategories as $categorie)
                                                        <option value="{{ $categorie['id'] }}"
                                                            {{ isset($industry) && $industry == $categorie['id'] ? 'selected' : '' }}>
                                                            {{ $categorie['name'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        @if (Auth::user()->hasRole('admin'))
                                            <div class="form-group mt-2">
                                                <label class="form-label">News Feed Status</label>
                                                <select name="status" id="status"
                                                    class="form-control select form-select">
                                                    <option></option>
                                                    <option value="pending"
                                                        {{ isset($newsFeedDetails) && $newsFeedDetails->status ? ($newsFeedDetails->status == 'pending' ? 'selected' : '') : '' }}>
                                                        Pending</option>
                                                    <option value="published"
                                                        {{ isset($newsFeedDetails) && $newsFeedDetails->status ? ($newsFeedDetails->status == 'published' ? 'selected' : '') : '' }}>
                                                        Published</option>
                                                </select>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row preview">
                            <label class="form-label">Preview</label>
                            <div class="content_preview" style="text-align: center">

                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary float-end ml-2" style="margin-left: 13px;">Publish Now</button>
                        <button type="button" class="btn btn-danger float-end" id="cancelBtn">Cancel</button>&nbsp;&nbsp;
                    </div>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        <!--Internal Fileuploads js-->
        <script src="{{ asset('assets/plugins/fileuploads/js/fileupload.js') }}"></script>
        <script src="{{ asset('assets/plugins/fileuploads/js/file-upload.js') }}"></script>
        <script src="{{ asset('assets/plugins/wysiwyag/wysiwyag.js') }}"></script>
        <script>
            $(document).ready(function(){
                showPreview();
                function showPreview()
                {
                    let demo = $('#demo').data('default-file');
                    if (demo != 'undefined' && demo != null && demo.indexOf(".mp4") !== -1) {
                        $('.preview').show();
                        $('.content_preview').html('<video style="height: 80%; width: 50%;" controls><source src="' + demo + '" type="video/mp4"></video>');
                    }
                }
                // Custom function to handle file previews
                function handleFile(file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        if (file.type.match(/video.*/)) {
                            $('.preview').show();
                            // If it's a video file, display video preview
                            $('.content_preview').html('<video style="height: 80%; width: 50%;" controls><source src="' + e.target.result + '" type="' + file.type + '"></video>');
                        } else{
                            $('.preview').hide();
                        }
                    };
                    reader.readAsDataURL(file);
                }
                // Handle file selection event
                $('.dropify').on('change', function() {
                    var files = this.files;
                    if (files.length > 0) {
                        handleFile(files[0]);
                    }
                });
            });
            $("#busienss_owner_groups").select2({
                placeholder: "Select Business Ownership Groups",
            });
            $("#industry").select2({
                placeholder: "Select Industry",
            });
            $("#status").select2({
                placeholder: "Select status",
            });
            $("input[name$='crtieria']").click(function() {
                let criteria_type = $(this).val();
                if (criteria_type == 'other') {
                    $(".criteria_details").show();
                } else {
                    $(".criteria_details").hide();
                }
            });
            $('#feed_form').validate({
                rules: {
                    title: {
                        required: true,
                    },
                    description: {
                        required: true,
                    },
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            $("#cancelBtn").click(function() {
                window.location.href = "{{ route('news-feeds.index') }}";
            });
            
        </script>
        
    @endpush
@endsection