<x-app-layout>
<x-slot name="header">
        <h1 class="mb-0">
            {{ $action }}
        </h1>
    </x-slot>

    @if(session()->has('message'))
            <div class="alert-success">
                {{ session()->get('message') }}
            </div>
            @endif

    <div class="grid grid-cols-1">
        <div class="card">
            <div class="card-header flex justify-between">
                <h3 class="card-title">
                    <i class="fas fa-plus"></i>
                    {{ $action }}
                </h3>
                <a href="{{ route('vendors.index') }}" class="btn btn-primary w-max">Back to list</a>
            </div>

          

            <div class="card-body">

                <div class="shadow-sm overflow-hidden mb-8  ">

                @if($vendors)
                        <form action="{{ route('vendors.update', $vendors['id']) }}" method="POST">
                            <input value="{{$vendors['id']}}" type="hidden" name="vendor_id" />
                            @method('PUT')
                            @else
                            <form action="{{ route('vendors.store') }}" method="POST">
                                @endif
                                @csrf
                            <div class="p-6">
                                <div class="grid grid-cols-2 gap-4 mb-5">
                                    <label class="block form-label col-span-2">
                                            <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Vendor name</span>
                                            <input required value="{{$vendors['vendor_name']??old('vendor_name')}}" type="text" name="vendor_name" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="" />
                                            @error('vendor_name')
                                            <div class="alert-danger mt-3 text-red-900">{{ $message }}</div>
                                            @enderror
                                        </label>
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-5">
                                    <label class="block form-label col-span-2">
                                            <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">contact email</span>
                                            <input required value="{{$vendors['contact_email']??old('contact_email')}}" type="text" name="contact_email" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="" />
                                            @error('contact_email')
                                            <div class="alert-danger mt-3 text-red-900">{{ $message }}</div>
                                            @enderror
                                        </label>
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-5">
                                    <label class="block form-label col-span-2">
                                            <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">phone number</span>
                                            <input required value="{{$vendors['phone_number']??old('phone_number')}}" type="text" name="phone_number" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="" />
                                            @error('phone_number')
                                            <div class="alert-danger mt-3 text-red-900">{{ $message }}</div>
                                            @enderror
                                        </label>
                                </div>

                                <div class="grid grid-cols-2 gap-4 mb-5">
                                    <label class="block form-label col-span-2">
                                            <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">comapny name</span>
                                            <input required value="{{$vendors['comapny_name']??old('comapny_name')}}" type="text" name="comapny_name" class="form-input mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="" />
                                            @error('comapny_name')
                                            <div class="alert-danger mt-3 text-red-900">{{ $message }}</div>
                                            @enderror
                                        </label>
                                </div>
                                
                                
                                
                                <div class="mt-10">
                                    <input type="submit" value="Save" class="btn-primary inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark: uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                    <a href="{{ route('vendors.index') }}" class="ml-5 inline-flex items-center px-4 py-2 bg-red-800 dark:bg-red-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-red-800 uppercase tracking-widest hover:bg-red-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-red-800 transition ease-in-out duration-150">Cancel</a>
                                </div>
                            </div>
                        </form>
                </div>
            </div>

        </div>
    </div>

  
</x-app-layout>