@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp
<style>
    .header-flex {
        display: flex;
        justify-content: flex-start;
        min-height: 100%;
    }

    .header-flex-column {
        min-width: 300px !important;
        width: 300px !important;
        height: 100%;
        margin: 5px 2.5px;
        border: 2px solid gray;
    }

    .header-flex-column:last-child {
        border: none;
    }

    .menu-ind-item {
        position: relative;
    }

    .delete_item_btn {
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .menu-item-list {
        max-height: 600px;
        overflow-y: scroll;
        margin-bottom: 15px
    }
</style>
<!-- Page Inner Start -->
<div class="page-inner pd-0-force mg-0-force bg-white">
    <form action="{{ route('Admin.Header.Save') }}" method="post">
        @csrf
        <div class="row">
            <div class="col-md-8">
                <div class="h3 mx-1 py-1 my-1 text-secondary">Website Header Builder</div>
                <div class="mx-1 text-danger"><small>Changes will apply to the Product Website as you click <b>'Save
                            Changes'</b> button</small></div>
            </div>
            @if (Session::has('permissions') && in_array('Save Header', Session::get('permissions')))
            <div class="col-md-4 text-right">
                <button type="submit" class="btn btn-danger m-2">Save Changes</button>
            </div>
            @endif
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="header-flex" style="max-width:100%;overflow-x:scroll;">
                    @if (!$menus->isEmpty())
                        @for ($i = 0; $i < count($menus); $i++)
                            <div class="header-flex-column nav-item-counts">
                                <div class="border border-secondary p-1">
                                    <label>Menu Item Title</label>
                                    <input type="text" class="form-control form-control-sm mb-2" placeholder="Home"
                                        value="{{ $menus[$i]['title'] }}" name="nav_item_title[{{ $i }}]">

                                    <label>Menu Item URL</label>
                                    <input type="text" name="nav_item_url[{{ $i }}]"
                                        class="form-control form-control-sm" value="{{ $menus[$i]['url'] }}"
                                        placeholder="{{ url('/') }}/home">

                                    <label>Display on:</label>
                                    <input type="number" name="nav_item_number[{{ $i }}]"
                                        class="form-control form-control-sm" value="{{ $menus[$i]['number'] }}"
                                        placeholder="1">
                                </div>
                                <div class="menu-item-list">
                                    @for ($j = 0; $j < count($menus[$i]->menuMeta); $j++)
                                        <div class="menu-ind-item border border-primary p-1 m-1">
                                            <label>Sub Menu Item Title</label>
                                            <input type="text" class="form-control form-control-sm mb-2"
                                                placeholder="Home" value="{{ $menus[$i]->menuMeta[$j]['title'] }}"
                                                name="submenue_item_title[{{ $i }}][{{ $j }}]">

                                            <label>Sub Menu Item URL</label>
                                            <input type="text" class="form-control form-control-sm"
                                                placeholder="{{ url('/') }}/home"
                                                value="{{ $menus[$i]->menuMeta[$j]['url'] }}"
                                                name="submenue_item_url[{{ $i }}][{{ $j }}]">
                                                @if (Session::has('permissions') && in_array('Delete Item', Session::get('permissions')))
                                            <button type="button" onclick="sub_menu_remove(this)"
                                                class="delete_item_btn btn badge bg-danger rounded text-light"><i
                                                    class="fa fa-remove"></i></button>
                                                    @endif
                                        </div>
                                    @endfor
                                </div>
                                @if (Session::has('permissions') && (in_array('Delete Menu', Session::get('permissions')) || in_array('Add Item', Session::get('permissions'))))
                                <div class="text-right">
                                   @if (Session::has('permissions') && in_array('Delete Menu', Session::get('permissions')))
                                    <button type="button" class="btn btn-danger btn-sm m-1"
                                        onclick="delete_nav_item(this)">Delete Menu</button>
                                  @endif
                                  @if (Session::has('permissions') && in_array('Add Item', Session::get('permissions')))
                                    <button type="button" class="btn btn-primary btn-sm m-1"
                                        onclick="add_menu_item(this)" nav-item-menu-index="{{ $i }}">Add
                                        Item</button>
                               @endif
                                </div>
                            @endif
                            </div>
                        @endfor
                    @endif
                    @if (Session::has('permissions') && in_array('Add New Menu', Session::get('permissions')))
                    <div class="header-flex-column add_new_item_col">
                        <button type="button" class="btn btn-primary px-3 rounded add_nav_item"><i
                                class="fa fa-plus"></i></button>
                    </div>
@endif
                </div>
            </div>
        </div>
    </form>
</div>

<!--/ Page Inner End -->

@include('Admin.Includes.footer')
<script>
    $(document).ready(function() {
        $('.add_nav_item').click(function() {
            var nav_item_count = $('.nav-item-counts').length;
            $('.add_new_item_col').before(`
            <div class="header-flex-column nav-item-counts">
                        <div class="border border-secondary p-1">
                            <label>Nav Item Title</label>
                            <input type="text" name="nav_item_title[${nav_item_count+1}]" class="form-control form-control-sm mb-2" placeholder="Home">

                            <label>Nav Item URL</label>
                            <input type="text" name="nav_item_url[${nav_item_count+1}]" class="form-control form-control-sm" placeholder="{{ url('/') }}/home">

                            <label>Display On</label>
                            <input type="number" name="nav_item_number[${nav_item_count+1}]" class="form-control form-control-sm" placeholder="1">
                        </div>
                        <div class="menu-item-list">
                        </div>
                         @if (Session::has('permissions') && (in_array('Delete Menu', Session::get('permissions')) || in_array('Add Item', Session::get('permissions'))))
                        <div class="text-right">
                        @if (Session::has('permissions') && in_array('Delete Menu', Session::get('permissions')))
                            <button type="button" class="btn btn-danger btn-sm m-1 delete_nav_item" onclick="delete_nav_item(this)">Delete Menu</button>
                            @endif
                            @if (Session::has('permissions') && in_array('Add Item', Session::get('permissions')))
                            <button type="button" class="btn btn-primary btn-sm m-1" nav-item-menu-index="${nav_item_count+1}" onclick="add_menu_item(this)">Add Item</button>
                        @endif
                        </div>
                        @endif
                    </div>
                `);
        });
    });

    function delete_nav_item(obj_) {
        $(obj_).parent().parent().remove();
    }

    function add_menu_item(obj_) {
        var index_nav_id = $(obj_).attr('nav-item-menu-index');
        $(obj_).parent().siblings('.menu-item-list').append(`
        <div class="menu-ind-item border border-primary p-1 m-1">
            <label>Sub Menu Item Title</label>
            <input type="text" name="submenue_item_title[${index_nav_id}][]" class="form-control form-control-sm mb-2" placeholder="Home">

            <label>Sub Menu Item URL</label>
            <input type="text" name="submenue_item_url[${index_nav_id}][]"  class="form-control form-control-sm" placeholder="{{ url('/') }}/home">
            @if (Session::has('permissions') && in_array('Delete Item', Session::get('permissions')))
            <button type="button" class="delete_item_btn btn badge bg-danger rounded text-light" onclick="sub_menu_remove(this)"><i class="fa fa-remove"></i></button>
            @endif
        </div>
    `);
    }

    function sub_menu_remove(obj_) {
        $(obj_).parent().remove();
    }
</script>