@extends('layouts.app')

@section('content')
<!-- <div id="cartSidePenal" drawer-end
    class="fixed inset-y-0 flex flex-col w-full transition-transform duration-300 ease-in-out transform bg-white shadow dark:bg-zink-600 ltr:right-0 rtl:left-0 md:w-96 z-drawer show">
    <div class="flex items-center justify-between p-4 border-b border-slate-200 dark:border-zink-500">
        <div class="grow">
            <h5 class="mb-0 text-16">Shopping Cart <span
                    class="inline-flex items-center justify-center w-5 h-5 ml-1 text-[11px] font-medium border rounded-full text-white bg-custom-500 border-custom-500">3</span>
            </h5>
        </div>
        <div class="shrink-0">
            <button data-drawer-close="cartSidePenal"
                class="transition-all duration-150 ease-linear text-slate-500 hover:text-slate-800"><i data-lucide="x"
                    class="size-4"></i></button>
        </div>
    </div>
    <div class="px-4 py-3 text-sm text-green-500 border border-transparent bg-green-50 dark:bg-green-400/20">
        <span class="font-bold underline">UnivEase</span> Coupon code applied successfully.
    </div>
    <div>
        <div class="h-[calc(100vh_-_370px)] p-4 overflow-y-auto product-list">
            <div class="flex flex-col gap-4">
                <div class="flex gap-2 product">
                    <div
                        class="flex items-center justify-center w-12 h-12 rounded-md bg-slate-100 shrink-0 dark:bg-zink-500">
                        <img src="assets/images/img-012.png" alt="" class="h-8">
                    </div>
                    <div class="overflow-hidden grow">
                        <div class="ltr:float-right rtl:float-left">
                            <button
                                class="transition-all duration-150 ease-linear text-slate-500 dark:text-zink-200 hover:text-red-500 dark:hover:text-red-500"><i
                                    data-lucide="x" class="size-4"></i></button>
                        </div>
                        <a href="#!" class="transition-all duration-200 ease-linear hover:text-custom-500">
                            <h6 class="mb-1 text-15">Cotton collar t-shirts for men</h6>
                        </a>
                        <div class="flex items-center mb-3">
                            <h5 class="text-base product-price"> $<span>155.32</span></h5>
                            <div class="font-normal rtl:mr-1 ltr:ml-1 text-slate-500 dark:text-zink-200">(Fashion)</div>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <div class="inline-flex text-center input-step">
                                <button type="button"
                                    class="border w-9 h-9 leading-[15px] minus bg-white dark:bg-zink-700 dark:border-zink-500 ltr:rounded-l rtl:rounded-r transition-all duration-200 ease-linear border-slate-200 text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="minus" class="inline-block size-4"></i></button>
                                <input type="number"
                                    class="w-12 text-center h-9 border-y product-quantity dark:bg-zink-700 focus:shadow-none dark:border-zink-500"
                                    value="2" min="0" max="100" readonly>
                                <button type="button"
                                    class="transition-all duration-200 ease-linear bg-white border dark:bg-zink-700 dark:border-zink-500 ltr:rounded-r rtl:rounded-l w-9 h-9 border-slate-200 plus text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="plus" class="inline-block size-4"></i></button>
                            </div>
                            <h6 class="product-line-price">310.64</h6>
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 product">
                    <div
                        class="flex items-center justify-center w-12 h-12 rounded-md bg-slate-100 shrink-0 dark:bg-zink-500">
                        <img src="assets/images/img-03.png" alt="" class="h-8">
                    </div>
                    <div class="overflow-hidden grow">
                        <div class="ltr:float-right rtl:float-left">
                            <button
                                class="transition-all duration-150 ease-linear text-slate-500 dark:text-zink-200 hover:text-red-500 dark:hover:text-red-500"><i
                                    data-lucide="x" class="size-4"></i></button>
                        </div>
                        <a href="#!" class="transition-all duration-200 ease-linear hover:text-custom-500">
                            <h6 class="mb-1 text-15">Like style travel black handbag</h6>
                        </a>
                        <div class="flex items-center mb-3">
                            <h5 class="text-base product-price"> $<span>349.95</span></h5>
                            <div class="font-normal rtl:mr-1 ltr:ml-1 text-slate-400 dark:text-zink-200">(Luggage)</div>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <div class="inline-flex text-center input-step">
                                <button type="button"
                                    class="border w-9 h-9 leading-[15px] minus bg-white dark:bg-zink-700 dark:border-zink-500 ltr:rounded-l rtl:rounded-r transition-all duration-200 ease-linear border-slate-200 text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="minus" class="inline-block size-4"></i></button>
                                <input type="number"
                                    class="w-12 text-center h-9 border-y product-quantity dark:bg-zink-700 focus:shadow-none dark:border-zink-500"
                                    value="1" min="0" max="100" readonly>
                                <button type="button"
                                    class="transition-all duration-200 ease-linear bg-white border dark:bg-zink-700 dark:border-zink-500 ltr:rounded-r rtl:rounded-l w-9 h-9 border-slate-200 plus text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="plus" class="inline-block size-4"></i></button>
                            </div>
                            <h6 class="product-line-price">349.95</h6>
                        </div>
                    </div>
                </div>
                <div class="flex gap-2 product">
                    <div
                        class="flex items-center justify-center w-12 h-12 rounded-md bg-slate-100 shrink-0 dark:bg-zink-500">
                        <img src="assets/images/img-09.png" alt="" class="h-8">
                    </div>
                    <div class="overflow-hidden grow">
                        <div class="ltr:float-right rtl:float-left">
                            <button
                                class="transition-all duration-150 ease-linear text-slate-500 dark:text-zink-200 hover:text-red-500 dark:hover:text-red-500"><i
                                    data-lucide="x" class="size-4"></i></button>
                        </div>
                        <a href="#!" class="transition-all duration-200 ease-linear hover:text-custom-500">
                            <h6 class="mb-1 text-15">Blive Printed Men Round Neck</h6>
                        </a>
                        <div class="flex items-center mb-3">
                            <h5 class="text-base product-price">$<span>546.74</span></h5>
                            <div class="font-normal rtl:mr-1 ltr:ml-1 text-slate-400 dark:text-zink-200">(Fashion)</div>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <div class="inline-flex text-center input-step">
                                <button type="button"
                                    class="border w-9 h-9 leading-[15px] minus bg-white dark:bg-zink-700 dark:border-zink-500 ltr:rounded-l rtl:rounded-r transition-all duration-200 ease-linear border-slate-200 text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="minus" class="inline-block size-4"></i></button>
                                <input type="number"
                                    class="w-12 text-center h-9 border-y product-quantity dark:bg-zink-700 focus:shadow-none dark:border-zink-500"
                                    value="4" min="0" max="100" readonly>
                                <button type="button"
                                    class="transition-all duration-200 ease-linear bg-white border dark:bg-zink-700 dark:border-zink-500 ltr:rounded-r rtl:rounded-l w-9 h-9 border-slate-200 plus text-slate-500 dark:text-zink-200 hover:bg-custom-500 dark:hover:bg-custom-500 hover:text-custom-50 dark:hover:text-custom-50 hover:border-custom-500 dark:hover:border-custom-500 focus:bg-custom-500 dark:focus:bg-custom-500 focus:border-custom-500 dark:focus:border-custom-500 focus:text-custom-50 dark:focus:text-custom-50"><i
                                        data-lucide="plus" class="inline-block size-4"></i></button>
                            </div>
                            <h6 class="product-line-price end">2,186.96</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4 border-t border-slate-200 dark:border-zink-500">

            <table class="w-full mb-3 ">
                <tbody class="table-total">
                    <tr>
                        <td class="py-2">Sub Total :</td>
                        <td class="text-right cart-subtotal">$2,847.55</td>
                    </tr>
                    <tr>
                        <td class="py-2">Discount <span class="text-muted">(TAILWICK50)</span>:</td>
                        <td class="text-right cart-discount">-$476.00</td>
                    </tr>
                    <tr>
                        <td class="py-2">Shipping Charge :</td>
                        <td class="text-right cart-shipping">$89.00</td>
                    </tr>
                    <tr>
                        <td class="py-2">Estimated Tax (12.5%) : </td>
                        <td class="text-right cart-tax">$70.62</td>
                    </tr>
                    <tr class="font-semibold">
                        <td class="py-2">Total : </td>
                        <td class="text-right cart-total">$2,531.17</td>
                    </tr>
                </tbody>
            </table>
            <div class="flex items-center justify-between gap-3">
                <a href="apps-ecommerce-product-grid.html"
                    class="w-full text-white btn bg-slate-500 border-slate-500 hover:text-white hover:bg-slate-600 hover:border-slate-600 focus:text-white focus:bg-slate-600 focus:border-slate-600 focus:ring focus:ring-slate-100 active:text-white active:bg-slate-600 active:border-slate-600 active:ring active:ring-slate-100 dark:ring-slate-400/10">Continue
                    Shopping</a>
                <a href="apps-ecommerce-checkout.html"
                    class="w-full text-white bg-red-500 border-red-500 btn hover:text-white hover:bg-red-600 hover:border-red-600 focus:text-white focus:bg-red-600 focus:border-red-600 focus:ring focus:ring-red-100 active:text-white active:bg-red-600 active:border-red-600 active:ring active:ring-red-100 dark:ring-custom-400/20">Checkout</a>
            </div>
        </div>
    </div>
</div> -->
<div class="relative min-h-screen group-data-[sidebar-size=sm]:min-h-sm">

    <div
        class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
        <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">

            <div class="flex flex-col gap-2 py-4 md:flex-row md:items-center print:hidden">
                <div class="grow">
                    <h5 class="text-16">Basic Elements</h5>
                </div>
                <ul class="flex items-center gap-2 text-sm font-normal shrink-0">
                    <li
                        class="relative before:content-['\ea54'] before:font-remix ltr:before:-right-1 rtl:before:-left-1  before:absolute before:text-[18px] before:-top-[3px] ltr:pr-4 rtl:pl-4 before:text-slate-400 dark:text-zink-200">
                        <a href="#!" class="text-slate-400 dark:text-zink-200">Forms</a>
                    </li>
                    <li class="text-slate-700 dark:text-zink-100">
                        Basic Elements
                    </li>
                </ul>
            </div>
            <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-1">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('service-types.update', $serviceType->id) }}" method="post" files="true"
                            accept-charset="utf-8" multiple="true" enctype="multipart/form-data">
                            @csrf
                            @method("PUT")

                            <div class="mb-4">
                                <label for="name" class="inline-block mb-2 text-base font-medium">Name
                                    <span class="text-red-500">*</span></label>
                                <input id="name" type="text" name="name" value="{{ $serviceType->name }}"
                                    placeholder="Bangladesh"
                                    class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 @error('name') is-invalid @enderror">
                                @error('name')
                                <span class="mt-1 text-sm text-red-500">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="price" class="inline-block mb-2 text-base font-medium">Service Charge</label>
                                <input id="price" type="text" name="price" value="{{ $serviceType->price }}"
                                    placeholder="Service Price"
                                    class="form-input border-slate-200 dark:border-zink-500 focus:outline-none focus:border-custom-500 @error('price') is-invalid @enderror">
                                @error('price')
                                <span class="mt-1 text-sm text-red-500">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="mb-3 row">
                                <input type="submit"
                                    class="text-white transition-all duration-200 ease-linear btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100"
                                    value="Update">
                            </div>
                            <a href="{{ route('users.index') }}"
                                class="text-white transition-all duration-200 ease-linear btn bg-custom-500 border-custom-500 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100">&larr;
                                Back</a>


                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-wrapper -->
    @include('layouts.footer')
</div>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('assets/jodit-3.24.5/jodit.min.css') }}" />
<script src="{{ asset('assets/jodit-3.24.5/jodit.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.Jodit && document.querySelector('#area_editor')) {
            Jodit.make('#area_editor', {});
        }
    });
</script>
@endsection