@extends('master')

@section('title')
    {{$title = "Create-Page"}}
@endsection
@section('content')

    <!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>

<div class="ml-3">
    <style>
  table {
        border-collapse: collapse; /* Ensures borders don't overlap */
        width: 100%; /* Optional, for full width */
        border: 2px solid black; /* Black border for the table */
    }

    th, td {
        border: 2px solid black; /* Black border for cells */
        padding: 8px; /* Optional, for spacing */
        text-align: left; /* Optional, adjust text alignment */
    }

    tr {
        border: 2px solid black; /* Black border for rows */
    }
    </style>

<div class=" mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg ml-7">
    <h2 class="text-3xl font-bold mb-6 text-center text-gray-700">Built Post Here.</h2>
    <form action="{{url('/menu/post')}}" method="post" class="space-y-4">
        @csrf
        <div>
            <label for="title" class="block text-xl font-medium text-gray-600">Heading</label>
            <input type="hidden" value="{{$id}}" name ="menuid">
         
            <input 
                type="text" 
                name="title" 
                id="title" 
                value="{{ old('title') }}"
                class="mt-1 block text-lg w-full px-3 py-3 bg-gray-50 border-1 border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400"
                placeholder="Enter your heading"
            />
        </div>
        <div>
            <label for="description" class="   ">Description</label>
            <textarea class="text-black "
                name="description" 
                value="{{ old('description') }}"

                id="description" 
                cols="30" 
                rows="10" 
                class=" "
                placeholder="Write your description here"
            ></textarea>
        </div>
        <button 
            type="submit" 
            class="w-fit py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400"
        >
            Submit
        </button>
    </form>
</div>

</div>
<script>
    $('#description').summernote({
      placeholder: 'description....',
      tabsize: 2,
      height: 300
    });
  </script> 

 @endsection