@extends('admin.layout.master')
@section('content')

<div class="content-wrapper">
    <div class="content">
        <div class="card card-default">
            <div class="card-header">
                <h2>Update User</h2>
            </div>
        </div>

        <div class="card card-default">
            <div class="card-body">
                @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('userdetails.update',$userdetails->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="full_name">Full Name*</label>
                                <input type="text" class="form-control" name="full_name" placeholder="Enter Full Name" value="{{ old('full_name',$userdetails->name) }}" required>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="email">Email*</label>
                                <input type="email" class="form-control" name="email" placeholder="Enter Email" value="{{ old('email',$user->email) }}" required>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="mobile">Mobile*</label>
                                <input type="text" class="form-control" name="mobile" placeholder="Enter Mobile Number" value="{{ old('mobile',$userdetails->phone_number) }}" minlength="10" maxlength="10" pattern="[6-9][0-9]{9}$" title="Please enter a valid 10-digit number starting with 6, 7, 8, or 9." oninput="validateContact(this)" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="whatsapp">Whatsapp Number</label>
                                <input type="text" class="form-control" name="whatsapp" placeholder="Enter whatsapp Number" value="{{ old('whatsapp',$userdetails->wp_number) }}" minlength="10" maxlength="10" pattern="[6-9][0-9]{9}$" title="Please enter a valid 10-digit number starting with 6, 7, 8, or 9." oninput="validateContact(this)">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="aadhar">Aadhar No(Last 4 digit)</label>
                                <input type="aadhar" class="form-control" name="aadhar" placeholder="Enter Aadhar No" value="{{ old('aadhar',$userdetails->aadhar_number) }}" minlength="4" maxlength="4" pattern="[1-9][0-9]{3}$" title="Please enter last 4 digit number" oninput="validateAadhar(this)">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="dob">DOB*</label>
                                <input type="date" class="form-control" name="dob" placeholder="Enter DOB" value="{{ old('dob',$userdetails->dob) }}" onkeydown="return false;" required>
                            </div>
                        </div>

                    </div>

                    <div class=" row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="pincode">Pincode*</label>
                                <input type="text" class="form-control" id="pincode" name="pincode" placeholder="Enter Pincode" value="{{ old('pincode',$userdetails->pincode) }}" oninput="validatePincode(this)" minlength="6" maxlength="6" pattern="[0-9]{6}$" title="Please enter a valid 6-digit number" required>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="state">State*</label>
                                <input type="text" class="form-control" id="state" name="state" placeholder="Enter State" value="{{ old('state', $userdetails->state->state_name ) }}" readonly>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="district">District*</label>
                                <input type="text" class="form-control" id="district" name="district" placeholder="Enter District" value="{{ old('district', $userdetails->dist->dist_name) }}" readonly>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="city">City*</label>
                                <input type="text" class="form-control" id="city" name="city" placeholder="Enter City/District" value="{{ old('city', $userdetails->city->city_name) }}" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="address">Address*</label>
                                <input type="text" class="form-control" name="address" placeholder="Enter Address" required value="{{ old('address',$userdetails->address) }}" required>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="locality">Locality/Town*</label>
                                <input type="text" class="form-control" name="locality" placeholder="Enter Locality" value="{{ old('locality',$userdetails->locality) }}" required>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Gender*</label>
                                <div>
                                    <input type="radio" name="gender" value="Male" {{ old('gender',$userdetails->gender) == 'Male' ? 'checked' : '' }} checked> Male
                                    <input type="radio" name="gender" value="Female" {{ old('gender',$userdetails->gender) == 'Female' ? 'checked' : '' }}> Female
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label>Profile Image*</label>
                                <input type="file" class="form-control-file" name="profile_photo" id="iconInput" onchange="previewIcon(event)">
                                @if ($errors->has('profile_img'))
                                <span class="text-danger">{{ $errors->first('profile_img') }}</span>
                                @endif
                            </div>
                            <div id="iconImagePreview" class="mt-2">
                                @if($userdetails->image)
                                <img src="{{ asset('storage/images/'.$userdetails->image) }}" alt="Icon Preview" style="max-width: 100px; max-height: 100px;">
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="form-footer pt-5">
                        <button type="submit" class="btn btn-primary btn-pill">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script>
    function validatePincode(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '').slice(0, 6);

        if (oldValue !== input.value && /[^0-9]/.test(oldValue)) {
            alert("Only numbers are allowed in the pincode.");
        }
        if (input.value.length === 6 && !/^[1-9][0-9]{5}$/.test(input.value)) {
            alert("Invalid Pincode! It must be a 6-digit number starting from 1-9.");
            input.value = "";
        } else if (input.value.length === 6) {
            fetchLocation(input.value);
        }
    }

    function fetchLocation() {
        var pincode = document.getElementById("pincode").value;

        if (pincode.length !== 6) {
            return;
        }

        fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + pincode + "&key=AIzaSyDacwsbFXK1yJdSeyrvv7g4HEPa4Qmsiao")
            .then(response => response.json())
            .then(data => {
                if (data.status === "OK" && data.results.length > 0) {
                    let addressComponents = data.results[0].address_components;
                    let city = "",
                        district = "",
                        state = "";

                    addressComponents.forEach(component => {
                        if (component.types.includes("locality") || component.types.includes("postal_town")) {
                            city = component.long_name;
                        }
                        if (component.types.includes("administrative_area_level_3")) {
                            district = component.long_name;
                        }
                        if (component.types.includes("administrative_area_level_1")) {
                            state = component.long_name;
                        }
                    });

                    document.getElementById("city").value = city || "Not found";
                    document.getElementById("district").value = district || "Not found";
                    document.getElementById("state").value = state || "Not found";
                } else {
                    alert("Location details not found for this pincode.");
                }
            })
            .catch(error => console.error("Error fetching location:", error));
    }
</script>

<script>
    function validateContact(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '').slice(0, 10);

        if (oldValue !== input.value && /[^0-9]/.test(oldValue)) {
            alert("Only numbers are allowed in the contact number.");
        }

        if (input.value.length > 0 && !/^[6-9]/.test(input.value)) {
            alert("Contact number must start with 6-9");
            input.value = '';
        }
    }

    function validateAadhar(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '').slice(0, 4);

        if (oldValue !== input.value && /[^0-9]/.test(oldValue)) {
            alert("Only numbers are allowed.");
        }
        if (input.value.length === 4 && !/^[1-9][0-9]{3}$/.test(input.value)) {
            alert("Invalid Aadhar Number! Enter the last 4 digits (must be numbers & not start with 0).");
            input.value = "";
        }
    }
</script>
<script>
    function previewIcon(event) {
        let preview = document.getElementById('iconImagePreview');
        preview.innerHTML = '';
        let file = event.target.files[0];

        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                preview.innerHTML = `
                    <div class="position-relative">
                        <img src="${e.target.result}" width="100" height="100" style="border-radius: 5px;">
                    </div>
                `;
            };
            reader.readAsDataURL(file);
        }
    }
</script>

@endsection