<!DOCTYPE html>
<html>
<head>
	<title>MYOL</title>
	<link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap.min.css')); ?>">
	<link rel="stylesheet" href="<?php echo e(asset('assets/css/style.min.css')); ?>">
	<link rel="stylesheet" href="<?php echo e(asset('assets/css/bootstrap-datepicker.min.css')); ?>">
	<link rel="stylesheet" href="<?php echo e(asset('assets/css/select2.min.css')); ?>">
   
	<style type="text/css">
		.box-header {
		    padding: 0px;
		}
		.box-body {
			padding: 0px;
		}
		.box-header .box-title {
			display: block;
		}
		.box-title {
			text-align: center;
		}

		.input-group-addon {
		    min-width:200px;
		    /*min-width:220px;*/
		    /*text-align:left;*/
		}
		.alert {
            padding: 2px; 
            margin-bottom: 5px;
        }

        .greenG {
        	background-color: #28a745; color: #FFFFFF;
        }
        .blue {
        	background-color: #007bff; color: #FFFFFF;
        	/*background-color: #59a3ef; color: #FFFFFF;*/
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #3c8dbc;
            border-color: #367fa9;
            padding: 1px 10px;
            color: #fff;
        }

	</style>
</head>
<body>
	<div class="container-fluid">

	    <div class="container">
	        <div class="col-sm-8 col-sm-offset-2">
	            <?php echo $__env->make('flash::message', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
	        </div>
	    </div>

		<div class="box box-success">
	    	<div class="box-header with-border">
	        	<h3 class="box-title">SFBL CRM <small>Phone Number:</small><code><?php echo e($phoneNumber); ?></code> <small>Agent:</small> <code><?php echo e($agent); ?></code></h3> 
	    	</div>
	    	<div class="box-body">
	    		<?php echo Form::model($crmLast, ['url' => 'crm', 'method' => 'post']); ?>


				<?php /* <?php echo Form::open(['url' => 'crm', 'method' => 'post', 'class' => '']); ?> */ ?>

				<input type="hidden" name="phone_number" value="<?php echo e($phoneNumber); ?>" class="form-control">
				<input type="hidden" name="agent" value="<?php echo e($agent); ?>" class="form-control">

				<div class="row">
		    		<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Customer Name</span>
			      			<?php echo Form::text('customer_name', null, ['class' => 'form-control', 'placeholder' => 'Enter Customer Name', 'autocomplete' => 'off']); ?>

			    		</div>
					</div>
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Customer Address</span>
			      			<?php echo Form::text('customer_address', null, ['class' => 'form-control', 'placeholder' => 'Enter Customer Address', 'autocomplete' => 'off']); ?>

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

				<div class="row">
		    		<div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Division</span>
			      			<?php echo Form::select('division_id', $divisionList, null, ['class' => 'form-control', 'placeholder' => 'Select Division', 'id' => 'division_id']); ?>

			    		</div>
					</div>
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">District</span>
			      			<?php echo Form::select('district_id', [], null, ['class' => 'form-control', 'placeholder' => 'Select District', 'id' => 'district_id']); ?>

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

				<div class="row">
		    		<div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Product Model</span>
			      			<?php echo Form::select('product_model', $productModelList, null, ['class' => 'form-control select2', 'placeholder' => 'Select Product Model']); ?>

			    		</div>
					</div>
					<!-- <div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Sources of Purchase</span>
			      			<?php echo Form::select('sources_of_purchase', $sourOfPurList, null, ['class' => 'form-control', 'placeholder' => 'Select Sources of Purchase']); ?>

			    		</div>
					</div> -->
				</div>

				<!-- <div class="row">
		    		<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Outlet Ref. Num.</span>
			      			<?php echo Form::text('outlet_ref_num', null, ['class' => 'form-control', 'placeholder' => 'Enter Outlet Ref. Num.', 'autocomplete' => 'off']); ?>

			    		</div>
					</div>
					
				</div> -->

				<div class="row">
		    		<!-- <div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Usage Purpose</span>
			      			<?php echo Form::select('usage_purpose', $usagePurList, null, ['class' => 'form-control', 'placeholder' => 'Select Usage Purpose']); ?>

			    		</div>
					</div> -->
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Query Type</span>
			      			<?php echo Form::select('query_type', $queryTypeList, null, ['class' => 'form-control', 'placeholder' => 'Select Query Type']); ?>

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

				<div class="row">
		    		<div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Date of Purchase</span>
			      			<?php echo Form::text('date_of_purchase', null, ['class' => 'form-control', 'placeholder' => 'Select Date of Purchase', 'autocomplete' => 'off', 'id' => 'date_of_purchase']); ?>

			    		</div>
					</div>
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Appoinment Date</span>
			      			<?php echo Form::text('appoinment_date', null, ['class' => 'form-control', 'placeholder' => 'Select Appoinment Date', 'autocomplete' => 'off', 'id' => 'appoinment_date']); ?>

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

				<div class="row">
					<div class="col-sm-12">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Conversation Details</span>
			      			<?php echo Form::text('remarks', null, ['class' => 'form-control', 'placeholder' => 'Enter Remarks', 'autocomplete' => 'off']); ?>

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

				<div class="row">
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Customer Complain</span>
			      			<?php echo Form::select('customer_complain', $createTicketList, null, ['class' => 'form-control', 'placeholder' => 'Select Customer Complain']); ?>

			    		</div>
					</div>
		    		<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Call Type <span style="color: red; font-size: 18px;">*</span></span>
			      			<?php echo Form::select('in_or_out', ['InboundCall' => 'InboundCall', 'OutboundCall' => 'OutboundCall'], null, ['class' => 'form-control', 'placeholder' => 'Select InboundCall or OutboundCall', 'required' => 'required']); ?>

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

				<div class="row">
		    		<div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Source of Call</span>
			      			<?php echo Form::text('source_of_call', null, ['class' => 'form-control', 'placeholder' => 'Source of Call', 'list' => 'source_of_call']); ?>

			      			<datalist id="source_of_call">
                            	<?php foreach($sourOfCallList as $sourOfCall): ?>
							    	<option value="<?php echo e($sourOfCall); ?>">
							    <?php endforeach; ?>
							</datalist>
			    		</div>
					</div>
					<div class="col-sm-6">
						<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Create Ticket</span>
			      			<?php echo Form::select('create_ticket', $createTicketList, null, ['class' => 'form-control', 'placeholder' => 'Select Create Ticket']); ?>

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

				

				<div class="row">
		    		<div class="col-sm-6">
			    		<div class="input-group" style="margin-top: 5px;">
			      			<span class="input-group-addon" style="background-color: #28a745; color: #FFFFFF;">Call Remarks</span>
			      			<?php echo Form::select('call_remarks', $callRemarksList, null, ['class' => 'form-control', 'placeholder' => 'Select Call Remarks']); ?>

			    		</div>
					</div>
					<!-- <div class="col-sm-6">
			      		<button class="add_field_button btn btn-danger" style="margin-top: 5px;">+ Add Product Serial (If you need)</button>
					</div> -->
				</div>


				<div class="input_fields_wrap" >
					
						
				</div>

				<?php echo Form::button('Submit', ['class' => 'btn btn-primary btn-block btn-xs btn-flat', 'data-toggle' => 'modal', 'data-target' => '#crm_create', 'style' => 'margin-top: 10px;']); ?>


				<div class="modal modal-info fade" id="crm_create">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title">Confirmation Message</h4>
                            </div>
                            <div class="modal-body">
                                <h3>Want to Store CRM Information?</h3>
                            </div>
                            <div class="modal-footer">
                                <!-- <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button> -->
                                <button type="submit" class="btn btn-outline btn-block">Submit CRM Information</button>
                            </div>
                        </div>
                    </div>
                </div>

				<?php echo Form::close(); ?>

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

	<script src="<?php echo e(asset('assets/js/jquery.min.js')); ?>"></script>
	<script src="<?php echo e(asset('assets/js/bootstrap.min.js')); ?>"></script>
	<!-- <script src="<?php echo e(asset('assets/js/jquery.slimscroll.min.js')); ?>"></script> -->
	<script src="<?php echo e(asset('assets/js/bootstrap-datepicker.min.js')); ?>"></script>
	<script src="<?php echo e(asset('assets/js/select2.full.min.js')); ?>"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			var max_fields      = 16; 
			var wrapper   		= $(".input_fields_wrap"); 
			var add_button      = $(".add_field_button"); 
			
			var x = 0; 
			$(add_button).click(function(e){ 
				e.preventDefault();
				if(x < max_fields){ 
					x++; 
					$(wrapper).append('<div class="col-sm-3" style="display: inline; margin-bottom: 5px;"><input type="text" name="product_serial[]" autocomplete="off" /><a href="#" class="remove_field btn btn-danger btn-xs">Remove</a></div>');
				}
			});
			
			$(wrapper).on("click",".remove_field", function(e){ 
				e.preventDefault(); $(this).parent('div').remove(); x--;
			})
		});
	</script>

	<script type="text/javascript">
		$('#date_of_purchase').datepicker({
            format:'yyyy-mm-dd',
            autoclose: true
        });

        $('#appoinment_date').datepicker({
            format:'yyyy-mm-dd',
            autoclose: true
        });

        $(function() {
            $('#division_id').change(function() {
                var divisionId = $(this).val();
                getDistrict(divisionId);
            });
        });


        function getDistrict(divisionId) {
            
            resetField('district_id', 'Select District');
            var url = '<?php echo e(url("crm/get-district")); ?>';
            $.get(url+'?division_id='+divisionId, function (response) {
                $.map( response, function( name, id ) {
                    $('#district_id').append('<option value="'+ id +'">' + name + '</option>');
                });
            });
        }

        function resetField(id, placeholder) {
            $('#' + id).empty();
            $('#' + id).append('<option value="">'+ placeholder +'</option>');
        }


        <?php if(isset($crmLast)): ?>

			var customerDivisionId = '<?php echo e($crmLast->division_id); ?>';
			var customerDistrictId = '<?php echo e($crmLast->district_id); ?>';

			jQuery.ajaxSetup({async:false});
			
			getDistrict(customerDivisionId);
			$('#district_id').val(customerDistrictId);

			 jQuery.ajaxSetup({async:true});

		<?php endif; ?>

		$(function () {
            $('.select2').select2();
        });

	</script>
</body>
</html>