@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">Order Page</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Order 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=" font-weight-semibold mt-1 mb-3">Name</div>
                                            <input type="text" class="form-control" required name="name" value="{{$Category->name ?? "null"}}" placeholder="Enter Name">

                                         
                                        </div>
                                        
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Image</div>

                                            <input type="file" class="form-control" name="image" placeholder="Upload New Image">
                                            @if($Category->image)
                                                <div class="mb-3">
                                                    <img src="{{ $Category->image }}" alt="Category Image" style="max-width: 20%; height: auto;">
                                                </div>
                                            @endif
                                        </div>
                                       
</div>



                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-primary col-md-3" type="submit">Save</button>
                                        </div>

                                    </div>
                                </form>
                            </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