@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" method="POST" action="{{ route('admin.update_profile') }}" enctype="multipart/form-data">
            @csrf

            <div class="d-flex align-items-start gap-3 mt-2">
                <img src="{{ $user->profile_img 
    ? asset('storage/profile/'.$user->profile_img) 
    : asset('assets/img/login.png') }}"
                    class="rounded" width="100" id="uploadedAvatar">

                <div>
                    <label for="upload" class="btn btn-primary mb-2">Upload</label>
                    <input type="file" id="upload" name="profile_img" hidden accept="image/png, image/jpeg">
                    <div>Allowed JPG or PNG. Max size 800K</div>
                </div>
            </div>

            <div class="card-body pt-4">

                {{-- ================= BASIC DETAILS ================= --}}
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control"
                            value="{{ $user->name ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label>Email</label>
                        <input type="email" name="email" class="form-control"
                            value="{{ $user->email ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label>Phone</label>
                        <input type="text" name="mobile" class="form-control"
                            value="{{ $user->phone_number ?? '' }}">
                    </div>
                </div>

                {{-- ================= BANK DETAILS ================= --}}
                <h5 class="mt-3">Bank Details</h5>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label>Account Holder</label>
                        <input type="text" name="account_holder" class="form-control"
                            value="{{ $userDetails->account_holder ?? '' }}">
                    </div>

                    <div class="col-md-6">
                        <label>Account Number</label>
                        <input type="text" name="account_number" class="form-control"
                            value="{{ $userDetails->account_number ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label>Bank Name</label>
                        <input type="text" name="bank_name" class="form-control"
                            value="{{ $userDetails->bank_name ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label>Branch</label>
                        <input type="text" name="branch_name" class="form-control"
                            value="{{ $userDetails->branch_name ?? '' }}">
                    </div>

                    <div class="col-md-4">
                        <label>IFSC</label>
                        <input type="text" name="ifsc" class="form-control"
                            value="{{ $userDetails->ifsc ?? '' }}">
                    </div>
                </div>

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

                <div class="row g-3">
                    <div class="col-md-6">
                        <label>PAN</label>
                        <input type="text" name="pan_number" class="form-control"
                            value="{{ $userDetails->pan_number ?? '' }}">
                    </div>

                    <div class="col-md-6">
                        <label>Aadhar</label>
                        <input type="text" name="aadhar_number" class="form-control"
                            value="{{ $userDetails->aadhar_number ?? '' }}">
                    </div>
                </div>

                {{-- ================= SUBMIT ================= --}}
                <div class="text-center mt-4">
                    <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