@extends('layouts.frontend')

@section('content')
	<!--====== BANNER PART START ======-->
	<section class="banner-area bg_cover">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="banner-content">
						<h1 class="text-white">Post Ad</h1>
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="{{ url('/')}}">Home</a></li>
								<li class="breadcrumb-item active" aria-current="page">Ads</li>
							</ol>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--====== BANNER PART END ======-->

	<!--====== DASHBOARD PART START ======-->
	<section class="dashboard-area pb-110">
		<div class="container">
			<div class="row">
				<div class="col-xl-3 col-lg-4">
					<div class="left-sidebar-wrapper box-style">
						<div class="sidebar-header">
							<div class="image">
								<img src="{{ asset('assets/images/dashboard/profile-img.png')}}" alt="">
							</div>
							<div class="info">
								<h3>{{ Auth::user()->name }}</h3>
							</div>
						</div>

						<div class="sidebar-menu">
							<nav>
								<ul>
									<li>
										<a href="{{ route('dashboard')}}" ><i class="lni lni-dashboard"></i>Dashboard</a>
									</li>
									<li>
										<a href="{{ route('profile-settings') }}"><i class="lni lni-cog"></i>Profile Settings</a>
									</li>
									<li>
										<a href="{{ route('post-ad')}}" class="active"><i class="lni lni-cog"></i>Post Ad</a>
									</li>
									<li>
										<a href="{{ route('my-ads')}}"><i class="lni lni-layers"></i>My Ads</a>
									</li>
									<!-- <li>
										<a href="{{ route('offers')}}"><i class="lni lni-envelope"></i>Offers / Message</a>
									</li>
									<li>
										<a href="{{ route('payments')}}"><i class="lni lni-paypal"></i>Payments</a>
									</li> -->
									<li>
										<a href="{{ route('favorites')}}"><i class="lni lni-heart"></i>My Favorites</a>
									</li>
									<!-- <li>
										<a href="{{ route('privacy')}}"><i class="lni lni-star"></i>Privacy Settings</a>
									</li> -->
									<li>
										<a href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();"><i class="lni lni-exit"></i>Sign Out</a>
                                                     <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
									</li>
								</ul>
							</nav>
							
						</div>
					</div>
				</div>

				<div class="col-xl-9 col-lg-8">
					<div class="post-ad-wrapper box-style">
						<div class="title">
							<h3>Post Ad</h3>
						</div>

						<div class="post-ad-form-wrapper">

							<form action="{{ route('addpost')}}" method="POST" enctype="multipart/form-data">
								@csrf
								<div class="row">
									<div class="col-xl-12">
										<div class="left-wrapper pt-50">
											<h5 class="mb-25">Ad Details</h5>
											<div class="single-form mb-15">
												<label for="title" class="mb-1">Project Title</label>
												<input type="text" id="title" name="title" placeholder="Title" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<div class="single-form mb-15">
												<label for="category" class="mb-1">Categories</label>
												<select name="category" id="category" class="px-3 py-2 border rounded w-100" required>
													<option value="">Select</option>
													@foreach($categories as $categorie)
													<option value="{{ $categorie->cat_id }}">{{ $categorie->cat_name }}</option>
													@endforeach													
												</select>
											</div>
											<div class="single-form mb-15">
												<label for="subcategory" class="mb-1">Subcategorie</label>
												<select name="subcategory" id="subcategory" class="px-3 py-2 border rounded w-100" required>
													<option value="">Select</option>
													<!-- @foreach($subcategories as $subcategorie)
													<option value="{{ $subcategorie->subcat_id }}">{{ $subcategorie->subcat_name }}</option>
													@endforeach -->
													
												</select>
											</div>
											<div class="single-form mb-15">
												<label for="price" class="mb-1">Price</label>
												<input type="text" id="price" name="price" placeholder="Price" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<!-- <div class="single-form mb-15">
												<div class="form-check check-style">
													<input class="form-check-input" type="checkbox" value="none" id="flexCheckDefault1">
													<label for="flexCheckDefault1">Price On Call</label>
												</div>
											</div> -->
											<div class="single-form mb-15">
												<label for="description" class="mb-1">Description</label>
												<textarea name="description" id="description" rows="5" placeholder="Description" class="px-3 py-2 mb-0 border rounded" required></textarea>
											</div>

											<div class="single-form">
												<div class="upload-input">
													<input type="file" id="upload" name="upload" accept="image/png, image/jpeg, image/gif">
													<label for="upload" class="text-center content">
														<span class="text">
															<span class="d-block mb-15">Drop files anywhere to Upload</span>
															<span class="d-block mb-15">Or</span>
															<span class="main-btn btn-hover">Select File</span>
															<span class="d-block">Maximum upload file size 10Mb</span>
														</span>
													</label>
												</div>
											</div>
										</div>
									</div>

									<div class="col-xl-5">
										<div class="right-wrapper pt-50">
											<!-- <h5 class="mb-25">Contact Details</h5> -->

											<!-- <div class="single-form mb-15">
												<div class="d-flex">
													<div class="form-check check-style">
														<input class="form-check-input" type="checkbox" value="none" id="flexCheckDefault2">
														<label for="flexCheckDefault2">Same User</label>
													</div>
													<div class="form-check check-style">
														<input class="form-check-input" type="checkbox" value="none" id="flexCheckDefault3">
														<label for="flexCheckDefault3">Someone Else</label>
													</div>
												</div>
											</div> -->
											<!-- <div class="single-form mb-15">
												<label for="fname" class="mb-1">First Name*</label>
												<input type="text" id="fname" name="fname" placeholder="First Name" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<div class="single-form mb-15">
												<label for="lname" class="mb-1">Last Name*</label>
												<input type="text" id="lname" name="lname" placeholder="Last Name" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<div class="single-form mb-15">
												<label for="phone" class="mb-1">Phone*</label>
												<input type="text" id="phone" name="phone" placeholder="Phone" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<div class="single-form mb-15">
												<label for="address1" class="mb-1">Enter Address (Line one)</label>
												<input type="text" id="address1" name="address1" placeholder="Enter Address" class="px-3 py-2 mb-0 border rounded" required>
											</div>
											<div class="single-form mb-15">
												<label for="address2" class="mb-1">Enter Address</label>
												<input type="text" id="address2" name="address2" placeholder="Enter Address" class="px-3 py-2 mb-0 border rounded" required>
											</div> -->
											<!-- <div class="single-form mb-15">
												<label for="country" class="mb-1">Country</label>
												<select name="country" id="country" class="px-3 py-2 border rounded w-100" required>
													<option value="">Select</option>
													@foreach($countrys as $country)
													<option value="{{ $country->countryid }}">{{ $country->country_name }}</option>
													@endforeach													
												</select>
											</div>
											<div class="single-form mb-15">
												<label for="state" class="mb-1">State</label>
												<select name="state" id="state" class="px-3 py-2 border rounded w-100" required>
													<option value="">Select</option>
													@foreach($states as $state)
													<option value="{{ $state->stateid }}">{{ $state->state_name }}</option>
													@endforeach
													
												</select>
											</div>
											<div class="single-form mb-15">
												<label for="city" class="mb-1">City</label>
												<select name="city" id="city" class="px-3 py-2 border rounded w-100" required>
													<option value="">Select</option>
													@foreach($citys as $city)
													<option value="{{ $city->cityid }}">{{ $city->city_name }}</option>
													@endforeach
													
												</select>
											</div> -->
											<!-- <div class="single-form mb-15">
												<div class="form-check check-style">
													<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
													<label for="flexCheckDefault4">I agree to all Terms of Use & Posting Rules</label>
												</div>
											</div> -->
											<button class="main-btn btn-hover">Post Ad</button>
										</div>
									</div>
								</div>
							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#category').on('change', function () {
            var categoryID = $(this).val();
            if (categoryID) {
                $.ajax({
                    url: '{{ route("get.subcategories") }}',
                    type: 'POST', // Use POST method
                    data: {
                        category_id: categoryID,
                        _token: $('meta[name="csrf-token"]').attr('content') // Pass CSRF token
                    },
                    success: function (data) {
                        $('#subcategory').empty();
                        $('#subcategory').removeAttr('disabled'); // Enable subcategory dropdown
                        $('#subcategory').append('<option value="">-- Select Subcategory --</option>');
                        // Iterate over returned JSON data and append options
                        $.each(data, function (key, value) {
                            $('#subcategory').append('<option value="' + value.subcat_id + '">' + value.subcat_name + '</option>');
                        });
                    },
                    error: function (data) {
                        console.log(data); // Log errors if any
                    }
                });
            } else {
                $('#subcategory').empty();
                $('#subcategory').attr('disabled', 'disabled');
                $('#subcategory').append('<option value="">-- Select Subcategory --</option>');
            }
        });
    });
</script>
	</section>
	<!--====== DASHBOARD PART END ======-->
@endsection