<div>
    <div class="row">
        <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Product Attributes</h4>
        </div>
    </div>
    <!-- Striped Rows -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Field Key</th>
                        <th>Label</th>
                        <th>Placeholder</th>
                        <th>Action</th>
                    </tr>
                </thead>
                @if (count($fields) > 0)
                <tbody class="table-border-bottom-0">
                    @foreach ($fields as $field)
                        <tr>
                            <td>{{$field->name}}</td>
                            <td>{{$field->label ?? ''}}</td>
                            <td>{{$field->placeholder ?? ''}}</td>
                            <td width="10%">
                                <a href="javascript:;" class="editAttribute" data-id="{{$field->id}}">
                                    <i class="bx bx-edit btn btn-primary btn-xs"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                @else
                    <td colspan="5" class="text-center">No record found</td>
                @endif
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal"  tabindex="-1" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-lg" role="document">
            <form id="editForm" wire:submit.prevent="updateItem" method="POST">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Manage Field</h5>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        @csrf
                
                        <div class="row">
                            <div class="col mb-2">
                                <label for="image" class="form-label">Label</label>
                                <input type="text" wire:model.defer="label" class="labelField form-control @error('label') is-invalid @enderror">
                                @error('label')
                                    <span  class="invalid-feedback"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col mb-2">
                                <label for="image" class="form-label">Placeholder</label>
                                <input type="text" wire:model.defer="placeholder" class="placeholderField form-control @error('placeholder') is-invalid @enderror">
                                @error('placeholder')
                                    <span  class="invalid-feedback"><strong>{{$message}}</strong></span>
                                @enderror
                            </div>
                        </div>
                        @if(count($fieldOptions) > 0)
                            <hr/>
                            <label for="image" class="form-label">Options</label>
                            <div class="row">
                                <div class="col-10 mb-2">
                                    <input type="text" wire:model="newOption" placeholder="Add new option" class="form-control">
                                </div>
                                <div class="col-2 mb-2 d-flex justify-content-end">
                                    <button wire:click="addOption" type="button" class="btn btn-primary">Add</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-2">
                                    <ol>
                                        @foreach($fieldOptions as $index => $option)
                                            <li class="mb-1">
                                                <input type="text" wire:model="fieldOptions.{{ $index }}.value" class="me-2">
                                                <a href="javascript:void(0);" wire:click="updateOption({{ $option['id'] }}, '{{ $index }}')">
                                                    <i class="bx bx-save btn btn-primary btn-xs"></i>
                                                </a>
                                                <a href="javascript:void(0);" class="delete" wire:click="deleteOption({{ $option['id'] }})" title="Delete">
                                                    <i class="bx bx-trash btn btn-danger btn-xs"></i>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ol>
                                </div>
                            </div>
                        @endif
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@section('script')
<script type="text/javascript">
    $(document).ready(function(){

        $(".editTemplate").on('click', function(){
            var obj = $(this).data('obj');
            console.log(obj);

            $("#editForm .labelField").val(obj.label);
            $("#editForm .placeholderField").val(obj.placeholder);

            $("#editForm").attr('action', `{{route('admin.editEmailTemplate', '')}}/${obj.id}`)
            $("#editModal").modal('show')
        })
    });

    document.addEventListener('DOMContentLoaded', function () {

        $(".editAttribute").on('click', function(){
            let id = $(this).data('id');
            @this.call('selectItem', id);
        });

        Livewire.on('itemSelected', () => {
            console.log("in error");
            $("#editModal").modal('show')
        });

        Livewire.on('itemUpdated', () => {
            console.log("in error");
            $("#editModal").modal('hide')
        });

        Livewire.on('keepModalOpen', () => {
            $("#editModal").modal('show');
        });
    });
</script>
@endsection