@extends('frontend.layouts-user.app')
@section('title')@endsection
@section('content')
<!--start content-->
<main class="page-content">

<!--breadcrumb-->
<div class="page-breadcrumb d-none d-sm-flex align-items-center">
	<div class="breadcrumb-title pe-3 text-white">User Dashboard</div>
	<div class="ps-3">
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb mb-0 p-0">
		<li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt text-white"></i></a>
		</li>
		<li class="breadcrumb-item active text-white" aria-current="page"> Business Page </li>
		</ol>
	</nav>
	</div>

</div>
<!--end breadcrumb-->
<div class="profile-cover bg-dark"></div>
<div class="row">
	<div class="col-12 col-lg-12">
	<div class="card shadow-sm border-0">
		<div class="card-body">
			<h5 class="mb-0">Business Listing Form</h5>
			<hr>
			<div class="card shadow-none border">
			<div class="card-header">
				<h6 class="mb-0">Here fill your details to complete your Business List.</h6>
			</div>
			<div class="card-body">
				@if(session('success'))
					<div class="alert alert-success alert-dismissible fade show">
						{{ session('success') }}
						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
					</div>
				@endif
				@if(session('error'))
					<div class="alert alert-danger alert-dismissible fade show">
						{{ session('error') }}
						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
					</div>
				@endif
				<form class="row g-3" method="POST"
					action="{{ isset($listing) ? url('listing-update/'.$listing->id) : url('listing-store') }}"
					enctype="multipart/form-data">

				@csrf
				@if(isset($listing))
					@method('PUT')
				@endif

				<!-- Upload Business Logo -->
				<div class="col-md-6">
    <label class="form-label">Upload Business Logo</label>

    	<input type="file"
           class="form-control @error('business_logo') is-invalid @enderror"
           name="business_logo"
           id="business_logo">

			@error('business_logo')
				<div class="invalid-feedback">{{ $message }}</div>
			@enderror

			{{-- Show existing logo --}}
			@if(isset($listing) && $listing->business_logo)
				<div class="mt-2">
					<img src="{{ asset('business_images/'.$listing->business_logo) }}"
						alt="Business Logo"
						width="120"
						style="border:1px solid #ddd; padding:4px;">
				</div>
			@endif
		</div>

				<!-- Business Name -->
				<div class="col-md-6">
					<label class="form-label">Business Name <span class="star">*</span></label>
					<input type="text" class="form-control @error('business_name') is-invalid @enderror"
						name="business_name" id="business_name"
						placeholder="e.g. Gbusiness"
						value="{{ old('business_name', $listing->business_name ?? '') }}">
					@error('business_name')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Subdomain -->
				<div class="col-md-6">
					<label class="form-label">Your GBusiness Subdomain URL <span class="star">*</span></label>
					<input type="text" class="form-control @error('sub_domain') is-invalid @enderror"
						name="sub_domain" id="subdomain_name"
						placeholder="e.g. xyz"
						value="{{ old('sub_domain', $listing->sub_domain ?? '') }}">
					@error('sub_domain')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Email -->
				<div class="col-md-6">
					<label class="form-label">Business Email <span class="star">*</span></label>
					<input type="email" class="form-control @error('business_email') is-invalid @enderror"
						name="business_email" id="business_email"
						placeholder="e.g. example@email.com"
						value="{{ old('business_email', $listing->business_email ?? '') }}">
					@error('business_email')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Mobile -->
				<div class="col-md-6">
					<label class="form-label">Business Mobile <span class="star">*</span></label>
					<input type="text" class="form-control @error('business_phone') is-invalid @enderror"
						name="business_phone" id="business_phone"
						placeholder="e.g. +918888855555"
						value="{{ old('business_phone', $listing->business_phone ?? '') }}">
					@error('business_phone')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Website -->
				<div class="col-md-6">
					<label class="form-label">Business Website <span class="star">*</span></label>
					<input type="text" class="form-control @error('business_web_url') is-invalid @enderror"
						name="business_web_url" id="business_web_url"
						placeholder="e.g. http://www.example.com/"
						value="{{ old('business_web_url', $listing->business_web_url ?? '') }}">
					@error('business_web_url')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Country -->
				<div class="col-md-6">
					<label class="form-label">Business Country <span class="star">*</span></label>
					<select class="form-control @error('country_id') is-invalid @enderror" name="country_id" id="country_id">
						<option value="">Select the Country</option>
						@foreach($countries as $country)
							<option value="{{ $country->id }}"
								{{ old('country_id', $listing->country_id ?? '') == $country->id ? 'selected' : '' }}>
								{{ $country->name }}
							</option>
						@endforeach
					</select>
					@error('country_id')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- State -->
				<div class="col-md-6">
					<label class="form-label">Business State <span class="star">*</span></label>
					<select class="form-control @error('state_id') is-invalid @enderror" name="state_id" id="state_id">
						<option value="">Select State</option>
					</select>
					@error('state_id')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- City -->
				<div class="col-md-6">
					<label class="form-label">Business City <span class="star">*</span></label>
					<input type="text" class="form-control @error('city') is-invalid @enderror"
						name="city" id="city"
						placeholder="Enter city"
						value="{{ old('city', $listing->city ?? '') }}">
					@error('city')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- ZIP -->
				<div class="col-md-6">
					<label class="form-label">ZIP Code <span class="star">*</span></label>
					<input type="text" class="form-control @error('zip_code') is-invalid @enderror"
						name="zip_code" id="zip_code"
						placeholder="e.g. 201301"
						value="{{ old('zip_code', $listing->zip_code ?? '') }}">
					@error('zip_code')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Address -->
				<div class="col-md-6">
					<label class="form-label">Business Address <span class="star">*</span></label>
					<textarea class="form-control @error('address') is-invalid @enderror"
							name="address" id="address"
							placeholder="Enter address">{{ old('address', $listing->address ?? '') }}</textarea>
					@error('address')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Category -->
				<div class="col-md-6">
					<label class="form-label">Business Category <span class="star">*</span></label>
					<select class="form-control @error('category_id') is-invalid @enderror" name="category_id" id="category_id">
						<option value="">Select Category</option>
						@foreach($listingcategories as $item)
							<option value="{{ $item->id }}"
								{{ old('category_id', $listing->category_id ?? '') == $item->id ? 'selected' : '' }}>
								{{ $item->name }}
							</option>
						@endforeach
					</select>
					@error('category_id')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Sub Category -->
				<div class="col-md-6">
					<label class="form-label">Business Sub Category <span class="star">*</span></label>
					<select class="form-control @error('sub_category_id') is-invalid @enderror" name="sub_category_id" id="sub_category_id">
						<option value="">Select Sub Category</option>
					</select>
					@error('sub_category_id')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Seller URL -->
				<div class="col-md-6">
					<label class="form-label">Seller URL (Optional)</label>

					@php
						$sellerUrls = old('seller_url') 
							?? (isset($listing) && $listing->seller_url 
								? json_decode($listing->seller_url, true) 
								: ['']);
						@endphp

						@foreach($sellerUrls as $index => $url)

							<input type="text"
								class="form-control mb-2 @error('seller_url.'.$index) is-invalid @enderror"
								name="seller_url[]"
								placeholder="https://www.xyz.com/sellerpage"
								value="{{ $url }}">

							@error('seller_url.'.$index)
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror

						@endforeach

					<button type="button" class="btn btn-sm btn-secondary mt-2" id="addSellerUrl">+ Add More</button>
				</div>
				<!-- Social Media -->

				<div class="col-md-6">
					<label class="form-label">Business Facebook URL</label>
					<input type="text"
						class="form-control @error('facebook_url') is-invalid @enderror"
						name="facebook_url"
						id="facebook_url"
						placeholder="Facebook business url"
						value="{{ old('facebook_url', $listing->facebook_url ?? '') }}">
					@error('facebook_url')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<div class="col-md-6">
					<label class="form-label">Business Twitter URL</label>
					<input type="text"
						class="form-control @error('twitter_url') is-invalid @enderror"
						name="twitter_url"
						id="twitter_url"
						placeholder="Twitter business url"
						value="{{ old('twitter_url', $listing->twitter_url ?? '') }}">
					@error('twitter_url')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<div class="col-md-6">
					<label class="form-label">Business Instagram URL</label>
					<input type="text"
						class="form-control @error('instagram_url') is-invalid @enderror"
						name="instagram_url"
						id="instagram_url"
						placeholder="Instagram business url"
						value="{{ old('instagram_url', $listing->instagram_url ?? '') }}">
					@error('instagram_url')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<div class="col-md-6">
					<label class="form-label">Business Linkedin URL</label>
					<input type="text"
						class="form-control @error('linkedin_url') is-invalid @enderror"
						name="linkedin_url"
						id="linkedin_url"
						placeholder="Linkedin business url"
						value="{{ old('linkedin_url', $listing->linkedin_url ?? '') }}">
					@error('linkedin_url')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>
				<!-- About -->
				<div class="col-12">
					<label class="form-label">About Us <span class="star">*</span></label>
					<textarea class="form-control @error('business_about_us') is-invalid @enderror"
							name="business_about_us"
							placeholder="Enter Text Here...">{{ old('business_about_us', $listing->business_about_us ?? '') }}</textarea>
					@error('business_about_us')
						<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</div>

				<!-- Submit -->
				<div class="text-start">
					<button type="submit" class="btn btn-primary px-4">
						{{ isset($listing) ? 'Update Business' : 'Add Business' }}
					</button>
				</div>

				</form>

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

</main>
<!--end page main-->
@endsection

@push('scripts')
<script>
$('#country_id').on('change', function () {
    let country_id = $(this).val();

    $('#state_id').html('<option>Loading...</option>');

    if (country_id) {
        $.get('/get-states/' + country_id, function (data) {
            let options = '<option value="">Select State</option>';

            data.forEach(function (state) {
                options += `<option value="${state.id}">${state.name}</option>`;
            });

            $('#state_id').html(options);
        });
    }
});


$(document).ready(function () {

    $('#category_id').on('change', function () {

        let category_id = $(this).val();

        $('#sub_category_id').html('<option value="">Loading...</option>');

        if (category_id) {
            $.ajax({
                url: '/get-sub-category/' + category_id,
                type: 'GET',
                dataType: 'json',
                success: function (data) {

                    let options = '<option value="">Select Sub Category</option>';

                    data.forEach(function (subCategory) {
                        options += `<option value="${subCategory.id}">${subCategory.name}</option>`;
                    });

                    $('#sub_category_id').html(options);
                },
                error: function () {
                    $('#sub_category_id').html('<option value="">Error loading data</option>');
                }
            });
        } else {
            $('#sub_category_id').html('<option value="">Select Sub Category</option>');
        }
    });

});

document.getElementById('addSellerUrl').addEventListener('click', function () {

    let html = `
    <div class="seller-url-group mt-2 d-flex">
        <input type="text" class="form-control" name="seller_url[]" placeholder="https://www.xyz.com/sellerpage">
        <button type="button" class="btn btn-danger btn-sm ms-2 removeSellerUrl">X</button>
    </div>`;

    this.insertAdjacentHTML('beforebegin', html);
});

// Remove button
document.addEventListener('click', function (e) {
    if (e.target.classList.contains('removeSellerUrl')) {
        e.target.closest('.seller-url-group').remove();
    }
});

$(document).ready(function () {

    let country_id = "{{ old('country_id', $listing->country_id ?? '') }}";
    let selected_state = "{{ old('state_id', $listing->state_id ?? '') }}";

    if (country_id) {
        $.ajax({
            url: '/get-states/' + country_id,
            type: 'GET',
            success: function (data) {

                let options = '<option value="">Select State</option>';

                data.forEach(function (state) {
                    let selected = (state.id == selected_state) ? 'selected' : '';
                    options += `<option value="${state.id}" ${selected}>${state.name}</option>`;
                });

                $('#state_id').html(options);
            }
        });
    }

});

$(document).ready(function () {

    let category_id = "{{ old('category_id', $listing->category_id ?? '') }}";
    let selected_sub_category = "{{ old('sub_category_id', $listing->sub_category_id ?? '') }}";

    if (category_id) {
        $.ajax({
            url: '/get-sub-category/' + category_id,
            type: 'GET',
            success: function (data) {

                let options = '<option value="">Select Sub Category</option>';

                data.forEach(function (subCategory) {
                    let selected = (subCategory.id == selected_sub_category) ? 'selected' : '';
                    options += `<option value="${subCategory.id}" ${selected}>${subCategory.name}</option>`;
                });

                $('#sub_category_id').html(options);
            }
        });
    }

});

setTimeout(() => {
    document.querySelector('.alert')?.remove();
}, 3000);
</script>
@endpush