@extends('layouts.app')

@section('style')
<link rel="stylesheet" href="{{ asset('assets/css/croppr.min.css') }}">
<style>
    .previewImg canvas, .previewImg img {
        width: 100px;
        height: 100px;
        margin: 0;
    }
    .previewImg img, .previewImg canvas {
        border-radius: 50%;
    }
    table th, table tr {
        border: none;
        border-bottom: 1px solid #dfdfdf;
    }

    table th {
        background-color: #f7f7f7 !important;
        min-width: 100px !important;
        width: 200px !important;
        max-width: 200px !important;
    }
    /* .profile-pic-btns a {
        background-color: #008cff;
        cursor: pointer;
        padding: 2px 12px 2px;
        text-transform: capitalize;
        font-weight: 700;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        border-radius: 4px;
        margin-top: 10px;
        margin-bottom: 20px;
    } */
    .previewImg canvas {
        display: none;
    }
    .social-section-wrap label img {
        margin-right: 5px;
        width: 20px;
    }
    .light-modal-close-btn {
        text-transform: uppercase;
    }
    li.disabled {
        pointer-events: none;
    }
    @media screen and (max-width: 575px) {
        table th {
            width: 150px !important;
            max-width: 150px !important;
        }
    }
</style>
<style>
.image_area {
  position: relative;
}
#modalForImageCropper img {
    display: block;
    max-width: 100%;
}
#modalForImageCropper .preview {
      overflow: hidden;
      width: 160px;
      height: 160px;
      margin: 10px;
      border-radius: 50%;
}
.overlay {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  height: 0;
  transition: .5s ease;
  width: 100%;
}
.image_area:hover .overlay {
  height: 50%;
  cursor: pointer;
}
.cropper-bg {
    background: #fff !important;
}
#modalForImageCropper .light-modal-close-btn:last-child:hover {
    background-color: #4e4e4e;
}
#modalForImageCropper .light-modal-close-btn:last-child {
    font-size: 16px;
    color: #fff;
    background-color: #373737;
    border-radius: 4px;
    border: 1px solid #373737;
    padding: 5px 10px;

}
#modalForImageCropper .light-modal-close-btn:first-child:hover {
    border-color: #373737;
}
#modalForImageCropper .light-modal-close-btn:first-child {
        cursor: pointer;
    background-color: transparent;
    color: #373737;
    font-weight: 400;
    box-shadow: none;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid #c6c6c6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 5px 10px;
}
#modalForImageCropper .modal-footer {
    padding: 17px 20px;
    background: rgb(255 255 255);
    border-top: 1px solid #e1e1e1;
    border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    -o-border-radius: 0 0 8px 8px;;
}
#modalForImageCropper .modal-content {
    border-radius: 8px;
}
#modalForImageCropper .modal-dialog .modal-body {
    overflow: auto;
    max-height: 70vh;
}
#modalForImageCropper .modal-dialog .modal-body .sticky-sidebar {
    top: 10px;
}
@media screen and (max-width: 767px) {
    #modalForImageCropper .modal-dialog .modal-body .cropper-preview {
        display: none;
    }
}
</style>
@endsection

@section('content')
<div class="user-profile-section pb-90">
    <div class="container">
        <div class="checkout-wrap">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card_errors"></div>
                    <div class="card_success"></div>
                    <div class="wizard-form">
                        <form class="form-register cardEditForm" id="form-register" action="{{route('card_profile.store')}}" method="post">
                            @csrf
                            @method('POST')
                            <div id="form-total">
                                <!-- SECTION 1 -->
                                <h2>
                                <span class="step-icon">
                                    1
                                </span>
                                <span class="step-text">Personal Information</span>
                                </h2>
                                <section>
                                    <h4 class="moblie-user-heading">Personal Information</h4>
                                    <div class="inner user-profile-wrap">