@extends('admin.layouts.app')

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

        <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">{{ isset($pagesList) ? 'Edit Page' : 'Add New Page' }}</h4>
                    <a href="{{ url('admin/pages') }}" class="btn btn-primary">Back to List</a>
                </div>
            </div>
        </div>

        @include('admin.layouts.flash-message')
        @include('admin.layouts.validation-message')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ isset($pagesList) ? url('admin/pages/'.$pagesList->id) : url('admin/pages') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @if(isset($pagesList))
                                @method('PUT')
                            @endif

                            <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" value="{{ $pagesList->title ?? '' }}">
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>Slug</label>
                                    <input id="main_slug" type="text" name="main_slug" class="form-control" value="{{ $pagesList->slug ?? '' }}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Description</label>
                                <div class="quill-textarea" style="height:200px;">{!! $pagesList->description ?? '' !!}</div>
                                <input id="description" type="hidden" name="main_description" value="{{ $pagesList->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;">
                                    <p>Image size should be 954 × 1220 px(PNG,JPEG or WebP)</p>
                                    @if(isset($pagesList) && $pagesList->image)
                                        <img src="{{ asset('uploads/pages/'.$pagesList->image) }}" width="100" class="mt-2">
                                    @endif
                                </div>
                                <div class="col-lg-6 form-group">
                                    <label>Page Section</label>
                                    <select name="pages_section" class="form-control" required>
                                        <option value="">Select Section</option>
                                        <option value="home_page_section" {{ (isset($pagesList) && $pagesList->pages_section == 'home_page_section') ? 'selected' : '' }}>Home Page Section</option>
                                        <option value="service_section" {{ (isset($pagesList) && $pagesList->pages_section == 'service_section') ? 'selected' : '' }}>Service Section</option>
                                        <option value="blog_section" {{ (isset($pagesList) && $pagesList->pages_section == 'blog_section') ? 'selected' : '' }}>Blog Section</option>
                                        <option value="about_us_left_section" {{ (isset($pagesList) && $pagesList->pages_section == 'about_us_left_section') ? 'selected' : '' }}>About Us Left Section</option>
                                        <option value="about_us_right_section" {{ (isset($pagesList) && $pagesList->pages_section == 'about_us_right_section') ? 'selected' : '' }}>About Us Right Section</option>
                                        <option value="counter" {{ (isset($pagesList) && $pagesList->pages_section == 'counter') ? 'selected' : '' }}>Counter Section</option>
                                        <option value="about_us_page_section" {{ (isset($pagesList) && $pagesList->pages_section == 'about_us_page_section') ? 'selected' : '' }}>About Us Page Section</option>
                                        <option value="faq_section" {{ (isset($pagesList) && $pagesList->pages_section == 'faq_section') ? 'selected' : '' }}>FAQ Section</option>
                                        <option value="client_section" {{ (isset($pagesList) && $pagesList->pages_section == 'client_section') ? 'selected' : '' }}>Client Section</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table">
                                        <tbody class="item-wrapper">
                                            @if(isset($pages_details) && count($pages_details) > 0)
                                                @foreach($pages_details as $detail)
                                                    <tr class="item-row">
                                                        <td>
                                                            <input type="text" name="title[]" class="form-control" placeholder="Title" value="{{ $detail->title }}">
                                                        </td>
                                                        <td>
                                                            <textarea name="description[]" rows="2" cols="40" value="{{ $detail->description }}" class="form-control" placeholder="Description">{!! $detail->description !!}</textarea>
                                                        </td>
                                                        <td>
                                                            <input type="hidden" name="old_image[]" value="{{ $detail->image ?? '' }}">
                                                            <input style="height: 40px;" type="file" name="row_image[]" class="form-control">
                                                            @if($detail->image)
                                                                <img src="{{ asset('uploads/pages/details/'.$detail->image) }}" width="50" class="mt-2">
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-info add-item">Add</button>
                                                        </td>
                                                    </tr>
                                                    
                                                @endforeach
                                            @else
                                                <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>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary mt-3">{{ isset($pagesList) ? 'Update' : 'Submit' }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('custom_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 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 () {
    $('#main_slug').val(convertToSlug($(this).val()));
});
</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