@section('title','Add Addon')

@push('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endpush

@push('vendor-script')
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/additional-methods.min.js')}}"></script>
@endpush

@push('style')
<link rel="stylesheet" href="{{asset('css/admin/category/addCategory.css')}}">
@endpush

@push('script')
<script src="{{asset('js/admin/addons/create.js')}}"></script>
@endpush

<x-admin-layout>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs">
    </x-breadcrumbs>

    <div class="row">
        <div class="col s12">
            <div class="container">
                {{-- Content --}}
                <div class="section">
                    <div class="card">
                        <div class="card-content">
                            <div class="row">
                                <div class="col s12">
                                    <form action="{{route('admin_addons_save')}}" id="addonForm" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row justify-content-md-center">
                                            <div class="input-field col m6 s12">
                                                <input type="text" value="{{old('bundle_name')}}" name="bundle_name" id="bundle_name">
                                                <label for="bundle_name" class="mandatory">
                                                    @lang('Bundle Name') <span class="red-text">*</span>
                                                </label>
                                                @error('bundle_name')<small class="form-text text-danger">{{ $message }}</small>@enderror
                                            </div>

                                        </div>

                                        <!-- Multiple Addon Sections -->
                                        <div id="addon-sections-container">
                                            <!-- JavaScript will dynamically add addon sections here -->

                                            <table id="addonTable" class="responsive-table">
                                                <thead>
                                                    <tr>
                                                        <th width="20%">Addon</th>
                                                        <th width="60%">Options</th>
                                                        <th width="20%%">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    

                                                </tbody>
                                            </table>
                                        </div>

                                        <!-- Add Addon Button -->
                                        <button class="btn waves-effect waves-light modal-trigger mt-2" type="button" onclick="openAndLoadModal()">Add Addon
                                            <i class="material-icons left">add</i>
                                        </button>

                                        <div class="row">
                                            <button class="btn cyan waves-effect waves-light right mr-4" type="submit" id="btnSubmit">
                                                Submit
                                                <i class="material-icons right">send</i></button>
                                            <button class="btn red waves-effect waves-light btn-reset right mr-4" type="reset">
                                                <i class="material-icons left">refresh</i>
                                                @lang('Reset')
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Addon Modal -->
    <div id="addAddonModal" class="modal">
        <div class="modal-content" id="ajax_modal_content">

        </div>

    </div>

    <script>
        function saveAddon() {
            // Code to save addon details
            // You can access addon name and options in the modal here
            // Update the addon-sections-container accordingly
        }

        document.addEventListener('DOMContentLoaded', function() {
            M.AutoInit(); // Initialize Materialize components
            // const modal = document.getElementById('addAddonModal');
            // M.Modal.init(modal, {}); // Initialize Modal

            // openAndLoadModal();
        });


        function openAndLoadModal() {
            // Open the modal
            const modalInstance = M.Modal.getInstance(document.getElementById('addAddonModal'));
            modalInstance.open();

            // Display a loading symbol while fetching content
            const modalContent = document.getElementById('ajax_modal_content');
            modalContent.innerHTML = '<div class="progress"><div class="indeterminate"></div></div>';

            // Make an AJAX request to fetch content
            fetchContent()
                .then(data => {
                    // Update modal content with the fetched data
                    updateModalContent(data);
                })
                .catch(error => {
                    console.error('Error fetching modal content:', error);
                    modalContent.innerHTML = '<p>Error loading content</p>';
                });
        }

        function fetchContent() {
            // Make an AJAX request
            return fetch("{{ route('admin_addons_read') }}")
                .then(response => response.json());
        }

        function updateModalContent(data) {
            // Update modal content here
            const modalContent = document.getElementById('ajax_modal_content');

            // Example: Update modal content with fetched data
            modalContent.innerHTML = data.html;
            $(modalContent).html(data.html);

        }


    </script>

</x-admin-layout>