@extends('layouts.admin-layout')
@section('title') Edit About Detail @endsection

@section('content')
    <style>
        .active {
            background-color: #007BFF !important;
            color: white !important;
        }
        /* Disable right-click */
        .no-right-click {
            pointer-events: none;
        }
        .no-right-click embed {
            pointer-events: auto;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-box-shadow mt-5">
                            <div class="card-header">
                                <h3 class="card-title">Edit About Detail</h3>
                                <a href="{{ route('admin.about.detail.list') }}" class="btn btn-primary btn-sm float-right">Back</a>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{ route('admin.about.detail.update', ['id' => $find_about_category->id]) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="cate_id" value="{{ $find_about_category->id ?? '' }}">

                                    <div class="col-md-12 mt-4">
                                        <div class="form-group">
                                            <label for="name">Category</label>
                                            <input type="text" class="form-control" placeholder="{{$find_about_category->title ?? ''}}" readonly style="min-height: 50px;padding: 14px;border-radius: 20px;">
                                        </div>
                                        <div>
                                            <button type="button" class="btn btn-success float-right addNewForm">Add Another PDF</button>

                                        </div>
                                    </div>

                                    <br>
                                    <br>
                                    <br>
                                    <div class="form-sections">
                                        @if(count($find_about_category_detail) > 0)
                                            @foreach($find_about_category_detail as $index => $detail)
                                                <div class="row form-section" id="formSection{{ $index }}">
                                                    <div class="col-md-12 mt-3">
                                                        <button type="button" class="btn btn-danger float-right" onclick="removeFormSection(this)" data-get-remove-section="{{ $detail->id }}">Remove</button>
                                                    </div>
                                                    <div class="col-md-6 mt-4">
                                                        <div class="form-group">
                                                            <label for="title[]">PDF Title:</label>
                                                            <input type="text" name="title[]" class="form-control form__field" value="{{ $detail->title ?? '' }}">
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="figure_id[]" value="{{ $detail->id }}">
                                                    <div class="col-md-6 mt-4">
                                                        <div class="form-group">
                                                            <label for="pdfFileInput{{ $index }}">Change PDF File:</label>
                                                            <input type="file" class="form-control form__field visually-hidden" name="add_pdf_file[]" id="pdfFileInput{{ $index }}" accept="application/pdf">
                                                            <label for="pdfFileInput{{ $index }}" class="file-input-label form__field form-control">
                                                                <i class="fas fa-camera"></i> Choose file
                                                            </label>
                                                        </div>
                                                        <div id="pdfFilePreview{{ $index }}" class="no-right-click" style="margin-top:10px;">
                                                            <embed src="{{$detail->aboutFile('add_pdf_file') }}" type="application/pdf" class="card-img-top profilePicPreview" style="height:300px; width: 300px;" />
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row form-section" id="formSection0">
                                                <div class="col-md-6 mt-4">
                                                    <div class="form-group">
                                                        <label for="title[]">PDF Title:</label>
                                                        <input type="text" name="title[]" class="form-control form__field" placeholder="Enter PDF Title">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mt-4">
                                                    <div class="form-group">
                                                        <label for="pdfFileInput0">Add PDF File:</label>
                                                        <input type="file" name="add_pdf_file[]" accept="application/pdf" class="form-control form__field visually-hidden" id="pdfFileInput0">
                                                        <label for="pdfFileInput0" class="file-input-label form__field form-control">
                                                            <i class="fas fa-camera"></i> Choose file
                                                        </label>
                                                    </div>
                                                    <div id="pdfFilePreview0" class="no-right-click" style="margin-top:10px;">
                                                        <embed src="{{ asset('upload/No-Image.png') }}" type="application/pdf" class="card-img-top profilePicPreview" style="height:300px; width:300px;" />
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Submit -->
                                    <div class="col-md-6 mx-auto mt-5">
                                        <div class="form-group">
                                            <input type="submit" class="form-control btn btn-primary btn-sm" value="Submit">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <script>
        var formCount = {{ count($find_about_category_detail) > 0 ? count($find_about_category_detail) : 0 }};

        function removeFormSection(button) {
            var sectionId = $(button).data('get-remove-section');
            var removeSectionInput = $('<input>').attr({
                type: 'hidden',
                name: 'remove_section[]',
                value: sectionId
            });
            $('form').append(removeSectionInput);
            $(button).closest('.form-section').remove();
        }

        function showFilePreview(input, previewId) {
            var file = input.files[0];
            var previewElement = document.getElementById(previewId);

            if (file) {
                var fileType = file.type;
                var reader = new FileReader();

                reader.onload = function (e) {
                    if (fileType === "application/pdf") {
                        previewElement.innerHTML = `<embed src="${e.target.result}" type="application/pdf" style="height:300px; width:300px;" />`;
                    } else {
                        previewElement.innerHTML = `<img src="${e.target.result}" alt="File Preview" style="height:300px; width:300px;" />`;
                    }
                };
                reader.readAsDataURL(file);
            } else {
                previewElement.innerHTML = '';
            }
        }

        $(document).on('change', 'input[type="file"]', function () {
            var previewId = $(this).attr('id').replace('pdfFileInput', 'pdfFilePreview');
            showFilePreview(this, previewId);
        });

        $(document).on('click', '.addNewForm', function () {
            formCount++;
            var newFormSection = `
                <div class="row form-section mb-4 mt-4" id="formSection${formCount}">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-danger float-right" onclick="removeFormSection(this)">Remove</button>
                    </div>
                    <div class="col-md-6 mt-4">
                        <div class="form-group">
                            <label for="title[]">PDF Title:</label>
                            <input type="text" name="title[]" class="form-control form__field" placeholder="Enter PDF Title">
                        </div>
                    </div>
                    <div class="col-md-6 mt-4">
                        <div class="form-group">
                            <label for="pdfFileInput${formCount}">Add PDF File:</label>
                            <input type="file" class="form-control form__field visually-hidden" name="add_pdf_file[]" id="pdfFileInput${formCount}" accept="application/pdf">
                            <label for="pdfFileInput${formCount}" class="file-input-label form__field form-control">
                                <i class="fas fa-camera"></i> Choose file
                            </label>
                        </div>
                        <div id="pdfFilePreview${formCount}" class="no-right-click" style="margin-top:10px;">
                            <embed src="{{ asset('upload/No-Image.png') }}" type="application/pdf" style="height:300px; width:300px;" />
                        </div>
                    </div>
                </div>`;
            $('.form-sections').append(newFormSection);
        });

        @foreach($find_about_category_detail as $index => $detail)
        document.getElementById('pdfFileInput{{ $index }}').addEventListener('change', function () {
            showFilePreview(this, 'pdfFilePreview{{ $index }}');
        });
        @endforeach

        $('#summernote1').summernote({
            placeholder: 'Hello Admin',
        });
    </script>
@endsection