@extends('master')
@section('content')

<h2 class=""> About</h2>
<div class="  border border-1 rounded bg-gray-400 w-96 h-20">
<form action="{{url('/admin/add_menu')}}" method="POST" class=" w-96  h-20 flex justify-center items-center flex-row gap-1 pl-1">
@csrf
<input type="text" class="border-1  p-1" name="menu_name" required placeholder="Enter New Menu">
 <button   class="bg-green-700   w-auto p-1  text-white   rounded    "> Add new Menu</button>
</form>
</div>
 <table class="table-auto w-full border border-gray-300 text-left bg-white shadow-md mt-4">
    <thead>
        <tr class="bg-gray-200 text-gray-600">
            <th class="px-4 py-2 border">S/N</th>
            <th class="px-4 py-2 border">Title</th>
            <th class="px-4 py-2 border">Status</th>
            <th class="px-4 py-2 border">Action</th>
        </tr>
    </thead>
    @php
        $sn=0;
    @endphp
    <tbody>
        @foreach ($data as $item)
            
        
        <tr class="hover:bg-gray-100">
            <td class="px-4 py-2 border">{{$sn+=1}}</td>
            <td class="px-4 py-2 border" id="menu_name"><a href="{{url('/menu/details')}}/{{$item->id}}"> {{$item->menu_name}}</a></td>
            <td class="px-4 py-2 border">
                {!! $item->status == 1 
                    ? '<span class="text-green-700">Publish</span>' 
                    : '<span class="text-red-600">Unpublish</span>' !!}
            </td>
            <td class="px-4 py-2 border flex justify-center ">
                <a href="#" 
                class="no-underline bg-green-500 text-white px-3 py-1 rounded cursor-pointer hover:bg-green-600 ml-2" 
                id="updateLink" 
                data-bs-toggle="modal" 
                data-bs-target="#updateModal"
                data-id="{{ $item->id }}"
                data-name ="{{ $item->menu_name }}">
                Update
             </a>
       {!! 
        $item->status == 1 
        ? '<a href="'.url('/admin/change_Status') .'/'. $item->id . '" class=" no-underline bg-yellow-500 text-white px-3 py-1 rounded cursor-pointer hover:bg-yellow-600 ml-2">Unpublish</a>' 
        : '<a href="'.url('/admin/change_Status') .'/'. $item->id . '" class=" no-underline bg-purple-500 text-white px-3 py-1 rounded cursor-pointer hover:bg-green-600 ml-2">Publish</a>' 
    !!}
       
       
       <a href="{{ url('/menu/create/') }}/{{$item->id}}" class=" no-underline bg-blue-500 text-white px-3 py-1 rounded cursor-pointer hover:bg-blue-600 ml-2">Add Post</a>

                <a href="{{ url('admin/menu/delete/') }}/{{$item->id}}" class=" no-underline bg-red-500 text-white px-3 py-1 rounded cursor-pointer hover:bg-red-600 ml-2">Delete</a>
            </td>
        </tr>
    
        @endforeach
        <!-- Additional rows -->
    </tbody>
</table>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Modal Structure -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateModalLabel">Update Name</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Form Field -->
                <form id="updateForm" method="POST" action="{{url('/admin/update/menu')}}">
                    @csrf
                    <div class="mb-3">
                        <label for="name" class="form-label">Menu Name</label>

                        <input type="hidden" value="" id="id" name="id" >

                        <input type="text" class="form-control" name="name" placeholder="Enter your name" id="name" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit"  class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
           
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<script>
 
document.querySelectorAll('#updateLink').forEach(link => {
    link.addEventListener('click', function (e) {
         const $row = this.closest('a');        
        const itemId = $row.getAttribute('data-id');
         const itemName = $row.getAttribute('data-name');  
         document.getElementById('name').value = itemName; 
         document.getElementById('id').value = itemId;
    });
});

   
</script>

 @endsection