@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">Update Page.</h2>
    <form action="{{url('/admin/Update-details')}}/{{$id}}" method="post" class="space-y-4" enctype="multipart/form-data">

        @csrf
        <div>
            <label for="title" class="block text-xl font-medium text-gray-600">Heading</label>
            <input type="hidden" value="{{$data->pid}}" name ="pid">
         
            <input 
                type="text" 
                name="heading" 
                id="title" 
                value="{{ $data->heading }}"
                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=""

                id="description" 
                cols="30" 
                rows="10" 
                class=" "
                placeholder="Write your description here"
            > {{  $data->description }} </textarea>
        </div>
        <label for="file">Image</label>
        <input type="file" name="image" id="file" class="form-control">
        <div>
            <label for="status" class="block text-xl font-medium text-gray-600">Status</label>
            <select 
                name="status" 
                id="status" 
                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"
            >            
                <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Published</option>
                <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Unpublished</option>
            </select>
        </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"
        >
            Update
        </button>
    </form>
</div>

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

 @endsection