@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')
       
    

        <div class="row">

            <div class="col-12">
                <div class="card">
                  
                    <div class="card-body">

                        @include('elements.alert-error')


                        <form action="{{ isset($chapterdocument) ? route('admin.chapter_document.update', $chapterdocument->id) : route('admin.chapter_document.store') }}" id="chapter_documnet_form" method="POST" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
                            @csrf
                            @if (isset($chapterdocument))
                                @method('PUT')
                            @endif

                            <input type="hidden" name="chapter_id" id="chapter_id" value="{{ $chapter_id }}" />

                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#master" data-bs-toggle="tab" aria-expanded="false" class="nav-link active"
                                        aria-selected="true" role="tab">
                                        General
                                    </a>
                                </li>
                                @foreach (config('translatable.locales') as $locale => $language)
                                    <li class="nav-item" data-target-form="#profileForm">

                                        <a href="#{{ $locale }}" data-bs-toggle="tab" aria-expanded="true"
                                            class="nav-link" aria-selected="false" role="tab" tabindex="-1">

                                            {{ucfirst($language) }}
                                        </a>
                                    </li>
                                @endforeach

                            </ul>

                            <div class="tab-content mb-0 b-0">
                                <div class="tab-pane active show" id="master">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="sr_no">Serial Number</label>
                                                <div class="col-6">
                                                    <input type="text" class="form-control" id="sr_no" name="sr_no" placeholder="Serial Number" value="{{ old('sr_no', isset($chapterdocument) ? $chapterdocument->sr_no : '') }}">
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="images">Images</label>
                                                
                                                <div class="col-6">
                                                    <input type="file" class="form-control mt-2" id="images" name="images" accept="image/*">
                                                </div>
                                                <div class="col-3">
                                                    @if(isset($chapterdocument) && $chapterdocument->images)
                                                            <a href="{{ asset('storage/' . $chapterdocument->images) }}" target="_blank" class="btn btn-sm btn-primary" style="margin-top: 12px;">View</a>
                                                           
                                                    @else
                                                       
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="pdf">PDF</label>
                                                <div class="col-6">
                                                    <input type="file" class="form-control" id="pdf" name="pdf" accept="application/pdf">
                                                   
                                                </div>
                                                <div class="col-3">
                                                    @if(isset($chapterdocument) && $chapterdocument->pdf)
                                                    <div>
                                                        <a href="{{ asset('storage/' . $chapterdocument->pdf) }}" target="_blank" class="btn btn-sm btn-primary">View</a>
                                                       
                                                    </div>
                                                @else
                                                 
                                                @endif

                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="audio">Audio</label>
                                                <div class="col-6">
                                                    <input type="file" class="form-control" id="audio" name="audio" accept="audio/*">
                                                   
                                                </div>
                                                <div class="col-3">
                                                    @if(isset($chapterdocument) && $chapterdocument->audio)
                                                    <div>
                                                        <a href="{{ asset('storage/' . $chapterdocument->audio) }}" target="_blank" class="btn btn-sm btn-primary">View</a>
                                                      
                                                    </div>
                                                @else
                                                 
                                                @endif
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="video">Video</label>
                                                <div class="col-6">
                                                    <input type="file" class="form-control" id="video" name="video" accept="video/*">
                                                   
                                                </div>
                                                <div class="col-3">
                                                    @if(isset($chapterdocument) && $chapterdocument->video)
                                                    <div>
                                                        <a href="{{ asset('storage/' . $chapterdocument->video) }}" target="_blank" class="btn btn-sm btn-primary">View</a>
                                                        
                                                    </div>
                                                @else
                                                    
                                                @endif
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="status">Status</label>
                                                <div class="col-6">
                                                    <div class="form-check form-switch">
                                                        <input type="checkbox" class="form-check-input" id="customSwitch1" name="status" value="1" {{ old('status', $chapterdocument ? $chapterdocument->status : 1) == 1 ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="customSwitch1">Active</label>
                                                    </div>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                                @foreach (config('translatable.locales') as $locale => $language)
                                <div class="tab-pane fade" id="{{ $locale }}">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="title_{{ $language }}">Title</label>
                                                <div class="col-6">
                                                    <input type="text" class="form-control" id="title_{{ $language }}" name="title[{{ $language }}]" placeholder="Title" value="{{ old('title.'.$language, !empty($chapterdocument) ? $chapterdocument->getTranslation('title', $language) : '') }}">
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <label class="col-3 col-form-label" for="descriptions_{{ $language }}">Description</label>
                                                <div class="col-6">
                                                   <!-- Snow editor container -->
<div id="snow-editor" style="height: 300px;">
    <!-- Quill editor content will be initialized here -->
</div>

<!-- Hidden input field to store Quill editor content -->
<input type="hidden" id="descriptions_hidden_{{ $language }}" name="descriptions[{{ $language }}]" value="{{ old('descriptions.'.$language, !empty($chapterdocument) ? $chapterdocument->getTranslation('descriptions', $language) : '') }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>


                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit" value="add">{{ isset($chapter) ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.chapter_document.show',[$chapter_id]) }}" class="btn btn-outline-danger">Cancel</a>
                            </div>
                        </form>

                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col -->


        </div>
        <!-- end row -->
    </div>
@endsection

@section('scripts')

      <!-- Quill Editor js -->
      <script src="{{ asset('assets/vendor/quill/quill.min.js') }}"></script>
 
    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
    <script src="{{ asset('assets/vendor/validation/additional-methods.min.js') }}"></script>

   
    <script>
         $(document).ready(function() {
        // Initialize the Quill editor
        var quill = new Quill('#snow-editor', {
            theme: 'snow',
            modules: {
                'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }], ['link', 'image', 'video'], ['clean']]
            }
        });

        // Set initial content (if any) to the Quill editor
        var initialDescription = `{!! old('descriptions.'.$language, !empty($chapterdocument) ? $chapterdocument->getTranslation('descriptions', $language) : '') !!}`;
        
        quill.root.innerHTML = initialDescription;

        // Before form submission, sync the Quill editor content to the hidden input field
        $("#chapter_documnet_form").on('submit', function() {
            // Get the HTML content of the Quill editor
            var descriptionContent = quill.root.innerHTML;
            // Set the hidden input field with the content
            $("#descriptions_hidden_{{ $language }}").val(descriptionContent);
        });
    });
          $(document).ready(function() {
            var rules = {

                sr_no: {
                required: true,
                digits: true
            },
               
           

                @foreach (config('translatable.locales') as $locale => $language)
                    "title[{{ $language }}]": {
                        required: true
                    },
                    "descriptions[{{ $language }}]": {
                        required: true
                    },
                @endforeach
            };

            var messages = {
                sr_no: {
                required: "Serial number is required",
                digits: "Please enter a valid serial number"
            },
               
          

                @foreach (config('translatable.locales') as $locale => $language)
                    "title[{{ $language }}]": {
                        required: "Title ({{ $language }}) is required"
                    },
                    "descriptions[{{ $language }}]": {
                        required: "Description ({{ $language }}) is required"
                    },
                @endforeach
            };



            $("#chapter_documnet_form").validate({
                rules: rules,
                messages: messages,
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');
                    error.insertAfter(element);

                    // Display the box alert with error messages
                    let errorMessages = [];
                    $('#chapter_documnet_form').find('.invalid-feedback').each(function() {
                        errorMessages.push($(this).text());
                    });
                    if (errorMessages.length > 0) {
                        $('#error_messages').html(errorMessages.join('<br>')).show();
                    }
                },
                highlight: function(element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-valid').removeClass('is-invalid');
                }
            });
        });
    </script>

    @endsection