{% extends "main.html" %}
{%load static%}
{% block content %}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<div class="w-full xxlg1:w-[75%]">
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <div class="w-full bg-gray-50 px-3 py-3 border border-gray-100 shadow-md rounded-md flex flex-col s:flex-row justify-between items-start s:items-center gap-3">
            <div>
                <h1 class="text-secondosiblue text-xl">Order 234443</h1>
                <p class="text-gray-500">Salim Elliye</p>
            </div>

            <p class="uppercase text-green-700 font-semibold">Completed</p>
        </div>

        <div class="w=full mt-5">
            <p class="text-secondosiblue text-xl">Services</p>
            <div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 gap-5 mt-3">
                <div class="w-full shadow-md border border-gray-200 rounded-t-md ">
                    <div
                        class="w-ful py-9 px-5 flex justify-center items-center text-center text-secondosiblue bg-white rounded-t-md">
                        <p>Service Name</p>
                    </div>
                    <div
                        class="w-ful px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue rounded-b-md cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-4 h-4 text-white">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        <p>Add</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="w=full mt-10">
            <p class="text-secondosiblue text-xl">Products</p>
            <div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 gap-5 mt-5">
                <div>
                    <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
                        <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Basic
                        </p>

                        <div class="w-full flex flex-col justify-center items-center text-center">
                            <p class="text-osiblue font-poppinsLight text-[17px] font-semibold">$0</p>
                            <p class="text-gray-500">monthly/restaurant</p>
                        </div>
                    </div>
                    <div
                        class="w-ful px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue border border-osiblue rounded-b-md cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-4 h-4 text-white">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        <p>Add</p>
                    </div>

                </div>

                <div>
                    <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
                        <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Standard
                        </p>

                        <div class="w-full flex flex-col justify-center items-center text-center">
                            <p class="text-osiblue font-poppinsLight text-[17px] font-semibold">$20</p>
                            <p class="text-gray-500">monthly/restaurant</p>
                        </div>
                    </div>
                    <div
                        class="w-ful px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue border border-osiblue rounded-b-md cursor-pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-4 h-4 text-white">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        <p>Add</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}