@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->

    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('allMenu')}}">Menu</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Menu update</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">@include('admin.includesV2.backendAlert')</div>
                <div class="col-md-6">
                    <form  class="custom form needs-validation" name="menuForm" id="menuForm" method="POST" action="{{ route('storeMenu') }}" enctype="multipart/form-data" novalidate>
                                @csrf
                        <div class="row">
                            <div class="col-md-8 form-group">
                                <input type="hidden" class="form-control" name="id" value="{{$menus->id}}" placeholder="">
                                <label class="form-label">Menu Title: <span class="required">*</span></label>
                                <input type="text" class="form-control" name="menu_title" value="{{$menus->menu_title}}" placeholder="Menu Name" autocomplete="off" required>
                            </div> 
                            <div class="col-md-4 form-group">
                                <label class="form-label">Parent Menu:</label>
                                <select id="category-id" name="parent_id" class="form-control form-select" data-placeholder="Parent Menu...">
                                    <option value="">-- Select Parent --</option>
                                    @foreach($parentMenus as $parentMenu)
                                        <option value="{{$parentMenu->id}}" {{!empty($menus->parent_id) && $menus->parent_id == $parentMenu->id ? 'selected' : ''}}>{{$parentMenu->menu_title}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="form-label">
                                    Target Page: 
                                    <span class="form-label-note"> " Select Target page or Type Target URL "</span>
                                </label> 
                                <select id="page_id" name="page_id" class="form-control form-select">
                                    <option value="">-- Select Page --</option>
                                    @foreach($pages as $page)
                                        <option value="{{$page->id}}" {{!empty($menus->page_id) && $menus->page_id == $page->id ? 'selected' : ''}}>
                                            {{$page->page_name}}
                                    </option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="col-md-12">
                                <span class="form-label-note pageUrl">pageUrl</span>
                            </div>   
                            <div class="col-md-12 form-group">
                                <label class="form-label">
                                    Target URL: <span class="required">*</span>
                                    <span class="form-label-note">for no link use only #</span>
                                </label>
                                <input type="text" class="form-control" id="url" name="url" value="{{$menus->url}}" placeholder="URL" autocomplete="off">
                            </div> 
                            
                        </div>
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label class="form-label">Status: <span class="required">*</span></label>
                                <select class="form-control form-select" data-placeholder="Status..." name="status" required>
                                    <option value="">-- Select Status --</option>
                                    <option value="Y" {{!empty($menus->status) && $menus->status == 'Y' ? 'selected' : ''}}>Show</option>
                                    <option value="N" {{!empty($menus->status) && $menus->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="form-label">position: <span class="required">*</span></label>
                                <input type="text" class="form-control" name="sort_order" value="{{$menus->sort_order}}" placeholder="Page order EX: 01" autocomplete="off" required>
                            </div> 
                        </div>   
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-success" style="float: right">{{!empty($menus) ? 'Update' : 'Save'}}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <ul class="list-group">
                                        @foreach($existingMenus as $parentMenu)
                                            <li class="list-group-item">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <span class="badge text-bg-success">{{$parentMenu->menu_title}}</span>
                                                        <span class="badge {{isset($parentMenu->page_id) ? 'text-bg-info' :  'text-bg-secondary'}}">
                                                        @if(!empty($parentMenu->page_id))
                                                            Page: {{$parentMenu->page_name}}
                                                        @else
                                                            Custom: {{ Str::limit((string) $parentMenu->url, 30) }}
                                                        @endif
                                                        </span>
                                                        <span class="badge text-bg-warning">Order: {{$parentMenu->sort_order}}</span>
                                                    </div>
                                                </div>
                                                

                                                @if(isset($parentMenu->childMenu))
                                                    <ul>
                                                    @foreach($parentMenu->childMenu as $childMenu)
                                                        <li class="list-group-item">

                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <span class="badge text-bg-success">{{$childMenu->menu_title}}</span>
                                                                    <span class="badge {{isset($childMenu->page_id) ? 'text-bg-info' :  'text-bg-secondary'}}">
                                                                    @if(!empty($childMenu->page_id))
                                                                        Page: {{$childMenu->page_name}}
                                                                    @else
                                                                        Custom: {{ Str::limit((string) $childMenu->url, 30) }}

                                                                    @endif
                                                                    </span>
                                                                    <span class="badge text-bg-warning">Order: {{$childMenu->sort_order}}</span>
                                                                </div>
                                                            </div>
                                                            
                                                        </li>
                                                    @endforeach
                                                    </ul>
                                                @endif
                                            </li>
                                        @endforeach
                                        </ul>

                </div>    
            </div>    
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs')
<script>
    // Convert the PHP array to a JavaScript object
    var pages = @json($pages);
    
    $(document).ready(function(){
        // Variable to hold the selected page ID
        var currentPageId = $('#page_id').val();
        if(currentPageId){
            var currentSelectedPage = pages.find(page => page.id == currentPageId);
            if (currentSelectedPage) {
                    $('.pageUrl').text('/'+currentSelectedPage.slug);
                } else {
                    $('.pageUrl').text(''); // Clear if no page found
                }
        }
        var selectedPageId = null;
        
        $('#page_id').change(function(){
            selectedPageId = $(this).val(); 
            // Check if a valid ID is selected
            if (selectedPageId) {
                // Find the URL for the selected page ID
                var selectedPage = pages.find(page => page.id == selectedPageId);
                
                // Update the .pageUrl element with the URL
                if (selectedPage) {
                    $('.pageUrl').text('/'+selectedPage.slug);
                } else {
                    $('.pageUrl').text(''); // Clear if no page found
                }
            } else {
                $('.pageUrl').text(''); // Clear if no ID is selected
            }
        });

        $.validator.addMethod("eitherPageOrUrl", function(value, element) {
        // Get the value of the page select and URL input
        var pageId = $('#page_id').val();
        var url = $('input[name="url"]').val();

        // Check if either pageId is selected or URL is provided, but not both
        return (pageId && !url) || (!pageId && url);
        }, "You must provide either a Target Page or a Target URL, but not both.");

        $("#menuForm").validate({
            rules: {
                page_id: {
                    eitherPageOrUrl: true
                },
                url: {
                    eitherPageOrUrl: true
                }
            },
            messages: {
                page_id: {
                    eitherPageOrUrl: "You must provide either a page or a URL, but not both."
                },
                url: {
                    eitherPageOrUrl: "You must provide either a page or a URL, but not both."
                }
            },
            errorElement: "div",
            errorPlacement: function(error, element) {
                var feedbackElement = element.siblings('.invalid-feedback');
                if (feedbackElement.length) {
                    feedbackElement.html(error.html());
                } else {
                    error.addClass("invalid-feedback");
                    element.closest(".form-group").append(error);
                }
            },
            highlight: function(element) {
                $(element).addClass("is-invalid").removeClass("is-valid");
            },
            unhighlight: function(element) {
                $(element).addClass("is-valid").removeClass("is-invalid");
            },
            submitHandler: function(form) {
                // Add 'was-validated' class to trigger Bootstrap validation
                form.classList.add('was-validated');
                form.submit(); // Perform the default form submission
            }
        });
    });
</script>


@endsection

@section('documentJquery')

@endsection