@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

@section('content')
    <div
        class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-1 row-gap-4">
        <div class="d-flex flex-column justify-content-center">
            <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="View_table"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a></button>View Product</h5>
        </div>

    </div>
    <div class="card p-5">
        <div class="form-section">
            <h5>View Product</h5>
            <form id="groupForm">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label class="form-label" for="stateName"> Product Name</label>
                        <input type="text" class="form-control" id="stateName" value="Chair">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label" for="stateLogo">Image</label>
                        <input type="file" class="form-control" id="stateLogo">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="stateName">MRP</label>
                        <input type="text" class="form-control" id="stateName" value="Rs.10,000">
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="stateName">Second Price</label>
                        <input type="text" class="form-control" id="stateName" value="Rs.9,000">
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="stateName">Final Price</label>
                        <input type="text" class="form-control" id="stateName" value="Rs.8,000">
                    </div>
                </div>
                <div class="text-editor-container">
                    <div class="header">Description</div>

                    <div id="editor">
                        <p>Hello World! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis sit eum nulla vitae
                            fuga temporibus pariatur recusandae itaque facilis laboriosam exercitationem quae dolorem facere
                            natus deserunt, voluptatibus aperiam culpa harum a architecto,
                            .</p>

                        <p><br /></p>
                    </div>
                </div>
                <div class="form-actions d-flex justify-content-center mt-4">
                    <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                        data-bs-target="#update">Update</button>
                    <button type="reset" class="btn btn-label-secondary">Discard</button>
                </div>
            </form>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
        const quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
@endsection