@extends('layouts.app',['title'=>ucwords($title)])
@section('content')
<style>
    .project-list-table .sorting:before{
    left: 7em;
}
.project-list-table .sorting:after{
        left: 7.5em;
}
    </style>
<div class="main-content" id="result">
    
    <div class="page-content">
        <div class="container-fluid">
            <!-- start 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">Site Structure</h4>

                        
                    </div>
                </div>
            </div>     
            <!-- end page title -->
            {{-- <div class="row">
                <div class="col-lg-12">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                </div>
            </div> --}}
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="sitemap-container">
                                <div class="sitemap">
                                    
                                    <a  href="javascript:;"  target="_blank" class="btn btn-outline-primary button-text-hover button-text view_sitestructure">
                                        View Site Structure
                                    </a>
                                    @php
                                        $child_pages_count = 0;

                                        foreach($meta["pages"] as $page){
                                            if($page["page_type"]!="home"){
                                                $child_pages_count++;
                                            }
                                        }
                                    @endphp
                                    <!-- Root -->
                                    @if(!empty($meta["pages"]))
                                    <ul class="root @if($child_pages_count >0) no-child-pages @endif">
                                        @foreach($meta["pages"] as $page)
                                            @if($page["page_type"]=="home")
                                        <li>
                                            <strong>{{$page["page_title"]}}</strong>
                                            <ul class="structure">
                                                @foreach($page["sections"] as $section)
                                           
                                                <li>
                                                    @if(!in_array($section["section_title"],["Header","Footer"]))
                                                    <a href="javascript:;" data_page="{{json_encode($section)}}"  class="view_page_description">
                                                        <p class="m-0">{{$section["section_title"]}}</p>
                                                        <span class="mdi mdi-arrow-right"></span>
                                                    </a>
                                                    @else
                                                    {{$section["section_title"]}}
                                                    @endif
                                                </li>
                                                @endforeach
                                            </ul>
                                            @endif
                                        </li>
                                        @endforeach
                                    </ul>
                                    
                                    <!-- Children with connecting lines -->
                                     @if($child_pages_count >0)
                                    <div class="tree">
                                        <ul>
                                            @foreach($meta["pages"] as $page)
                                                @if($page["page_type"]!="home")
                                            <li>
                                                <strong>{{$page["page_title"]}}</strong>
                                                <ul class="structure">
                                                    @foreach($page["sections"] as $section)
                                            
                                                    <li>
                                                        
                                                        @if(!in_array($section["section_title"],["Header","Footer"]))
                                                        <a href="javascript:;" data_page="{{json_encode($section)}}"  class="view_page_description">
                                                            <p class="m-0">{{$section["section_title"]}}</p>
                                                            <span class="mdi mdi-arrow-right"></span>
                                                        </a>
                                                        @else
                                                        {{$section["section_title"]}}
                                                        @endif
                                                    </li>
                                                    @endforeach
                                                </ul>
                                                @endif
                                            </li>
                                            @endforeach
                                            
                                        </ul>
                                    </div>
                                    @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end card -->
                </div>
            </div>
            <!-- end row -->
            
        </div> <!-- container-fluid -->
    </div>
    @include('partials.modals.confirm_modal')
    @include("partials.modals.view_prompt_modal",["title"=>"Prompt"])
    @include('partials.modals.view_sitestructure_modal',["meta"=>$meta])
    @include('partials.modals.view_sitestructure_page_modal')
</div>
@endsection
@push('topcss')
<link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />  
<style>
    * {
      box-sizing: border-box;
    }
    .sitemap-container {
      display: flex;
      justify-content: center;
      
    }
     .structure li a span, .structure li a p {
        font-size: 13px;
    }

    .sitemap {
      text-align: center;
    }

    .sitemap ul {
      list-style: none;
      padding-left: 0;
      background: transparent;
    }

    ul.root {
         max-width: 270px;
      min-width: 250px;
      margin: auto;
    }
    ul.root li{
        margin-bottom:0;
    }
    .sitemap li {
      background: #f5f5f7;
      margin: 10px auto;
      padding: 10px;
      width: 100%;
      color: #000;
      text-align: left;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      position: relative;
    }
 
    .sitemap li strong {
      display: block;
      background: #000;
      color: #fff;
      padding: 12px 10px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    /* ===== Tree Lines ===== */
    .tree {
      display: flex;
      justify-content: center;
      position: relative;
      margin-top: 40px;
    }

    .tree>ul {
      display: flex;
      justify-content: center;
      gap: 20px;
      position: relative;
    }

    
.tree > ul > li::before {
    content: "";
    position: absolute;
    top: -30px;
    left:0;
    width: 100%;
    height: 1px;
    background-color: #000;
}
.tree > ul > li:first-child::before{
    left:50%;
}
.tree > ul > li:last-child::before{
    left:-50%;
}
.tree > ul > li::after {
    content: "";
    position: absolute;
    top: -30px;
    left:50%;
    width: 1px;
    height: 30px;
    background-color: #000;
}
    /* Prevent lines on top row (Home Page) */
    .root>li::before {
      display: none;
    }
    .root::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 1px;
    height: 20px;
    background: #000;
}
.tree::before {
    content: "";
    position: absolute;
    top: -19px;
    left:35%;
    width: 150px;
    height: 1px;
    background-color: #000;
}

@media screen and (min-width:1600px) {
    .structure li a span,
    .structure li a p,
    .sitemap li {
        font-size: 16px;
    }
}

  </style>

@endpush
@push('scripts')
<script>
     $(".view_prompt").click(function(e){
        e.preventDefault();
        $("#promptModal").modal("show") ; 
        
        $("#promptModal .modal-body").html($(this).attr("data_prompt"));
    })
    $(".view_sitestructure").click(function(e){
        e.preventDefault();
        $("#siteStructureModal").modal("show") ; 
    })
    $(".view_page_description").click(function(e){
        e.preventDefault();
        var body = "";

        var page = JSON.parse($(this).attr("data_page"));

        body += "<div class='row'>";

        body += "<div class='col-md-6'>Title</div>";

        body += "<div class='col-md-6'>"+page.section_title+"</div>";

        body += "</div>"

        body += "<div class='row'>";

        body += "<div class='col-md-6'>Description</div>";

        body += "<div class='col-md-6'>"+page.section_description+"</div>";

        body += "</div>"

        body += "<div class='row'>";
        

        body += "<div class='col-md-6'>Section Prompt</div>";

        body += "<div class='col-md-6'>"+page.section_prompt+"</div>";

        body += "</div>"

        body += "<div class='row'>";

         body += "<div class='col-md-6'>Section Type</div>";

         body += "<div class='col-md-6'>"+page.section_type+"</div>";

        body += "</div>"

        $("#siteStructurePageModal").find(".modal-body").html(body) ;

        $("#siteStructurePageModal").modal("show") ; 
    })
    
    const input = document.getElementById('searchTableList');
  const clearBtn = document.getElementById('clearSearch');

  clearBtn.style.display = $("#searchTableList").val() ? 'block' : 'none';

  input.addEventListener('input', function () {
    clearBtn.style.display = this.value ? 'block' : 'none';
  });

  clearBtn.addEventListener('click', function () {
    input.value = '';
    clearBtn.style.display = 'none';
    input.focus(); // optional: keep focus after clearing
  });
</script>
<script>
    var clicked_confirm_action = null;

    $(".show_confirm_message").click(function(e){
        e.preventDefault();

        clicked_confirm_action = $(this);

        $("#confirmModal").find(".modal-body").html($(this).attr("data-confirm-msg"));

        $("#confirmModal").modal("show");

        

    })
    $("#confirmYesBtn").click(function(){
        clicked_confirm_action.closest("form").submit();
    })
</script>
@endpush