@extends('admin.layouts.default')
@section('content')
<main class="overflow-y-scroll no-scrollbar mb-10">
    <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10 ">
        {!! htmlScriptTagJsApi() !!}
        @include('admin.layouts.partials.breadcrumb')       
        <div class="rounded-md border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
            <div class="p-6.5">
                <div class="flex justify-between mb-3">
                    <h5 class="text-left text-xl">{{__('admin.change_password')}}</h5>
                    <small class="text-white bg-blue-700 p-2 rounded">{{$model->role()->first()->name}}</small>
                </div>
                <div class="border rounded-md p-3">
                    {{ html()->form('POST')->route('admin.change-password.store',$model->id)->acceptsFiles()->open() }}                    
                    <div class="grid grid-cols-1 gap-5">
                        <div class="mb-4.5 w-full">
                            {{ html()->label(__('admin.current_password'))->class('mb-2.5 font-semibold text-black dark:text-white') }}
                            {{ html()->span('*')->class('text-danger') }}                            
                            {{ html()->password('current_password', null)->class(
                            'w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none
                            transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter
                            dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary' .
                            ($errors->has('current_password') ? ' border-red-500' : ''),
                            )->placeholder('xxxxxxxxx') }}
                            @include('admin.layouts.components.validation', ['name' => 'current_password'])
                           
                        </div>
                        <div class="mb-4.5 w-full">
                            {{ html()->label(__('admin.new_password'))->class('mb-2.5 font-semibold text-black dark:text-white') }}
                            {{ html()->span('*')->class('text-danger') }}                            
                            {{ html()->password('password', null)->class(
                            'w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none
                            transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter
                            dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary' .
                            ($errors->has('password') ? ' border-red-500' : ''),
                            )->placeholder('xxxxxxxxx') }}
                            @include('admin.layouts.components.validation', ['name' => 'password'])
                           
                        </div>
                        <div class="mb-4.5 w-full">
                            {{ html()->label(__('admin.confirm_new_password'))->class('mb-2.5 font-semibold text-black dark:text-white') }}
                            {{ html()->span('*')->class('text-danger') }}                            
                            {{ html()->password('password_confirmation', null)->class(
                            'w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 font-medium outline-none
                            transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter
                            dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary' .
                            ($errors->has('password_confirmation') ? ' border-red-500' : ''),
                            )->placeholder('xxxxxxxxx') }}
                            @include('admin.layouts.components.validation', ['name' => 'password_confirmation'])                           
                        </div>  
                    </div>
                    <div class="mb-4.5 w-full">
                        <div class="col-md-8 offset-md-4">
                            <button type="submit"
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                {{__('admin.update')}}
                            </button>
                        </div>
                    </div>
                    {{ html()->form()->close() }}
                </div>
            </div>
        </div>
    </div>
</main>
@endsection