@extends('Admin.layout')
@section('content')
    <div class="row align-items-center justify-content-between mb-2">
        <div class="col-12 col-md-auto text-md-start">
            <h5 class="mb-0"> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ url()->previous() }}">
                        <!-- back svg -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>Profile</h5>
        </div>

    </div>

    <div class="row me-3">
        <div class="card m-3">
            <h4 class="mt-2">Profile</h4>

            <form id="login_form" action="#" enctype="multipart/form-data">
                @csrf

                <div class="d-flex align-items-start align-items-sm-center gap-6 mt-2">

                    <img src="{{asset('assets/img/login.png') }}" class="d-block w-px-100 h-px-100 rounded"
                        id="uploadedAvatar">


                    <div class="button-wrapper">
                        <label for="upload" class="btn btn-primary me-3 mb-4">
                            Upload
                        </label>

                        <input type="file" id="upload" name="profile_image" hidden accept="image/png, image/jpeg">

                        <div>Allowed JPG or PNG. Max size 800K</div>
                    </div>
                </div>

                <div class="card-body pt-4">
                    <div class="row gy-4 gx-6 mb-6">

                        <div class="col-lg-4">
                            <label class="form-label">Name</label>
                            <input class="form-control" type="text" name="name">
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">Email</label>
                            <input class="form-control" type="email" name="email">
                        </div>

                        <div class="col-lg-4">
                            <label class="form-label">Phone</label>
                            <input class="form-control" type="text" name="mobile">
                        </div>

                    </div>
                    <h5 class="mt-4 mb-3">Bank Details</h5>

                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="account_holder" placeholder="Account Holder Name"
                                value="{{ old('account_holder') }}">

                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Account Number <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="account_number" placeholder="Account Number"
                                value="{{ old('account_number') }}">

                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Bank Name <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="bank_name" placeholder="Bank Name"
                                value="{{ old('bank_name') }}">

                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Branch Name <span class="text-danger">*</span></label>

                            <input type="text" class="form-control @error('branch_name') is-invalid @enderror"
                                name="branch_name" placeholder="Branch Name" value="{{ old('branch_name') }}">

                        </div>

                        <div class="col-md-4">
                            <label class="form-label">IFSC Code <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="ifsc" placeholder="IFSC Code"
                                value="{{ old('ifsc') }}">

                        </div>

                    </div>

                    {{-- ================= KYC DETAILS ================= --}}
                    <h5 class="mt-4 mb-3">KYC Details</h5>

                    <div class="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">PAN Number <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="pan_number" placeholder="PAN Number"
                                value="{{ old('pan_number') }}">

                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Aadhar Number <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" name="aadhar_number" placeholder="Aadhar Number"
                                value="{{ old('aadhar_number') }}">

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

                <div class="text-center mb-3"> <button type="button" class="btn btn-primary" id="finalSubmit">
                        Save Changes
                    </button></div>
        </div>
        </form>
    </div>
    </div>

    <script>
        document.getElementById('finalSubmit').addEventListener('click', function () {
            this.disabled = true;
            this.innerText = 'Processing...';
            document.getElementById('login_form').submit();
        });
    </script>

    <script>
        document.getElementById('upload').addEventListener('change', function (event) {
            const file = event.target.files[0];
            const preview = document.getElementById('uploadedAvatar');

            if (!file) return;

            const allowedTypes = ['image/jpeg', 'image/png'];
            if (!allowedTypes.includes(file.type)) {
                alert('Only JPG and PNG images are allowed');
                event.target.value = '';
                return;
            }

            const maxSize = 800 * 1024;
            if (file.size > maxSize) {
                alert('Image must be less than 800KB');
                event.target.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = e => preview.src = e.target.result;
            reader.readAsDataURL(file);
        });
    </script>

@endsection