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

<div class="content-wrapper">
    <div class="content">
        <div class="card card-default">
            <div class="card-header">
                <h2>Create 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.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <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') }}" 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') }}" required>
                            </div>
                        </div>

                        <!-- <div class="col-sm-4">
                            <div class="form-group">
                                <label for="password">Password*</label>
                                <input type="password" class="form-control" name="password" placeholder="Enter Password" required>
                            </div>
                        </div> -->
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="password">Password*</label>
                                <input
                                    type="password"
                                    class="form-control"
                                    name="password"
                                    id="passwordInput"
                                    placeholder="Enter 6-character Password"
                                    pattern=".{6}"
                                    maxlength="6"
                                    required>
                                <div class="text-danger mt-1" id="passwordError" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="mobile">Mobile*</label>
                                <input type="text" class="form-control" name="mobile" placeholder="Enter Mobile Number" value="{{ old('mobile') }}" 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 class="col-sm-3">
                            <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') }}" 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-3">
                            <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" 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-3">
                            <div class="form-group">
                                <label for="dob">DOB*</label>
                                <input type="date" class="form-control" name="dob" placeholder="Enter DOB" value="{{ old('dob') }}" 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" 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" 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" 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" 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') }}" 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') }}" 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') == 'Male' ? 'checked' : '' }} checked> Male
                                    <input type="radio" name="gender" value="Female" {{ old('gender') == 'Female' ? 'checked' : '' }}> Female
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="profile_photo">Profile Photo*</label>
                                <input type="file" class="form-control-file" name="profile_photo" id="profilePhotoInput" required>
                                <div id="profilePhotoPreview" class="mt-2"></div>
                            </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>
    document.getElementById('profilePhotoInput').addEventListener('change', function(event) {
        let preview = document.getElementById('profilePhotoPreview');
        preview.innerHTML = '';
        let file = event.target.files[0];

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

<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>
    document.getElementById('passwordInput').addEventListener('input', function() {
        const password = this.value;
        const errorDiv = document.getElementById('passwordError');

        if (password.length < 6) {
            errorDiv.textContent = "Password must be exactly 6 characters.";
            errorDiv.style.display = "block";
        } else if (password.length > 6) {
            errorDiv.textContent = "Password cannot be more than 6 characters.";
            errorDiv.style.display = "block";
        } else {
            errorDiv.textContent = "";
            errorDiv.style.display = "none";
        }
    });
</script>

@endsection