<script type="text/javascript">
$(document).ready(function(){
	$("#frm-payclinic").submit(function(e){
            // Basic validation
            var name = $("#name");
            var email = $("#email");
            
            if(name.val()==''){
                name.focus();
                alert("Name is required");
                return false;
            }
             if(email.val()==''){
                email.focus();
                 alert("Email is required");
                return false;
            }
            // Add more validation as needed
            return true;
	});
    
    // Email duplication check
    $("#email").blur(function(){
            var email = $("#email");
            var emailmsg = $("#msg_email");
            if(email.val()==""){
               // email.addClass('error');email.focus();emailmsg.html('Please enter email').show();
                return false;
            }
            if($("#id").length > 0){var id = $("#id").val();
            }else{var id = '';}
            
            $.ajax({
                url: "payClinicAdd.php",
                data: 'act=validate_email&email='+email.val()+'&id='+id,
                method: 'POST',
                success: function(msg){
                    if(msg!=''){
                        email.addClass('error');email.focus();emailmsg.html(msg).show();
                        $("#submit").prop('disabled', true);
                        return false;
                    }else{
                        $("#submit").prop('disabled', false);
                        email.removeClass('error');emailmsg.hide();
                    }
                }
            });
	});
});
</script>

<div class="breadcrumb">
    <h1>Pay Clinics</h1>
    <ul>
        <li><a href="<?php echo SITE_URL.ADMIN_DIR ?>">Dashboard</a></li>
        <li><a href="payClinicList.php">Pay Clinic List</a></li>
        <li><?php echo (isset($clinicDetail->id) && $clinicDetail->id!=0) ? 'Edit' : 'Add New' ?> Pay Clinic</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-body">
                <div class="card-title mb-3"><?php echo (isset($clinicDetail->id) && $clinicDetail->id!=0) ? 'Edit' : 'Add New' ?> Pay Clinic</div>
                <form action="" id='frm-payclinic' method="post" enctype="multipart/form-data">
                    <?php if(isset($clinicDetail->id) && $clinicDetail->id!=0) { ?>
                       <input type="hidden" id="id" name="id" value="<?php echo $clinicDetail->id ?>" />
                    <?php } ?>
                    <div class="row">
                    	<div class="col-md-6 form-group mb-3">
                            <label for="name">Name <span class="asterisk">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" value="<?php echo isset($clinicDetail->name) ? $clinicDetail->name : ''; ?>" placeholder="Enter name">
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="email">Email <span class="asterisk">*</span></label>
                            <input type="email" class="form-control" id="email" name="email" value="<?php echo isset($clinicDetail->email) ? $clinicDetail->email : ''; ?>" placeholder="Enter email">
                             <div class="invalid-tooltip" id="msg_email"></div>
                        </div>
                        <div class="col-md-6 form-group mb-3">
                            <label for="phone">Phone</label>
                            <input type="text" class="form-control" id="phone" name="phone" value="<?php echo isset($clinicDetail->phone) ? $clinicDetail->phone : ''; ?>" placeholder="Enter phone">
                        </div>
                         <div class="col-md-6 form-group mb-3">
                            <label for="password">Password <?php echo (isset($clinicDetail->id) && $clinicDetail->id!=0) ? '(Leave blank to keep unchanged)' : '<span class="asterisk">*</span>' ?></label>
                            <input type="password" class="form-control" id="password" name="password" value="" placeholder="Enter password">
                        </div>
                         <div class="col-md-6 form-group mb-3">
                            <label for="domain">Domain</label>
                            <select class="form-control" id="domain" name="domain">
                                <option value="">Select Domain</option>
                                <?php if($domainList && count($domainList)>0){ 
                                    foreach($domainList as $domain){
                                ?>
                                <option value="<?php echo $domain->domain_id; ?>" <?php echo (isset($clinicDetail->domain) && $clinicDetail->domain==$domain->domain_id) ? "selected='selected'" : "" ?>><?php echo $domain->domain_title; ?></option>
                                <?php }} ?>
                            </select>
                        </div>
                        
                        <input type="hidden" id="street" name="street" value="<?php echo isset($clinicDetail->street) ? $clinicDetail->street : ''; ?>">
                        <input type="hidden" id="route" name="route" value="<?php echo isset($clinicDetail->route) ? $clinicDetail->route : ''; ?>">
                        <input type="hidden" id="sublocality" name="sublocality" value="<?php echo isset($clinicDetail->sublocality) ? $clinicDetail->sublocality : ''; ?>">
                        <input type="hidden" id="neighborhood" name="neighborhood" value="<?php echo isset($clinicDetail->neighborhood) ? $clinicDetail->neighborhood : ''; ?>">
                        <input type="hidden" id="locality" name="locality" value="<?php echo isset($clinicDetail->locality) ? $clinicDetail->locality : ''; ?>">
                        <input type="hidden" id="postal" name="postal" value="<?php echo isset($clinicDetail->postal) ? $clinicDetail->postal : ''; ?>">
                        <input type="hidden" id="country" name="country" value="<?php echo isset($clinicDetail->country) ? $clinicDetail->country : ''; ?>">
                        <input type="hidden" id="level_1" name="level_1" value="<?php echo isset($clinicDetail->level_1) ? $clinicDetail->level_1 : ''; ?>">
                        <input type="hidden" id="level_1_short" name="level_1_short" value="<?php echo isset($clinicDetail->level_1_short) ? $clinicDetail->level_1_short : ''; ?>">
                        <input type="hidden" id="suite" name="suite" value="<?php echo isset($clinicDetail->suite) ? $clinicDetail->suite : ''; ?>">
                        <input type="hidden" id="latitude" name="latitude" value="<?php echo isset($clinicDetail->latitude) ? $clinicDetail->latitude : ''; ?>">
                        <input type="hidden" id="longitude" name="longitude" value="<?php echo isset($clinicDetail->longitude) ? $clinicDetail->longitude : ''; ?>">

                        <div class="col-md-12 form-group mb-3">
                            <label for="formattedAddress">Address</label>
                            <input type="text" class="form-control" id="formattedAddress" name="formattedAddress" value="<?php echo isset($clinicDetail->formattedAddress) ? $clinicDetail->formattedAddress : ''; ?>" placeholder="Enter address">
                        </div>
                        <div class="col-md-12 form-group mb-3">
                            <label for="stripeData">Stripe Data</label>
                            <textarea class="form-control" id="stripeData" name="stripeData" rows="4"><?php echo isset($clinicDetail->stripeData) ? $clinicDetail->stripeData : ''; ?></textarea>
                        </div>
                        
                        <div class="col-md-3 form-group mb-3">
                            <label class="control-label">Status</label>
                            <div class="controls">

                            <label class="switch switch-primary mr-3">
                                <input type="checkbox" id="status" name="status" <?php echo (isset($clinicDetail->status) && $clinicDetail->status=='1') ? "checked='checked'" : "" ?>>
                                <span class="slider"></span>
                            </label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
let autocomplete;
const googleScript = document.createElement('script');
// Using the key from offeradd.php
googleScript.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyDIDMklRxHmFYWU8Vvo1P-dVkB_nbHARj8&libraries=places`
googleScript.id = "googlePlaceScript";
window.document.body.appendChild(googleScript);

googleScript.addEventListener('load', () => {
    try {
        const input = document.getElementById('formattedAddress');
        // Prevent form submission on enter key in address field if present
        if(input){
             input.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') e.preventDefault();
            });
            
            this.autocomplete = new window.google.maps.places.Autocomplete(
                input,
                {
                    types: ['address'], 
                    fields: [
                        "formatted_address",
                        "address_components",
                        "geometry",
                        "name"
                    ]
                }
            );

            this.autocomplete.addListener('place_changed', () => {
                const place = this.autocomplete.getPlace();
                
                if (!place.geometry) {
                    return;
                }

                // Populate coordinates
                if(document.getElementById('latitude')){
                     document.getElementById('latitude').value = place.geometry.location.lat();
                }
                if(document.getElementById('longitude')){
                     document.getElementById('longitude').value = place.geometry.location.lng();
                }
                 if(document.getElementById('formattedAddress')){
                     document.getElementById('formattedAddress').value = place.formatted_address;
                }

                // Reset fields
                const fields = ['street', 'route', 'sublocality', 'neighborhood', 'locality', 'postal', 'country', 'level_1', 'level_1_short'];
                fields.forEach(id => {
                    if(document.getElementById(id)) document.getElementById(id).value = '';
                });

                // Populate address components
                if (place.address_components) {
                    place.address_components.forEach(component => {
                        const types = component.types;

                        if (types.includes('street_number')) {
                             if(document.getElementById('street')) document.getElementById('street').value = component.long_name;
                        }
                        if (types.includes('route')) {
                            if(document.getElementById('route')) document.getElementById('route').value = component.long_name;
                        }
                        if (types.includes('sublocality') || types.includes('sublocality_level_1')) {
                            if(document.getElementById('sublocality')) document.getElementById('sublocality').value = component.long_name;
                        }
                        if (types.includes('neighborhood')) {
                            if(document.getElementById('neighborhood')) document.getElementById('neighborhood').value = component.long_name;
                        }
                        if (types.includes('locality')) {
                            if(document.getElementById('locality')) document.getElementById('locality').value = component.long_name;
                        }
                        if (types.includes('postal_code')) {
                            if(document.getElementById('postal')) document.getElementById('postal').value = component.long_name;
                        }
                        if (types.includes('country')) {
                            if(document.getElementById('country')) document.getElementById('country').value = component.long_name;
                        }
                        if (types.includes('administrative_area_level_1')) {
                            if(document.getElementById('level_1')) document.getElementById('level_1').value = component.long_name;
                            if(document.getElementById('level_1_short')) document.getElementById('level_1_short').value = component.short_name;
                        }
                    });
                }
            });
        }

    } catch (err) {
        console.log(err);
    }
});
</script>
