@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" onclick="window.history.back()";>
    <div class="d-flex flex-column justify-content-center">
        <h4> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <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>
               </button>Order Note</h4>
    </div>

</div>
<div class="card p-5">
    <div class="form-section">
        <h5>Order Note</h5>
        <form id="groupForm">
            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="customerName"> Customer Name</label>
                    <input type="text" class="form-control" id="customer_name"  value="{{ $order->customer_name }}" readonly disabled>
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateName"> Phone Number</label>
                    <input type="text" class="form-control" id="customer_number" value="{{ $order->customer_number }}" readonly disabled>
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateName"> Material Name</label>
                    <input type="text" class="form-control" id="material_name"  value="{{ $order->material_name }}" readonly disabled>
                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="stateName"> Department</label>
                    <input type="text" class="form-control" id="department_name" value="{{ $order->dept_name }}" readonly disabled>
                </div>
            </div>

    </div>

    <table class="table mb-2">
        <thead>
            <tr>
                <th>Department</th>
                <th>Name</th>
                <th>Whatsapp Number</th>
            </tr>
        </thead>
        <tbody>
                    @foreach($staffs as $staff)

            <tr>
                <td>{{ $order->dept_name }}</td>
                <td>{{ $staff->staff_name }}</td>
                <td>{{ $staff->phone_number }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <div class="text-editor-container mt-1">
        <div class="header mb-3">Description</div>

        <div id="editor" style="pointer-events:none; background:#f8f9fa; padding:10px; border:1px solid #ddd;">
             {!! $order->description !!}

          
        </div>
    </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