@extends('layout.master')
@section('content')
    <!-- Main Content-->
    <div class="main-content side-content pt-0">

        <div class="main-container container-fluid">
            <div class="inner-body">
                <!-- Page Header -->
                <div class="page-header">
                    <div>
                        <h2 class="main-content-title tx-24 mg-b-5">{{ $section->heading }}</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item"><a href="/category/list">Category</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Edit</li>
                        </ol>
                    </div>
                </div>
            </div>



            <div class="row row-sm">
                <div class="col-lg-12">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-body">
                            <div class="container">
                                <!-- @if (session('message'))
    -->
                                <div class="alert alert-success">
                                    <!-- {{ session('message') }}
    @endif -->


                                    <form method="post" action="{{ route('category.update', $Category->id) }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        @method('put')


                                        <div class="row">

                                            <div class="col-md-12 col-sm-12 mt-2 mb-2">
                                                <div class="mb-1 font-weight-semibold">Name</div>
                                                <input type="text" class="form-control" required name="name"
                                                    value="{{ $Category->name ?? 'null' }}"
                                                    placeholder="Enter Category Name">
                                            </div>

                                            <div class="form-group col-md-6">
                                                <div class="mb-1 font-weight-semibold">Image</div>
                                                <input type="file" class="form-control" name="image"
                                                    placeholder="Upload New Image">
                                                @if ($Category->image)
                                                    <div class="card mt-2">
                                                        <div class="card-body">
                                                            <div class="mb-3">
                                                                <img src="{{ $Category->image }}" alt="Category Image"
                                                                    style="max-width: 20%; height: auto;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-primary col-md-3" type="submit">Update</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function addRow(event) {
                event.preventDefault(); // Prevent the default button behavior
                var row = document.createElement('div');
                row.className = 'row ';
                row.innerHTML = `
            <div class="col-md-10 mt-4">
                <input class="form-control mb-3" name="image_name[]" type="text" value="">

                <input class="form-control " type="file" name="image[]" onchange="previewImage(event)">
            </div>
           
            <div class="col-md-2 mt-4">
                <button class="p-2 btn-save  removeRowBtn fa fa-minus"></button>
            </div>
            <div class="col-md-6">
                <img src="">
            </div>`;
                // Add event listener for the "-" button
                row.querySelector('.removeRowBtn').addEventListener('click', function() {
                    row.remove();
                });

                document.getElementById('rowContainer').appendChild(row);
            }

            function previewImage(event) {
                var input = event.target;
                var reader = new FileReader();
                reader.onload = function() {
                    var imgElement = input.closest('.row').querySelector('img');
                    imgElement.src = reader.result;
                }
                reader.readAsDataURL(input.files[0]);
            }

            // Add event listener for the initial "+" button
            document.getElementById('addRowBtn').addEventListener('click', addRow);

            // Add event listener for the initial "-" button
            document.querySelectorAll('.removeRowBtn').forEach(function(button) {
                button.addEventListener('click', function() {
                    this.closest('.row').remove();
                });
            });

            // Add previewImage event listener for initial file inputs
            document.querySelectorAll('input[type="file"]').forEach(function(input) {
                input.addEventListener('change', previewImage);
            });
        </script>

        <script>
            function addVideoRow(event) {
                event.preventDefault(); // Prevent the default button behavior
                var row = document.createElement('div');
                row.className = '';
                row.innerHTML = `
            <div class="">
                  
                <input class="form-control" type="text" name="video[]" onchange="updateHiddenInput(event)">
                <input type="hidden" name="video_ids[]">
            </div>
          <div class="row">
                                            <div class="col-md-12 w-100  mt-4 d-flex justify-content-end align-items-center">
                                                <button  class="col-md-1 btn p-2 btn-save fa fa-minus removeRowBtnVideo"></button>
                                            </div>
                                        </div>
           `;



                // Add event listener for the "-" button
                row.querySelector('.removeRowBtnVideo').addEventListener('click', function() {
                    row.remove();
                });

                document.getElementById('rowContainerVideo').appendChild(row);
            }

            // Add event listener for the initial "+" button
            document.getElementById('addRowBtnVideo').addEventListener('click', addVideoRow);

            // Add event listener for the initial "-" button
            document.querySelectorAll('.removeRowBtnVideo').forEach(function(button) {
                button.addEventListener('click', function() {
                    this.closest('.row').remove();
                });
            });
        </script>

        <script>
            function addRow(event) {
                event.preventDefault(); // Prevent the default button behavior
                var row = document.createElement('div');
                row.className = 'row mt-5';
                row.innerHTML = `
            <div class="col-md-12">
                 <div class="font-weight-semibold">Select</div>
                <select class="form-control mt-1" name="file_type[]">
                    <option label="Select"></option>
                    <option value="file">File</option>
                    <option value="assetimage">Image</option>
                    <option value="assetvideo">Video</option>
                </select>
            </div>
            <div class="col-md-12 mt-3">
                   <div class="font-weight-semibold mb-3"> File Name</div>
                <input class="form-control" name="file_name[]" type="text" value="">

                   <div class="font-weight-semibold mb-3"> Upload Document</div>
                <input type="file" name="file[]" class="form-control">
                <input type="hidden" name="file_ids[]">
            </div>
                <div class="row">
                                            <div class="col-md-12 w-100  mt-4 d-flex justify-content-end align-items-center">
                                                <button  class="col-md-1 btn p-2 btn-save fa fa-minus removeRowSelect"></button>
                                            </div>
                                        </div>
          
           `;



                // Add event listener for the "-" button
                row.querySelector('.removeRowSelect').addEventListener('click', function() {
                    row.remove();
                });

                document.getElementById('rowContainerSelect').appendChild(row);
            }

            // Add event listener for the initial "+" button
            document.getElementById('addRowBtnSelect').addEventListener('click', addRow);

            // Add event listener for the initial "-" button
            document.querySelectorAll('.removeRowSelect').forEach(function(button) {
                button.addEventListener('click', function() {
                    this.closest('.row').remove();
                });
            });
        </script>

        <script>
            function addField(event) {
                const template = document.querySelector('.template').cloneNode(true);
                template.classList.remove('template');

                const plusButton = template.querySelector('.fa-plus');
                if (plusButton) {
                    plusButton.remove();
                }

                const minusButton = document.createElement('a');
                minusButton.className = 'fa fa-minus btn-save ms-2';
                minusButton.setAttribute('onclick', 'removeField(event)');
                template.querySelector('.col-md-2').appendChild(minusButton);

                document.getElementById('dynamic-fields').appendChild(template);
            }

            function removeField(event) {
                const fieldSet = event.target.closest('.row');
                const totalRows = document.querySelectorAll('#dynamic-fields .row').length;
                if (totalRows > 1) {
                    fieldSet.remove();
                } else {
                    alert("At least one set of fields is required.");
                }
            }


            function addImageField(event) {
                const template = document.querySelector('.image-fields .image-template').cloneNode(true);
                template.classList.remove('image-template');

                const plusButton = template.querySelector('.fa-plus');
                if (plusButton) {
                    plusButton.remove();
                }

                const minusButton = document.createElement('a');
                minusButton.className = 'fa fa-minus btn-save mt-4';
                minusButton.setAttribute('onclick', 'removeImageField(event)');
                template.querySelector('.col-md-10').appendChild(minusButton);

                const lastImageField = document.querySelector('.image-fields .image-row:last-of-type');
                if (lastImageField) {
                    lastImageField.insertAdjacentElement('afterend', template);
                } else {
                    document.getElementsByClassName('image-fields').appendChild(template);
                }
            }

            function removeImageField(event) {
                const fieldSet = event.target.closest('.row');
                const totalRows = document.querySelectorAll('.image-fields .image-row').length;
                if (totalRows > 1) {
                    fieldSet.remove();
                }
            }

            function addVideoField(event) {
                const template = document.querySelector('#video-fields .video-template').cloneNode(true);
                template.classList.remove('video-template');

                const plusButton = template.querySelector('.fa-plus');
                if (plusButton) {
                    plusButton.remove();
                }

                const minusButton = document.createElement('a');
                minusButton.className = 'fa fa-minus btn-save mt-4';
                minusButton.setAttribute('onclick', 'removeVideoField(event)');
                template.querySelector('.col-md-10').appendChild(minusButton);

                const lastVideoField = document.querySelector('#video-fields .video-row:last-of-type');
                if (lastVideoField) {
                    lastVideoField.insertAdjacentElement('afterend', template);
                } else {
                    document.getElementById('video-fields').appendChild(template);
                }
            }

            function removeVideoField(event) {
                const fieldSet = event.target.closest('.row');
                const totalRows = document.querySelectorAll('#video-fields .video-row').length;
                if (totalRows > 1) {
                    fieldSet.remove();
                }
            }
        </script>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.delete-btn').on('click', function() {
                    var recordId = $(this).data('id');
                    var dynamicField = $('#dynamic-field-' + recordId);

                    $.ajax({
                        url: '/deleteOrderFile/' + recordId,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}' // Add CSRF token for security
                        },
                        success: function(response) {
                            if (response.success) {
                                dynamicField.fadeOut('slow', function() {
                                    $(this).remove();
                                });
                                alert("successfully Delete!");
                            } else {
                                alert(response.error);
                            }
                        },
                        error: function(response) {
                            alert('An error occurred while deleting the record.');
                        }
                    });
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                $('.delete-file-btn').on('click', function(e) {
                    e.preventDefault();

                    var fileId = $(this).data('file-id');
                    var row = $(this).closest('.file-row');

                    if (confirm('Are you sure you want to delete this file?')) {
                        $.ajax({
                            url: '{{ route('order-file.destroy') }}',
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: fileId
                            },
                            success: function(response) {
                                if (response.success) {
                                    row.remove();
                                } else {
                                    alert('Error deleting file.');
                                }
                            },
                            error: function(xhr) {
                                alert('An error occurred.');
                            }
                        });
                    }
                });
            });
        </script>
    @endsection