@extends('pia.layouts.app')


@section('title','PIA profile')


@section('content')




            <!-- Main Content -->
            <div id="container-fluid">

               
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h4 mb-0 text-gray-800">PIA Profile</h1>
                    </div>

                    <!--profile view-->
                    <div class="row gutters-sm">

                        <!--left-->
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex flex-column align-items-center text-center">
                                        <div class="mt-3">
                                            <h4 class="text-dark"> @if (isset($pia_agency->agency_name)) {{ $pia_agency->agency_name  }} @endif</h4>
                                            <p class="text-secondary mb-1">@if (isset($pia_agency->District->name)) {{ $pia_agency->District->name  }} @endif</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-3">
                                <ul class="list-group list-group-flush">
                                    <li
                                        class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <h6 class="mb-0">Phone number</h6>
                                        <span class="text-secondary"> @if (isset($pia_agency->phone_number)) {{ $pia_agency->phone_number  }} @endif</span>
                                    </li>
                                    <li
                                        class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <h6 class="mb-0">Mobile number</h6>
                                        <span class="text-secondary">@if (isset($pia_agency->mobile_number)) {{ $pia_agency->mobile_number  }} @endif</span>
                                    </li>
                                    <li
                                        class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <h6 class="mb-0">Sector</h6>
                                        <span class="text-secondary">@if ( $pia_agency && NULL !== $pia_agency->sector_names()) {{ $pia_agency->sector_names()  }} @endif</span>
                                    </li>
                                    <li
                                        class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <h6 class="mb-0">PAN Number</h6>
                                        <span class="text-secondary">@if (isset($pia_agency->pan_number)) {{ $pia_agency->pan_number  }} @endif</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--left-->

                        <!--right-->
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">

                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Name of Agency</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->agency_name)) {{ $pia_agency->agency_name  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Email</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->email)) {{ $pia_agency->email  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Building Number/ Name</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->building_number)) {{ $pia_agency->building_number  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Street, Landmark</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->street_name)) {{ $pia_agency->street_name  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">Post Office</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->post_office)) {{ $pia_agency->post_office  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">District</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->District->name)) {{ $pia_agency->District->name  }} @endif
                                        </div>
                                    </div>
                                    <hr>

                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">State</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->State->name)) {{ $pia_agency->State->name  }} @endif
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <h6 class="mb-0">PIN code</h6>
                                        </div>
                                        <div class="col-sm-9 text-secondary">
                                        @if (isset($pia_agency->pincode)) {{ $pia_agency->pincode  }} @endif
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                        <!--right-->

                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">

                                    <h3>Change Password</h3>

                                    <form method="post" id="change_password_form" action="">

                                        @csrf

                                        <div class="form-group">
                                            <label for=""><b>Old Password</b><span style="color:red">*</span></label><br>
                                            <input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" type="password" class="form-control" id="old_password" name="old_password" placeholder="Enter old password" ><img src="{{asset('img/eye.svg')}}" width="20" height="20" style="position: absolute; right: 27px; top: 26%; transform: translateY(-50%); cursor: pointer;"
        id="togglePassword" onclick="togglePasswordVisibilityOldPassword()"> <a data-bs-toggle="tooltip" class="tooltip-k"
                                                 href="#" style="margin-top:82px;margin-right:27px;" title="At least one letter, one capital letter, one number. Minimum 8 characters"><img width="20"
                                                    src="{{asset('img/info.svg')}}" alt="" /></a>
                                           
                                            <span id="old_password_error" style="color:red"></span>
                                        </div>

                                        <div class="form-group">
                                            <label for=""><b>New Password</b><span style="color:red">*</span></label><br>
                                            <input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" type="password" class="form-control" id="new_password" name="new_password" placeholder="Enter new password" > <img src="{{asset('img/eye.svg')}}" width="20" height="20" style="position: absolute; right: 30px; top: 48%; transform: translateY(-50%); cursor: pointer;"
        id="togglePassword" onclick="togglePasswordVisibilityNewPassword()"> <a data-bs-toggle="tooltip" class="tooltip-k"
                                                 href="#" style="margin-top:168px;margin-right:27px;" title="At least one letter, one capital letter, one number. Minimum 8 characters"><img width="20"
                                                    src="{{asset('img/info.svg')}}" alt="" /></a>
                                            <span id="new_password_error" style="color:red"></span>
                                        </div>

                                        <div class="form-group" style="position:relative">
                                            <label for=""><b>Confirm Password</b><span style="color:red">*</span></label><br>
                                            <input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Enter Confirm Password" >
                                             <img src="{{asset('img/eye.svg')}}" width="20" height="20" style="margin-top:8px;position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
        id="togglePassword" onclick="togglePasswordVisibilityConfirmPassword()"> <a data-bs-toggle="tooltip" class="tooltip-k"
                                                 href="#" style="margin-top:30px;margin-right:5px;" title="At least one letter, one capital letter, one number. Minimum 8 characters"><img width="20"
                                                    src="{{asset('img/info.svg')}}" alt="" /></a>
                                            <span id="confirm_password_error" style="color:red"></span>
                                        </div>

                                        <div class="form-group">
                                            <button class="btn btn-primary" type="submit">Submit</button>
                                        </div>

                                    </form>




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

                    </div>
                    <!--profile view-->


                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->


@endsection