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

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

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="vendor_type">Vendor type*</label>
                                <select name="vendor_type" id="vendor_type" class="form-control">
                                    <option value="">Not Selected</option>
                                    <option value="nurshing-service-agency" {{ old('vendor_type') == 'nurshing-service-agency' ? 'selected' : '' }}>Nurshing Service Agency</option>
                                    <option value="equipment-supplier" {{ old('vendor_type') == 'equipment-supplier' ? 'selected' : '' }}>Equipment Supplier</option>
                                    <option value="hospital-tyre-1" {{ old('vendor_type') == 'hospital-tyre-1' ? 'selected' : '' }}>Hospital Tyre-1</option>
                                    <option value="hospital-tyre-1" {{ old('vendor_type') == 'hospital-tyre-2' ? 'selected' : '' }}>Hospital Tyre-2</option>
                                    <option value="hospital-tyre-3" {{ old('vendor_type') == 'hospital-tyre-3' ? 'selected' : '' }}>Hospital Tyre-3</option>
                                    <option value="clinic" {{ old('vendor_type') == 'clinic' ? 'selected' : '' }}>Clinic</option>
                                    <option value="medicine-shop" {{ old('vendor_type') == 'medicine-shop' ? 'selected' : '' }}>Medicine Shop</option>
                                    <option value="dignostice-center" {{ old('vendor_type') == 'dignostice-center' ? 'selected' : '' }}>Dignostice Center </option>
                                    <option value="patholab" {{ old('vendor_type') == 'patholab' ? 'selected' : '' }}>PathoLab </option>
                                    <option value="private-transporation-service" {{ old('vendor_type') == 'private-transporation-service' ? 'selected' : '' }}>Private Transporation Service </option>
                                    <option value="home-care-service" {{ old('vendor_type') == 'home-care-service' ? 'selected' : '' }}>Home Care Service </option>
                                    <option value="freelance" {{ old('vendor_type') == 'freelance' ? 'selected' : '' }}>Freelance </option>
                                    <option value="other" {{ old('vendor_type') == 'other' ? 'selected' : '' }}>Other </option>
                                </select>
                            </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') }}">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="password">Password*</label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter Password">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="vendorname">Owner Name*</label>
                                <input type="text" class="form-control" name="vendorname" placeholder="Enter Vendor Name" value="{{ old('vendorname') }}">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="gender">Gender*</label>
                                <select name="gender" id="gender" class="form-control">
                                    <option value="">Not Selected</option>
                                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                    <option value="others" {{ old('gender') == 'others' ? 'selected' : '' }}>Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="companyname">Company Name*</label>
                                <input type="text" class="form-control" name="companyname" placeholder="Enter Company Name" value="{{ old('companyname') }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="gstno">GST No*</label>
                                <input type="text" class="form-control" id="gstno" name="gstno" placeholder="Enter GST No" value="{{ old('gstno') }}" pattern="^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[0-9A-Z]{1}[Z]{1}[0-9A-Z]{1}$" minlength="15" maxlength="15" oninput="validateGST(this)">
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="licenceno">Licence No*</label>
                                <input type="text" class="form-control" name="licenceno" id="licenceno" placeholder="Enter Licence No" value="{{ old('licenceno') }}" pattern="^[A-Za-z0-9]{6,20}$" minlength="6" maxlength="20" oninput="validateLicence(this)">
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="contactno">Contact No*</label>
                                <input type="text" class="form-control" name="contactno" id="contactno" placeholder="Enter Contact No" value="{{ old('contactno') }}" 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="alternate">Alternate contact No</label>
                                <input type="text" class="form-control" name="alternate" id="alternate" placeholder="Enter Alternate Contact No" value="{{ old('alternate') }}" 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>

                    <div class="row">
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="companydocument">Company Documents*</label>
                                <input type="file" class="form-control-file" name="companydocument[]" id="companydocument" multiple>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="gstdocument">GST Document*</label>
                                <input type="file" class="form-control-file" name="gstdocument" id="gstdocument">
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="certificate">Certificate*</label>
                                <input type="file" class="form-control-file" name="certificate" id="certificate">
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="vendorimage">Vendor Logo*</label>
                                <input type="file" class="form-control-file" name="vendorimage" id="vendorimage">
                            </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}$">
                            </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-12">
                            <div class="form-group">
                                <label for="address">Address*</label>
                                <textarea class="form-control" id="address" name="address" rows="2" placeholder="Enter Address">{{ old('address') }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="service_name">Service Name</label>
                                <div>
                                    @foreach($services as $service)
                                    <div class="form-check">
                                        <input
                                            type="checkbox"
                                            class="form-check-input"
                                            name="service_id[]"
                                            id="service_{{ $service->id }}"
                                            value="{{ $service->id }}"
                                            {{ in_array($service->id, old('service_id', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="service_{{ $service->id }}">
                                            {{ $service->service_name }}
                                        </label>
                                    </div>
                                    @endforeach
                                </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>
    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 validateGST(input) {
    //     let oldValue = input.value;
    //     input.value = input.value.replace(/[^0-9A-Z]/g, '').toUpperCase();

    //     if (oldValue !== input.value && /[a-z]/.test(oldValue)) {
    //         alert("Only capital letters are allowed in the GST number.");
    //     }
    // }
    function validateGST(input) {
        let currentValue = input.value.toUpperCase();
        let sanitizedValue = currentValue.replace(/[^0-9A-Z]/g, '');

        if (currentValue !== sanitizedValue) {
            input.value = sanitizedValue;
        }
    }

    function validateLicence(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^A-Za-z0-9]/g, '');

        if (oldValue !== input.value && /^[A-Za-z0-9]{6,20}$/.test(oldValue)) {
            alert("Licence number must be 6-20 alphanumeric characters (letters and numbers only).");
        }
    }
</script>
@endsection