@section('title', get_setting('site_name') . ' | ' . __('Company Policy'))
@push('css')
    <link href="{{ asset('assets/plugins/summernote/summernote-bs4.css') }}" rel="stylesheet">
@endpush


<div class="row">
    <div class="col-md-7">

        <ul class="list-group">

            @foreach ($policies as $policy)
                <li class="list-group-item d-flex justify-content-between align-items-center mb-1 rounded {{ $selectedPolicyId == $policy->id ? 'active' : '' }}">
                        <span style="cursor: pointer;"
                              wire:click="editPolicy({{ $policy->id }})"
                              class="{{ $selectedPolicyId == $policy->id ? 'fw-bold' : '' }}">
                            {{ $policy->title }}
                        </span>

                    <div class="div">
                        <button
                            class="btn btn-info btn-sm float-right"
                            wire:click="editPolicy({{ $policy->id }})">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button
                            class="btn btn-danger btn-sm float-right mr-2"
                            wire:click="deletePolicy({{ $policy->id }})"
                            wire:confirm="Are you sure you want to delete this policy?">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>


                </li>
            @endforeach
        </ul>
    </div>
    <div class="col-md-5">
        <div class="card">
            <div class="card-body">
                <button
                    class="btn btn-primary mb-3 float-right"
                    wire:click="createPolicy">
                    + Add New Policy
                </button>
                <form wire:submit.prevent="{{ $isCreating ? 'savePolicy' : 'updatePolicy' }}">
                    <div class="mb-3">
                        <label for="title" class="form-label">Title</label>
                        <input
                            type="text"
                            id="title"
                            wire:model="title"
                            class="form-control @error('title') is-invalid @enderror">
                        @error('title')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Content</label>
                        <div class="" wire:ignore>
                            <div class="summernote"></div>
                        </div>

                        {{--                        <textarea--}}
                        {{--                            id="description"--}}
                        {{--                            wire:model.defer="description"--}}
                        {{--                            class="form-control @error('description') is-invalid @enderror"--}}
                        {{--                            rows="5"--}}
                        {{--                        ></textarea>--}}
                        @error('description')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>


                    <button type="submit" class="btn btn-primary float-right">
                        {{ $isCreating ? 'Create Policy' : 'Update Policy' }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>


@section('script')
    <script src="{{ asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
    <script>
        function initializeSummernote() {
            $('.summernote').summernote({
                height: 300,                 // set editor height
                minHeight: null,             // set minimum height of editor
                maxHeight: null,             // set maximum height of editor
                focus: true,
                callbacks: {
                    onChange: function (contents) {
                        Livewire.dispatch('updatedCode', {value: contents});

                    }
                }
            });
        }

        // Reinitialize Summernote on Livewire updates
        document.addEventListener('livewire:init', () => {
            initializeSummernote();

            Livewire.on('dom.updated', () => {
                initializeSummernote();
            });

            Livewire.on('updatedContent', (data) => {
                $('.summernote').summernote('code', data);
            });
        });
    </script>

@endsection