@extends('layouts.panel.app')

@section('content')

	<!--begin::Content-->
	<style>

		.image-input-placeholder {

			background-image: url('{{url("assets/media/icons/duotune/files/fil022.svg")}}');

		}

		[data-bs-theme="dark"] .image-input-placeholder {

			background-image: url('{{url("assets/media/svg/avatars/blank-dark.svg")}}');

		}

	</style>

	<div id="kt_app_content" class="app-content flex-column-fluid">

		<!--begin::Content container-->

		<div id="kt_app_content_container" class="app-container container-xxl">

			<!--begin::Form-->

			@if(Session::has('message'))

				<!--begin::Alert-->

				<div class="alert alert-success d-flex align-items-center p-2 mb-5">

					<!--begin::Icon-->

					<span class="svg-icon svg-icon-2hx svg-icon-success me-4">

						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

							<path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>

							<path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>

						</svg>

					</span>

					<!--end::Icon-->

					<!--begin::Wrapper-->

					<div class="d-flex flex-column">

						<!--begin::Content-->

						<span>{{ Session::get('message') }}</span>

						<!--end::Content-->

					</div>

					<!--end::Wrapper-->

				</div>

				<!--end::Alert-->

			@endif

			@if($errors->any())

				<div class="alert alert-danger d-flex align-items-center p-5 mb-10">

					<i class="ki-duotone ki-shield-tick fs-2hx text-danger me-4"><span class="path1"></span><span class="path2"></span></i>

					<div class="d-flex flex-column">

						<h4 class="mb-1 text-danger">Error!</h4>

						<span>{!! implode('', $errors->all('<div>:message</div>')) !!}</span>

					</div>

				</div>

			@endif

			{!! Form::open(['method' => 'post','class'=>'form d-flex flex-column flex-lg-row','id'=>'frmAction', 'enctype'=>'multipart/form-data']) !!}

			<!--begin::Aside column-->

			<!-- <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10"></div> -->

			<!--end::Aside column-->

			<!--begin::Main column-->

			@php

				$disabled = (isset($mode) && $mode == 'view') ? true : false;

			@endphp

			<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">

				<!--begin::Tab content-->

				<div class="tab-content">

					<!--begin::Tab pane-->

					<div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">

						<div class="d-flex flex-column gap-7 gap-lg-10">

							<!--begin::General options-->

							<div class="card card-flush py-4">

								<!--begin::Card header-->

								<div class="card-header">

									<div class="card-title d-flex justify-content-between align-items-center w-100">
										<h2>{{ Config::get('Constant.MODULE.TITLE') }} Details</h2>
										@if($mode == 'view')
										<div class="ms-auto">
											@php
											$userAlready = App\Models\User::where('email', $RecordArr->email)->first();
											// dd($userAlready);
											@endphp
											@if($userAlready)
											@else
											<button type="button" id="ConvertToDealer" class="btn btn-success" 
													data-lead-id="{{ isset($RecordArr->id) ? $RecordArr->id : '' }}">
												Convert to Dealer
											</button>
											@endif
										</div>
										@endif
									</div>							

								</div>

								<!--end::Card header-->

								<!--begin::Card body-->

								<div class="card-body pt-0">

									<!--begin::Input group-->

									<div class="form-group row mb-5">

										<div class="col-md-4">

											<input type="hidden" name="key_id" id="key_id" value="{{ isset($RecordArr->id) ? $RecordArr->id : '' }}">

											<label class="required form-label">Name</label>

											{!! Form::text('name', isset($RecordArr->name)?$RecordArr->name:old('name'), array('id' => 'name','placeholder' => 'Name', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

											<!-- <div class="text-muted fs-7">A user name is required and recommended to be unique.</div> -->

										</div>
                                        <div class="col-md-4">

											<label class="required form-label">Company Name</label>

											{!! Form::text('company_name', isset($RecordArr->company_name)?$RecordArr->company_name:old('company_name'), array('id' => 'company_name','placeholder' => 'Company Name', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

											<!-- <div class="text-muted fs-7">A user name is required and recommended to be unique.</div> -->

										</div>
                                        <div class="col-md-4">

											<label class="required form-label">Email</label>

											{!! Form::text('email', isset($RecordArr->email)?$RecordArr->email:old('email'), array('id' => 'email','placeholder' => 'Email', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

										</div>


									</div>

									<div class="form-group row mb-5">

										<div class="col-md-4">

											<label class="required form-label">Phone No.</label>

											{!! Form::text('phone', isset($RecordArr->phone)?$RecordArr->phone:old('phone'), array('id' => 'phone','placeholder' => 'Contact Number', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

										</div>

                                        <div class="col-md-4">

                                            <label class="required form-label">Website</label>

                                            {!! Form::text('website', isset($RecordArr->website)?$RecordArr->website:old('website'), array('id' => 'website','placeholder' => 'Website', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

                                        </div>

                                        <div class="col-md-4">

                                            <label class="required form-label">Lead Value</label>

                                            {!! Form::text('lead_value', isset($RecordArr->lead_value)?$RecordArr->lead_value:old('lead_value'), array('id' => 'lead_value','placeholder' => 'Lead Value', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

                                        </div>

									</div>

									<div class="form-group row mb-5">

                                        <div class="col-md-6">
                                            <label class="required form-label">Status</label>
                                            <select class="form-select mb-2" data-control="select2" data-placeholder="Select Status" name="status_id" id="status_id" {{ ($disabled) ? 'disabled' : '' }}>
                                                <option value="">Select Status</option>
                                                @foreach($LeadStatusArr as $key => $status)
                                                    @if(isset($RecordArr->status_id) && !empty($RecordArr->status_id) && $RecordArr->status_id == $key)
                                                        @php $statusSelected = 'selected'; @endphp
                                                    @else
                                                        @php $statusSelected = ''; @endphp
                                                    @endif
                                                    <option value="{{$key}}" {{$statusSelected}}>{{$status}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="required form-label">Source</label>
                                            <select class="form-select mb-2" data-control="select2" data-placeholder="Select Source" name="source_id" id="source_id" {{ ($disabled) ? 'disabled' : '' }}>
                                                <option value="">Select Source</option>
                                                @foreach($LeadSourceArr as $key => $source)
                                                    @if(isset($RecordArr->source_id) && !empty($RecordArr->source_id) && $RecordArr->source_id == $key)
                                                        @php $sourceSelected = 'selected'; @endphp
                                                    @else
                                                        @php $sourceSelected = ''; @endphp
                                                    @endif
                                                    <option value="{{$key}}" {{$sourceSelected}}>{{$source}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

									<div class="form-group row mb-5">

										<div class="col-md-12">

											<label class="required form-label">Register Address</label>

											{!! Form::textarea('address',isset($RecordArr->address)?$RecordArr->address:old('address'), array('id' => 'address','placeholder' => 'Address', 'class' => 'form-control mb-2', 'rows' => '4', 'cols' => '50', 'disabled' => $disabled)) !!}

										</div>

										<!-- <div class="col-md-6">

											<label class="form-label">Delivery Address</label>

											{!! Form::textarea('delivery_address',isset($RecordArr->delivery_address)?$RecordArr->delivery_address:old('delivery_address'), array('id' => 'delivery_address','placeholder' => 'Delivery Address', 'class' => 'form-control mb-2', 'rows' => '4', 'cols' => '50', 'disabled' => $disabled)) !!}

										</div> -->

									</div>

									<div class="form-group row mb-5">
										
										<div class="col-md-3">

											<label class="required form-label">Country</label>

											<select class="form-select mb-2" data-control="select2" data-placeholder="Select Country" name="country_id" id="country_id" {{ ($disabled) ? 'disabled' : '' }}>

												<option value="">Select Country</option>

												@foreach($CountryArr as $key => $country)

													@if(isset($RecordArr->country) && !empty($RecordArr->country) && $RecordArr->country == $key)

														@php $countryselected = 'selected'; @endphp

													@else

														@php $countryselected = ''; @endphp

													@endif

													<option value="{{$key}}" {{$countryselected}}>{{$country}}</option>

												@endforeach

											</select>

										</div>

										<div class="col-md-3">
											<label class="required form-label">State</label>

											<select class="form-select mb-2" data-control="select2" data-placeholder="Select State" name="state_id" id="state_id" {{ ($disabled) ? 'disabled' : '' }}>

												<option value="">Select State</option>

												@foreach($StateArr as $states)

													@if(isset($RecordArr->state) && !empty($RecordArr->state) && $RecordArr->state == $states->id)

														@php $stateselected = 'selected'; @endphp

													@else

														@php $stateselected = ''; @endphp

													@endif

													<option value="{{$states->id}}" {{$stateselected}}>{{$states->name}}</option>

												@endforeach

											</select>

										</div>

										<div class="col-md-3">

											<label class="required form-label">City</label>

											<select class="form-select mb-2" data-control="select2" data-placeholder="Select City" name="city_id" id="city_id" {{ ($disabled) ? 'disabled' : '' }}>

												<option value="">Select City</option>

												@foreach($CityArr as $city)

													@if(isset($RecordArr->city) && !empty($RecordArr->city) && $RecordArr->city == $city->id)

														@php $cityselected = 'selected'; @endphp

													@else

														@php $cityselected = ''; @endphp

													@endif

													<option value="{{$city->id}}" {{$cityselected}}>{{$city->name}}</option>

												@endforeach

											</select>

										</div>

										<div class="col-md-3">

											<label class="required form-label">Pincode</label>

											{!! Form::text('zipcode', isset($RecordArr->zipcode)?$RecordArr->zipcode:old('zipcode'), array('id' => 'zipcode','placeholder' => 'Pincode', 'class' => 'form-control mb-2', 'disabled' => $disabled)) !!}

										</div>

									</div>
                                    

                                    <div class="form-group row mb-5">

										<div class="col-md-12">

											<label class="required form-label">Description</label>

											{!! Form::textarea('description',isset($RecordArr->description)?$RecordArr->description:old('description'), array('id' => 'description','placeholder' => 'Description', 'class' => 'form-control mb-2', 'rows' => '4', 'cols' => '50', 'disabled' => $disabled)) !!}

										</div>

									</div>
									

									<!-- <div class="form-group row mb-5">

										<div class="col-md-12">

											<label class="required form-label">Status</label>

											<select class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="Select Status" name="status" id="kt_ecommerce_add_product_status_select" {{ ($disabled) ? 'disabled' : '' }}>

												<option value="Y" @if(isset($RecordArr->chrPublish) && $RecordArr->chrPublish == 'Y')) selected @else @endif>Active</option>

												<option value="D" @if(isset($RecordArr->chrPublish) && $RecordArr->chrPublish == 'D')) selected @endif>Draft</option>

												<option value="N" @if(isset($RecordArr->chrPublish) && $RecordArr->chrPublish == 'N')) selected @endif>Inactive</option>

											</select>

										</div>

									</div> -->

									<!--end::Input group-->

								</div>

								<!--end::Card header-->

							</div>

							<!--end::General options-->

						</div>


					</div>

					
				</div>

				<div class="tab-content">
					{{-- {{dd($mode);}} --}}
					@if($mode == 'view')
					<!--end::Tab pane-->
					<div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
						<div class="d-flex flex-column gap-7 gap-lg-10">
							<div class="card card-flush py-4">
								<div class="card-body pt-0">
									<div class="d-flex justify-content-between align-items-center mb-4">
										<ul class="nav nav-tabs">
											<li class="nav-item">
												<a class="nav-link active" id="proposals-tab" data-bs-toggle="tab" href="#proposals">Quotations</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" id="activity-tab" data-bs-toggle="tab" href="#activity">Activity</a>
											</li>
										</ul>
									</div>
									
									<div class="tab-content">
										<div class="tab-pane fade show active" id="proposals">
											<!-- Proposals content goes here -->
											<div class="form-group row mb-5">
												<div class="col-md-12">
													<div class="table-responsive">

														<table class="table table-bordered table-hover table-list gy-3 gs-5">
															<thead>
																<tr class="fw-bold fs-5 text-gray-800 " style="background:#428BCA; color:#FFF !important;">
																	<th class="text-center" width="5%">No.</th>
																	{{-- <th class="text-center" width="5%">Image</th> --}}
																	{{-- <th class="text-center" width="30%">Customer</th> --}}
																	<th class="text-center" width="25%">Type</th>
																	<th class="text-center" width="10%">Date</th>
																	<th class="text-center" width="10%">Currency</th>
																	<th class="text-center" width="10%">Total</th>
																	<th class="text-center" width="10%">Status</th>
																	<th class="text-center" width="10%">Action</th>
																</tr>
															</thead>

															<tbody style="background:#f5f8fa">
																@php $i = 0; @endphp
																{{-- {{dd($proposals);}} --}}
																@foreach($proposals as $proposal)
																	<tr>
																		<td class='text-center pt-6'>{{ $i + 1 }}</td>
																		{{-- <td class='text-center pt-6'>{{ $proposal->lead->name }}</td> --}}
																		<td class='text-center pt-6'>{{ $proposal->type }}</td>
																		<td class='text-center pt-6'>{{ $proposal->date }}</td>
																		<td class='text-center pt-6'>{{ $proposal->currency }}</td>
																		<td class='text-center pt-6'>{{ $proposal->overall_total }}</td>
																		<td class='text-center pt-6'>{{ $proposal->status->name }}</td>
																		<td class='text-center pt-6'><a href="{{ route('adminpanel.proposal.preview', ['alias' => $proposal->id]) }}" class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"><i class="fas fa-eye"></i></a></td>
																	</tr>															
																@endforeach
															</tbody>
														</table>																									

													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane fade" id="activity">
											<div class="col-md-12">
												<input type="hidden" name="lead_id" id="lead_id" value="{{ isset($RecordArr->id) ? $RecordArr->id : '' }}">
												<input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
												<label class="required form-label">Activity</label>
												<select class="form-select mb-2" data-control="select2" data-placeholder="Select Activity" name="activity_name" id="activity_name">
													<option value="">Select Activity</option>
													<option value="call">Call</option>
													<option value="email">Email</option>
													<option value="message">Message</option>
													<option value="meeting">Meeting</option>
												</select>
											</div>
										
											<div class="col-md-12">
												<label for="note" class="mt-2">Note:</label>
												<textarea id="note" class="form-control" rows="4" placeholder="Enter your note here..."></textarea>
											</div>
										
											<div class="col-md-12 mt-3">
												<button type="button" id="submitActivity" class="btn btn-primary">Submit</button>
											</div>
										
											<hr>
											
											<div class="activity-timeline" id="activityTimelineContainer">
												<!-- Activity timeline items will be loaded here -->
											</div>
										</div>
										
										
										
									</div>
								</div>
							</div>
						</div>
					</div>
					@endif
				</div>

				<!--end::Tab content-->
				

				<div class="d-flex justify-content-end">

					<!--begin::Button-->

					<a href="{{ route('adminpanel.' . Config::get('Constant.MODULE.NAME') . '.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">Cancel</a>

					<!--end::Button-->

					<!--begin::Button-->

					@if(!$disabled)

					<button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">

						<span class="indicator-label">Save Changes</span>

						<span class="indicator-progress">Please wait...

							<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
						
						</span>

					</button>

					@endif

					<!--end::Button-->

				</div>

			</div>

			<!--end::Main column-->

			{!! Form::close() !!}

			<!--end::Form-->

		</div>

		<!--end::Content container-->

	</div>
	<!--end::Content-->

@endsection

@section('scripts')

	<script src="{{url('assets/panel/plugins/custom/formrepeater/formrepeater.bundle.js')}}"></script>

	<script src="{{url('assets/panel/resources/lead/action-validation.js')}}"></script>

	<!-- <script src="{{url('assets/panel/js/custom/apps/ecommerce/catalog/save-product.js')}}"></script> -->

	<script>
		document.getElementById('ConvertToDealer').addEventListener('click', function() {
			let leadId = this.getAttribute('data-lead-id');
	
			if (leadId) {
				fetch('{{ route("convert.to.dealer") }}', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'X-CSRF-TOKEN': '{{ csrf_token() }}'
					},
					body: JSON.stringify({ lead_id: leadId })
				})
				.then(response => response.json())
				.then(data => {
					if (data.success) {
						alert('Dealer has been successfully created.');
						location.reload();
					} else {
						alert('Error: ' + data.message);
					}
				})
				.catch(error => console.error('Error:', error));
			} else {
				alert('Lead ID not found.');
			}
		});
	</script>
	<script>
		$(document).ready(function () {
			// Load existing activities when page loads
			loadActivities();
			
			$('#submitActivity').on('click', function () {
				var lead_id = $('#lead_id').val();
				var user_id = $('#user_id').val();
				var activity_name = $('#activity_name').val();
				var note = $('#note').val();
	
				if (activity_name === '') {
					alert('Please select an activity.');
					return;
				}
	
				$.ajax({
					url: "{{ route('lead-activity.store') }}",
					type: "POST",
					data: {
						_token: "{{ csrf_token() }}",
						lead_id: lead_id,
						user_id: user_id,
						activity_name: activity_name,
						note: note
					},
					success: function (response) {
						if (response.success) {
							alert('Activity saved successfully.');
							$('#activity_name').val('');
							$('#note').val('');
							// Reload the activities after saving
							loadActivities();
						} else {
							alert('Error saving activity.');
						}
					},
					error: function (xhr) {
						alert('Something went wrong. Please try again.');
					}
				});
			});
			
			// Function to load activities
			function loadActivities() {
				var lead_id = $('#lead_id').val();
				
				$.ajax({
					url: "{{ route('lead-activity.get') }}", // Create this route
					type: "GET",
					data: {
						lead_id: lead_id
					},
					success: function (response) {
						if (response.success) {
							displayActivities(response.activities);
						}
					},
					error: function (xhr) {
						console.log('Error loading activities');
					}
				});
			}
			
			// Function to display activities in timeline format
			function displayActivities(activities) {
    var container = $('#activityTimelineContainer');
    container.empty();

    if (activities.length === 0) {
        container.html('<p class="text-center mt-3">No activities yet.</p>');
        return;
    }

    var timelineHtml = `<div class="timeline">`;

    activities.forEach(function(activity) {
        // Determine color based on activity type
        var colorClass = 'danger'; // default
        var iconClass = 'fa-comment'; // default icon

        switch(activity.activity_name.toLowerCase()) {
            case 'call':
                colorClass = 'primary';
                iconClass = 'fa-phone-alt';
                break;
            case 'email':
                colorClass = 'success';
                iconClass = 'fa-envelope';
                break;
            case 'meeting':
                colorClass = 'warning';
                iconClass = 'fa-users';
                break;
            case 'message':
                colorClass = 'info';
                iconClass = 'fa-comment';
                break;
            case 'Proposal':
                colorClass = 'danger';
                iconClass = 'fa-file-alt';
                break;
			case 'Quotation':
                colorClass = 'danger';
                iconClass = 'fa-file-alt';
                break;
        }

        // Calculate days ago
		// <a href="#" class="text-danger delete-activity" data-id="${activity.id}">
        //                     <i class="fas fa-trash"></i>
        //                 </a>
        var createdDate = new Date(activity.created_at);
        var today = new Date();
        var diffTime = Math.abs(today - createdDate);
        var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        var daysText = diffDays === 1 ? '1 day ago' : diffDays + ' days ago';

        // Improved Metronic timeline item with better styling
        timelineHtml += `
            <div class="timeline-item mb-4">
                <div class="timeline-label fw-bolder text-gray-800"></div>
                <div class="timeline-badge">
                    <div class="h-8px w-8px rounded-circle bg-${colorClass}">
                        
                    </div>
                </div>
                <div class="ps-3">
                    <div class="d-flex flex-stack ">
                        <span class="fw-bold text-capitalize fs-5 ms-4">${activity.activity_name}</span>
                        
                    </div>
                    <span class="text-muted fs-7">${daysText}</span>
                    <p class="mt-1">Note: ${activity.note || 'N/A'}</p>
                </div>
            </div>
        `;
    });

    timelineHtml += `</div>`;
    container.html(timelineHtml);

    // Add some additional CSS to ensure proper styling
    $('<style>')
        .text(`
            .timeline {
                position: relative;
                padding: 0;
                margin: 0;
            }
            
            .timeline-item {
                position: relative;
                padding-left: 2.5rem;
                margin-bottom: 1.5rem;
            }
            
            .timeline-badge {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            
            .timeline-badge .rounded-circle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 15px !important;
                height: 15px !important;
            }
            
            .timeline-badge i {
                font-size: 0.85rem;
            }
        `)
        .appendTo('head');

    // Add event listeners for delete buttons
    $('.delete-activity').on('click', function(e) {
        e.preventDefault();
        var activityId = $(this).data('id');

        if (confirm('Are you sure you want to delete this activity?')) {
            deleteActivity(activityId);
        }
    });
}
			// Function to delete an activity
			function deleteActivity(activityId) {
				$.ajax({
					url: "{{ route('lead-activity.delete') }}", // Create this route
					type: "POST",
					data: {
						_token: "{{ csrf_token() }}",
						activity_id: activityId
					},
					success: function (response) {
						if (response.success) {
							loadActivities(); // Reload the list
						} else {
							alert('Error deleting activity.');
						}
					},
					error: function (xhr) {
						alert('Something went wrong. Please try again.');
					}
				});
			}
		});
	</script>
	<script>
        $(document).ready(function(){
            $("#country_id").on('change', function(){
                var country_id = $(this).val();
                $.ajax({
                    url: "{{ url('/dealers/add/getStatesByCountry') }}",
                    method: "GET",
                    data: {country_id: country_id},
                    dataType: 'json',
                    success: function(response) {
                        var state_id = $('#state_id');
                        state_id.empty();
                        state_id.append('<option value="">Select State</option>');
                        $.each(response.states, function(index, states) {
                            state_id.append('<option value="' + states.id + '">' + states.name + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

			$("#state_id").on('change', function(){
                var state_id = $(this).val();
                $.ajax({
                    url: "{{ url('/dealers/add/getCityByState') }}",
                    method: "GET",
                    data: {state_id: state_id},
                    dataType: 'json',
                    success: function(response) {
                        var city_id = $('#city_id');
                        city_id.empty();
                        city_id.append('<option value="">Select City</option>');
                        $.each(response.cities, function(index, cities) {
                            city_id.append('<option value="' + cities.id + '">' + cities.name + '</option>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>

@endsection