@extends('admin.layouts.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- Page Title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Add New Service</h4>
                        <a href="{{ url('admin/pages') }}" class="btn btn-primary">Back to List</a>
                    </div>
                </div>
            </div>

            <!-- start message title -->
            <div class="row">
                <div class="col-12">
                    @include('admin/layouts/flash-message')
                    @include('admin/layouts/validation-message')
                </div>
            </div>     
            <!-- end message title -->

            <!-- Form -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ url('admin/pages') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-6 form-group">
                                        <label>Title</label>
                                        <input id="main_title" type="text" name="main_title" class="form-control">
                                    </div>

                                    <div class="col-lg-6 form-group">
                                        <label>Slug</label>
                                        <input id="main_slug" type="text" name="main_slug" class="form-control">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Description</label>
                                    <div class="quill-textarea" style="height:200px;"></div>
                                    <input id="description" type="hidden" name="main_description">
                                </div>

                                <div class="row">
                                    <div class="col-lg-6 form-group">
                                        <label>Image</label>
                                        <input type="file" name="main_image" class="form-control" style="padding-top: 3px;">
                                    </div>
                                    <div class="col-lg-6 form-group">
                                        <label>Page Section</label>
                                        <select name="pages_section" class="form-control" required>
                                            <option>Select Section</option>
                                            <option value="home_page_section">Home Page Section</option>
                                            <option value="service_section">Service Section</option>
                                            <option value="blog_section">Blog Section</option>
                                            <option value="about_us_left_section">About Us Left Section</option>
                                            <option value="about_us_right_section">About Us Right Section</option>
                                            <option value="counter">Counter Section</option>
                                            <option value="about_us_page_section">About Us Page Section</option>
                                            <option value="faq_section">FAQ Section</option>
                                            <option value="client_section">Client Section</option>
                                        </select>
                                    </div>
                                </div>

                                <h3 class="mb-5 mt-5">Details Contents</h3>

                                <!-- Dynamic Rows -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <table class="table">
                                            <tbody class="item-wrapper">
                                                <!-- Row 1 -->
                                                <tr class="item-row">
                                                    <td>
                                                        <input type="text" name="title[]" class="form-control" placeholder="Title">
                                                    </td>
                                                    <td>
                                                        <textarea name="description[]" rows="2" cols="40" class="form-control" placeholder="Description"></textarea>
                                                    </td>
                                                    <td>
                                                        <input type="file" name="row_image[]" class="form-control" style="padding-top: 3px;">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-info add-item">Add</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary mt-3">Submit</button>
                            </form>

                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->
            </div> <!-- end row -->

        </div>
    </div>

@endsection

@section('custom_script')
<script type="text/javascript">
function convertToSlug(text) {
    return text
        .toLowerCase()
        .replace(/[^a-z0-9\u0980-\u09FF\s-]/g, "")
        .replace(/\s+/g, "-")          
        .replace(/-+/g, "-")              
        .replace(/^-+|-+$/g, "");  
}

$('#main_title').on('input', function () {
    var title = $(this).val();
    var slug = convertToSlug(title);
    $('#main_slug').val(slug);
});
</script>

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

    var quill = new Quill('.quill-textarea', {
        placeholder: 'Enter Detail',
        theme: 'snow',
        modules: {
            toolbar: [
                [{
                    font: []
                }, {
                    size: []
                }],
                ["bold", "italic", "underline", "strike"],
                [{
                    color: []
                }, {
                    background: []
                }],
                [{
                    script: "super"
                }, {
                    script: "sub"
                }],
                [{
                    header: [!1, 1, 2, 3, 4, 5, 6]
                }, "blockquote", "code-block"],
                [{
                    list: "ordered"
                }, {
                    list: "bullet"
                }, {
                    indent: "-1"
                }, {
                    indent: "+1"
                }],
                ["direction", {
                    align: []
                }],
                ["link", "image", "video", "formula"],
                ["clean"]
            ]
        }
    });

    quill.on('text-change', function(delta, oldDelta, source) {
        console.log(quill.container.firstChild.innerHTML)
        $('#description').val(quill.container.firstChild.innerHTML);
    });

});
</script>

<script type="text/javascript">
    function resetButtons() {
        // সব row এর button কে Remove বানাই
        $('.item-wrapper tr').each(function () {
            $(this).find('td:last button')
                .removeClass('btn-info add-item')
                .addClass('btn-danger remove-item')
                .html('Remove');
        });

        // শুধু শেষ row এর button কে Add বানাই
        $('.item-wrapper tr:last td:last button')
            .removeClass('btn-danger remove-item')
            .addClass('btn-info add-item')
            .html('Add');
    }

    // Add row
    $(document).on('click', '.add-item', function () {
        let row = $(this).closest('tr').clone();

        row.find('input[type="text"]').val('');
        row.find('textarea').val('');
        row.find('input[type="file"]').val('');

        $('.item-wrapper').append(row);

        resetButtons();
    });

    // Remove row
    $(document).on('click', '.remove-item', function () {
        $(this).closest('tr').remove();
        resetButtons();
    });

    // প্রথমে reset করে নিই
    $(document).ready(function () {
        resetButtons();
    });
</script>


<!-- <script type="text/javascript">
    $(document).on('click', '.add-item', function () {
        let row = $(this).closest('tr').clone();

        row.find('input[type="text"]').val('');
        row.find('textarea').val('');
        row.find('input[type="file"]').val('');

        // change Add → Remove
        row.find('.add-item')
            .removeClass('btn-info add-item')
            .addClass('btn-danger remove-item')
            .html('Remove');

        $('.item-wrapper').append(row);
    });

    // Remove row
    $(document).on('click', '.remove-item', function () {
        $(this).closest('tr').remove();
    });
</script> -->
@endsection