<style>
body .modal-content { background: #fdf8f2 !important; border: none !important; border-radius: 12px !important; box-shadow: 0 8px 40px rgba(15,23,36,.14) !important; overflow: hidden !important; }
body .modal-header { background: linear-gradient(135deg, #0f1724, #182035) !important; border: none !important; padding: 18px 24px !important; }
body .modal-header .modal-title { color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; }
body .modal-header .close { color: #ffffff !important; opacity: .6 !important; text-shadow: none !important; }
body .modal-body { padding: 28px 24px !important; background: #fdf8f2 !important; }
body .modal-footer { border-top: 1px solid #e8d9c5 !important; padding: 14px 24px !important; background: #f5ede0 !important; }
body .form-ul { padding: 0 !important; margin: 0 !important; }
body .form-ul li { margin-bottom: 16px !important; list-style: none !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; }
body .form-ul input[type="text"],
body .form-ul input[type="email"],
body #customer-form input[type="text"],
body #customer-form input[type="email"],
body #customer-form select.form-control {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff8f0 !important;
  border: 1.5px solid #e2cdb0 !important;
  border-radius: 8px !important;
  color: #4a3728 !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  height: auto !important;
  box-shadow: none !important;
}
body .form-ul input[type="text"]:focus,
body .form-ul input[type="email"]:focus,
body #customer-form input:focus,
body #customer-form select:focus {
  border-color: #c8956c !important;
  box-shadow: 0 0 0 3px rgba(200,149,108,.18) !important;
  outline: none !important;
  background: #fffaf5 !important;
}
body .form-ul label,
body #customer-form label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #9a7c65 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body input[type="file"]#img_upload {
  background: #fff8f0 !important;
  border: 1.5px dashed #e2cdb0 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #9a7c65 !important;
  cursor: pointer !important;
}
body .btn-theme, body .btn-theme:focus {
  background: #c8956c !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 24px !important;
  box-shadow: 0 4px 14px rgba(200,149,108,.35) !important;
}
body .btn-theme:hover { background: #b07a54 !important; }
body .btn-default {
  background: transparent !important;
  border: 1.5px solid #e2cdb0 !important;
  border-radius: 8px !important;
  color: #9a7c65 !important;
  font-size: 13.5px !important;
  padding: 8px 20px !important;
}
body .btn-default:hover { border-color: #c8956c !important; color: #c8956c !important; }
</style>

<?php
/* @var $model Customers */

$form = $this->beginWidget('CActiveForm', array(
    'id' => 'customer-form',
    'enableAjaxValidation' => false,
    'enableClientValidation' => false,
    'htmlOptions' => array(
        'enctype' => 'multipart/form-data'
    ),
));
?>

<div class="tab-content">
<div class="tab-pane active">
<ul class="clearfix form-ul material">

<?php echo $form->hiddenField($model, 'id'); ?>

<li class="col-sm-12">
<label>Customer Name</label>
<?php echo $form->textField($model,'customer_name',array('placeholder'=>'Enter Customer Name','class'=>'form-control')); ?>
<?php echo $form->error($model,'customer_name'); ?>
</li>

<li class="col-sm-12">
<label>Phone No</label>
<?php echo $form->textField($model,'phone_no',array('placeholder'=>'Enter Phone Number','class'=>'form-control')); ?>
<?php echo $form->error($model,'phone_no'); ?>
</li>

<li class="col-sm-12">
<label>Email</label>
<?php echo $form->textField($model,'email',array('placeholder'=>'Enter Email Address','class'=>'form-control')); ?>
<?php echo $form->error($model,'email'); ?>
</li>

<li class="col-sm-12">
<label>Address</label>
<?php echo $form->textField($model,'Address',array('placeholder'=>'Enter Address','class'=>'form-control')); ?>
<?php echo $form->error($model,'Address'); ?>
</li>

<li class="col-sm-12">
<label>Location</label>
<?php
echo $form->dropDownList(
    $model,
    'location_id',
    CHtml::listData(
        Locations::model()->findAll(array(
            'condition' => 'isActive = :a',
            'params'    => array(':a' => 'Y'),
            'order'     => 'location_name ASC'
        )),
        'id',
        'location_name'
    ),
    array(
        'class'=>'form-control',
        'prompt'=>'Select Location'
    )
);
?>
<?php echo $form->error($model,'location_id'); ?>
</li>

<li class="col-sm-12">
    <label>Country</label>
    <?php
    echo $form->dropDownList(
        $model,
        'country_id',
        CHtml::listData(
            Country::model()->findAll(array(
                'condition' => 'isActive = :a',
                'params'    => array(':a' => 'Y'),
                'order'     => 'country_name ASC'
            )),
            'id',
            'country_name'
        ),
        array(
            'id'                  => 'customer-country',
            'class'               => 'form-control',
            'prompt'              => 'Select Country',
            'data-selected-state' => $model->state_id ? $model->state_id : '',
        )
    );
    ?>
</li>

<li class="col-sm-12">
    <label>State</label>
    <?php
    $stateOptions = array();
    if (!empty($model->country_id)) {
        $existingStates = States::model()->findAll(
            'country_id = :cid AND isActive = :a',
            array(':cid' => $model->country_id, ':a' => 'Y')
        );
        $stateOptions = CHtml::listData($existingStates, 'id', 'state_name');
    }
    echo $form->dropDownList(
        $model,
        'state_id',
        $stateOptions,
        array(
            'id'       => 'customer-state',
            'class'    => 'form-control',
            'prompt'   => 'Select State',
            'disabled' => empty($model->country_id) ? 'disabled' : false,
        )
    );
    ?>
</li>

<li class="col-sm-12">
<label>Image</label>
<input type="file" name="img_upload" id="img_upload" accept="image/*">
<?php if(!empty($model->img_upload)): ?>
<br>
<a href="<?php echo Yii::app()->baseUrl.'/uploads/customers/'.$model->img_upload; ?>" target="_blank">
<img src="<?php echo Yii::app()->baseUrl.'/uploads/customers/'.$model->img_upload; ?>" width="80">
</a>
<?php endif; ?>
</li>

</ul>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-theme" id="btn-save-customer">Save</button>
</div>

<?php $this->endWidget(); ?>

<script>
$(document).ready(function(){

var $country = $('#customer-country');
var $state   = $('#customer-state');
var stateUrl = '<?php echo Yii::app()->createUrl("customers/getStates"); ?>';

function loadStates(countryId, preselectId) {
    $state.empty().append('<option value="">Loading...</option>').prop('disabled', true);
    $.ajax({
        url: stateUrl,
        type: 'GET',
        data: { country_id: countryId },
        dataType: 'json',
        success: function(data) {
            $state.empty().append('<option value="">Select State</option>');
            if (data.length === 0) {
                $state.append('<option value="">No states available</option>');
            } else {
                $.each(data, function(i, item) {
                    $state.append($('<option>', { value: item.id, text: item.name }));
                });
            }
            $state.prop('disabled', false);
            if (preselectId) { $state.val(preselectId); }
        },
        error: function() {
            $state.empty().append('<option value="">Error loading</option>').prop('disabled', false);
        }
    });
}

$country.on('change', function() {
    var countryId = $(this).val();
    if (!countryId) {
        $state.empty().append('<option value="">Select State</option>').prop('disabled', true);
        return;
    }
    loadStates(countryId, null);
});

if ($country.val()) {
    loadStates($country.val(), $country.data('selected-state'));
}

$('#btn-save-customer').off('click').on('click', function(){
    var btn = $(this);
    btn.prop('disabled', true);
    $("#loader").show();

    var form = document.getElementById("customer-form");
    var formData = new FormData();

    $(form).serializeArray().forEach(function(field){
        formData.append(field.name, field.value);
    });

    var fileInput = $('#img_upload')[0];
    if(fileInput.files.length > 0){
        formData.append("img_upload", fileInput.files[0]);
    }

    $.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createUrl("customers/save"); ?>',
        dataType: 'json',
        data: formData,
        contentType: false,
        processData: false,
        success: function(data){
            $("#loader").hide();
            btn.prop('disabled', false);
            if(data.status == "success"){
                t8.success("Customer Saved Successfully!");
                $(".x.close").click();
                reloadTable("#tbl_Customer");
            } else {
                $.each(data.message, function(k, v){ t8.error(v); });
            }
        },
        error: function(xhr){
            $("#loader").hide();
            btn.prop('disabled', false);
            t8.error("Something went wrong.");
        }
    });
});

});
</script>

<style>
ul.form-ul li { margin-bottom:15px; }
input[readonly] { background:#f7f7f7; }
</style>