@extends('admin.layout.master')

@section('content')
<main>
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>&nbsp;&nbsp;/ Culqi Configuración</li>
            <li>&nbsp;&nbsp;/ <a href="{{ url('/admin/culqiplanes') }}">Planes</a></li>
        </ol>
    </div>

    <!-- Listado de Planes Existentes -->
    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Planes Existentes</h3>
            <button class="btn btn-info" data-toggle="modal" data-target="#myModalPlan">
                <i class='bx bx-plus'></i> Nuevo Plan
            </button>
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Descripción</th>
                        <th>Precio</th>
                        <th>Moneda</th>
                        <th>Intervalo de Facturación</th>
                        <th>Tipo</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($planes as $plan)
                    <tr>
                        <td>{{ $plan->name }}</td>
                        <td>{!! $plan->description !!}</td>
                        <td>{{ $plan->price }}</td>
                        <td>{{ $plan->currency_code }}</td>
                        <td>{{ $plan->billing_interval }}</td>
                        <td>{{ $plan->tipo->name ?? '' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal para Crear Plan -->
    <div class="modal fade" id="myModalPlan" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Crear Plan de Suscripción</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="planForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="name">Nombre del Plan</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="name">Nombre corto del Plan</label>
                                    <input type="text" class="form-control" id="short_name" name="short_name" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="price">Precio</label>
                                    <input type="number" class="form-control" id="price" name="price" min="3" step="0.01" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="currency_code">Moneda</label>
                                    <select class="form-control" id="currency_code" name="currency_code">
                                        <option value="USD">USD</option>
                                        <option value="PEN">PEN</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="billing_interval">Intervalo de Facturación</label>
                                    <select class="form-control" id="billing_interval" name="billing_interval">
                                        <option value="MONTH">Mensual</option>
                                        <option value="QUARTER">Trimestral</option>
                                        <option value="YEAR">Anual</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="plan_type_id">Tipo de Plan</label>
                                    <select class="form-control" id="plan_type_id" name="plan_type_id" required>
                                        @foreach($tiposplanes as $tipo)
                                        <option value="{{ $tipo->id }}">{{ $tipo->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="description">Descripción</label>
                            <textarea class="form-control" id="description" name="description" required></textarea>

                        </div>

                        <button type="button" class="btn btn-success" id="crearPlanBtn">Crear Plan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
<script type="importmap">
    {
                "imports": {
                    "ckeditor5": "{{ asset('ckeditor5/ckeditor5.js') }}",
                 
                    "ckeditor5-umd": "{{ asset('ckeditor5/ckeditor5.umd.js') }}",
                    "ckeditor5-umd-map": "{{ asset('ckeditor5/ckeditor5.umd.js.map') }}",
                    "ckeditor5-js-map": "{{ asset('ckeditor5/ckeditor5.js.map') }}",
                    "ckeditor5-css": "{{ asset('ckeditor5/ckeditor5.css') }}",
                    "ckeditor5-content-css": "{{ asset('ckeditor5/ckeditor5-content.css') }}",
                    "ckeditor5-editor-css": "{{ asset('ckeditor5/ckeditor5-editor.css') }}",
                    "translations": "{{ asset('ckeditor5/translations') }}"
                }
            }
</script>
<script type="module">
    import {
        ClassicEditor,
        AccessibilityHelp,
        Alignment,
        Autoformat,
        AutoImage,
        AutoLink,
        Autosave,
        BlockQuote,
        Bold,
        CloudServices,
        Code,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        Heading,
        Highlight,
        HorizontalLine,
        ImageBlock,
        ImageCaption,
        ImageInline,
        ImageInsertViaUrl,
        ImageResize,
        ImageStyle,
        ImageTextAlternative,
        ImageToolbar,
        ImageUpload,
        Indent,
        IndentBlock,
        Italic,
        Link,
        LinkImage,
        List,
        ListProperties,
        PageBreak,
        Paragraph,
        RemoveFormat,
        SelectAll,
        SpecialCharacters,
        SpecialCharactersArrows,
        SpecialCharactersCurrency,
        SpecialCharactersEssentials,
        SpecialCharactersLatin,
        SpecialCharactersMathematical,
        SpecialCharactersText,
        Strikethrough,
        Subscript,
        Superscript,
        Table,
        TableCaption,
        TableCellProperties,
        TableColumnResize,
        TableProperties,
        TableToolbar,
        TextTransformation,
        TodoList,
        Underline,
        Undo
    } from 'ckeditor5';

    // Configuración del editor
    const editorConfig = {
        toolbar: {
            items: [
                'undo',
                'redo',
                '|',
                'heading',
                '|',
                'fontSize',
                'fontFamily',
                'fontColor',
                'fontBackgroundColor',
                '|',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'subscript',
                'superscript',
                'code',
                'removeFormat',
                '|',
                'specialCharacters',
                'horizontalLine',
                'pageBreak',
                'link',
                'insertImageViaUrl',
                'insertTable',
                'highlight',
                'blockQuote',
                '|',
                'alignment',
                '|',
                'bulletedList',
                'numberedList',
                'todoList',
                'outdent',
                'indent'
            ],
            shouldNotGroupWhenFull: true
        },
        plugins: [
            AccessibilityHelp,
            Alignment,
            Autoformat,
            AutoImage,
            AutoLink,
            Autosave,
            BlockQuote,
            Bold,
            CloudServices,
            Code,
            Essentials,
            FontBackgroundColor,
            FontColor,
            FontFamily,
            FontSize,
            Heading,
            Highlight,
            HorizontalLine,
            ImageBlock,
            ImageCaption,
            ImageInline,
            ImageInsertViaUrl,
            ImageResize,
            ImageStyle,
            ImageTextAlternative,
            ImageToolbar,
            ImageUpload,
            Indent,
            IndentBlock,
            Italic,
            Link,
            LinkImage,
            List,
            ListProperties,
            PageBreak,
            Paragraph,
            RemoveFormat,
            SelectAll,
            SpecialCharacters,
            SpecialCharactersArrows,
            SpecialCharactersCurrency,
            SpecialCharactersEssentials,
            SpecialCharactersLatin,
            SpecialCharactersMathematical,
            SpecialCharactersText,
            Strikethrough,
            Subscript,
            Superscript,
            Table,
            TableCaption,
            TableCellProperties,
            TableColumnResize,
            TableProperties,
            TableToolbar,
            TextTransformation,
            TodoList,
            Underline,
            Undo
        ],
        fontFamily: {
            supportAllValues: true
        },
        fontSize: {
            options: [8, 9, 10, 11, 'default', 12, 13, 14, 15, 16, 17, 18, 20],
            supportAllValues: true
        },
        heading: {
            options: [{
                    model: 'paragraph',
                    title: 'Paragraph',
                    class: 'ck-heading_paragraph'
                },
                {
                    model: 'heading1',
                    view: 'h1',
                    title: 'Heading 1',
                    class: 'ck-heading_heading1'
                },
                {
                    model: 'heading2',
                    view: 'h2',
                    title: 'Heading 2',
                    class: 'ck-heading_heading2'
                },
                {
                    model: 'heading3',
                    view: 'h3',
                    title: 'Heading 3',
                    class: 'ck-heading_heading3'
                },
                {
                    model: 'heading4',
                    view: 'h4',
                    title: 'Heading 4',
                    class: 'ck-heading_heading4'
                },
                {
                    model: 'heading5',
                    view: 'h5',
                    title: 'Heading 5',
                    class: 'ck-heading_heading5'
                },
                {
                    model: 'heading6',
                    view: 'h6',
                    title: 'Heading 6',
                    class: 'ck-heading_heading6'
                }
            ]
        },
        image: {
            toolbar: [
                'toggleImageCaption',
                'imageTextAlternative',
                '|',
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'resizeImage'
            ]
        },
        link: {
            addTargetToExternalLinks: true,
            defaultProtocol: 'https://',
            decorators: {
                toggleDownloadable: {
                    mode: 'manual',
                    label: 'Downloadable',
                    attributes: {
                        download: 'file'
                    }
                }
            }
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        placeholder: 'Type or paste your content here!',
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
        }
    };
    $(document).ready(function() {
        // Inicializar CKEditor al cargar la página
        let editorInstance1;
        ClassicEditor
            .create(document.querySelector('#description'), editorConfig)
            .then(editor => {
                editorInstance1 = editor;
            })
            .catch(error => {
                console.error('Error al inicializar CKEditor', error);
            });

        // Capturar el evento click del botón "Crear Plan"
        $('#crearPlanBtn').on('click', function(event) {
            event.preventDefault();

            // Actualizar el campo textarea con el contenido del editor
            const description = editorInstance1.getData();

            // Recoger manualmente los valores de cada campo
            const name = $('#name').val();
            const short_name = $('#short_name').val();
            const price = $('#price').val();
            const currency_code = $('#currency_code').val();
            const billing_interval = $('#billing_interval').val();
            const plan_type_id = $('#plan_type_id').val();

            // Crear el objeto de datos a enviar
            const data = {
                _token: $('input[name="_token"]').val(), // CSRF Token
                name: name,
                short_name: short_name,
                price: price,
                currency_code: currency_code,
                billing_interval: billing_interval,
                plan_type_id: plan_type_id,
                description: description
            };

            // Enviar los datos con AJAX
            $.ajax({
                url: '{{ route("culqi.planes.store") }}',
                method: 'POST',
                data: data,
                success: function(response) {
                    alert(response.success);
                    location.reload(); // Recargar la página después de la creación del plan
                },
                error: function(response) {
                    alert('Error al crear el plan');
                }
            });
        });
    });

</script>
@endsection