@extends('adminlte::page')

@section('title', 'IPRS | Contract Form')

@section('content_header')
    <div>
        <div class="col-9 mx-auto">
            <div class="container">
                <div class="row mb-2">
                    <div class="col-sm-6 p-0">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">My Account</li>
                        </ol>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1 class="m-0">My Account</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop

@section('content')
    <div>
        <div class="col-9 mx-auto px-0">
            <div class="container">
                <div class="mb-3">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-3 p-3 bg-white rounded">
                        <div class="d-flex justify-content-center align-items-center mb-2 mb-md-0 rounded-circle bg-gradient-navy" style="width: 44px; height: 44px;">
                            <img class="img-circle elevation-2" src="{{ Auth::User()->adminlte_image() }}" alt="User avatar">
                        </div>

                        <div class="d-flex flex-column ml-3">
                            <h5 class="mb-0">{{ Auth::user()->name }}</h5>
                            <p class="text-secondary mb-0">{{ Auth::User()->email }}</p>
                        </div>
                    </div>
                </div>
                <form method="PATCH" action="" enctype="application/x-www-form-urlencoded">
                    @csrf
                    @method('PATCH')

                    <fieldset>
                        <legend>Change Password</legend>
                        <div class="row">
                            <x-adminlte-input type="password" class="form-control" id="BOSS_SURN" name="BOSS_SURN"
                                              label="Current Password" placeholder="Current Password" enable-old-support
                                              fgroup-class="col-md-4"/>

                            <x-adminlte-input type="password" class="form-control" id="BOSS_NAME" name="BOSS_NAME"
                                              label="New Password" placeholder="New Password"
                                              fgroup-class="col-md-4"/>

                            <x-adminlte-input type="password" class="form-control" id="BOSS_OTHNAME" name="BOSS_OTHNAME"
                                              label="Confirm Password" placeholder="Confirm Password"
                                              fgroup-class="col-md-4"/>
                        </div>
                        <div>
                            <button type="submit" name="save" class="btn btn-success ml-3">Change Password</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
@stop

@section('js')

@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/styles.css') }}">
    <style>
        fieldset {
            background-color: white;
            padding-block-start: 0.35em;
            padding-inline-start: 1.25em;
            padding-inline-end: 1.25em;
            padding-block-end: 0.625em;
            margin: 0 0 1em 0;
            border: 1px groove rgb(192, 192, 192);
            border-radius: 5px;
        }

        legend {
            background-color: #356eac;
            color: white;
            width: auto;
            font-size: medium;
            padding: 5px 10px;
            border-radius: 5px;
        }

        button{
            background-color: #14b04c;
        }

        .btn-primary{
            background-color: #356eac;
        }

        .btn-success{
            margin-bottom: 25px;
        }

        h3{
            margin-top: 1.5rem !important;
        }

        .content-header .breadcrumb{
            padding-left: 10px;
        }
    </style>
@stop
