@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_update',$bundle->id) }}" 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', $bundle->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>
                                                    @foreach($bundle->addons as $index => $addon)

                                                    <tr data-index="{{ $index }}">
                                                        <td>{{ $addon->name_en }}
                                                            <input type="hidden" name="addons[{{ $index }}][name_en]" value="{{ $addon->name_en }}">
                                                            <input type="hidden" name="addons[{{ $index }}][name_ar]" value="{{ $addon->name_ar }}">
                                                            <input type="hidden" name="addons[{{ $index }}][note_en]" value="{{ $addon->note_en }}">
                                                            <input type="hidden" name="addons[{{ $index }}][note_ar]" value="{{ $addon->note_ar }}">
                                                            <input type="hidden" name="addons[{{ $index }}][id]" value="{{ $addon->id }}">
                                                            <input type="hidden" name="addons[{{ $index }}][has_other_input]" value="{{ $addon->has_other_input }}">
                                                        </td>
                                                        <td>
                                                            @foreach($addon->options as $optionIndex => $option)
                                                            <span class="chip green lighten-5 option-chip" data-english="{{$option->option_en}}" data-arabic="{{$option->option_ar}}" data-price="{{$option->price}}">
                                                                <span class="green-text">{{$option->option_en}}</span>
                                                                <input type="hidden" name="addons[{{ $index }}][options][{{$optionIndex}}][name_en]" value="{{$option->option_en}}">
                                                                <input type="hidden" name="addons[{{ $index }}][options][{{$optionIndex}}][name_ar]" value="{{$option->option_ar}}">
                                                                <input type="hidden" name="addons[{{ $index }}][options][{{$optionIndex}}][price]" value="{{$option->price}}">
                                                                <input type="hidden" name="addons[{{ $index }}][options][{{$optionIndex}}][id]" value="{{$option->id}}">
                                                            </span>
                                                            @endforeach

                                                        </td>
                                                        <td>
                                                            <a href="javascript:;" class="option-edit"><i class="material-icons">edit</i></a>
                                                            <a href="javascript:;" class="option-delete"><i class="material-icons pink-text">delete</i></a>
                                                        </td>
                                                    </tr>

                                                    @endforeach


                                                </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>
       
        document.addEventListener('DOMContentLoaded', function() {
            M.AutoInit(); // Initialize Materialize components
            // const modal = document.getElementById('addAddonModal');
            // M.Modal.init(modal, {}); // Initialize Modal

            // openAndLoadModal();
            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 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>