<x-app-layout>
    <x-slot name="header">
        <h1 class="mb-0 uppercase text-3xl">
            {{ __('Notificaiton Settings') }}
        </h1>
    </x-slot>

    @if(session()->has('message'))
    <div class="alert alert-success text-white p-4 bg-green-900 font-semibold text-l  mb-8">
        {{ session()->get('message') }}
    </div>
    @endif

    <div class="py-12">
        <div class="grid grid-cols-1">
            <div class="card">
                <div class="card-header flex justify-between">
                    <h3 class="card-title uppercase">
                        <i class="fas fa-cog"></i>
                        {{ __('Notificaiton Settings') }}
                    </h3>
                </div>
                <div class="card-body">

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

                    <form action="{{ route('email-settings.store') }}" method="POST">
                            @method('POST')
                            @csrf
                            <div class="p-5">
                                <div class="grid grid-cols-1 mb-4 gap-4">
                                    <label class="block form-label ">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Send mail on toner level?</span>
                                        <select name="is_active" 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">
                                            <option {{isset($notification['is_active']) && $notification['is_active'] == 0 ?'selected':''}} value="0">No</option>
                                            <option {{isset($notification['is_active']) && $notification['is_active'] == 1 ?'selected':''}} value="1">Yes</option>
                                        </select>
                                        @error('is_active')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                </div>
                                <div class="grid grid-cols-1 gap-4">
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Send Notification mail to:</span>
                                        <input value="{{$notification['notification_email']??old('notification_email')}}" type="text" name="notification_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('notification_email')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                    <label class="block form-label">
                                        <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block">Send on mail on toner level below of eqals to:</span>
                                        <input value="{{$notification['toner_level']??old('toner_level')}}" type="number" min="2" name="toner_level" 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('toner_level')
                                        <div class="alert alert-danger mt-3 text-red-900">{{ $message }}</div>
                                        @enderror
                                    </label>
                                </div>
                                <div class="mt-10">
                                    <input type="submit" value="Update" 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:text-gray-800 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">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

</x-app-layout>