@include('more.partials._header')


<!--=====================================-->
<!--=        Post Add Start    			=-->
<!--=====================================-->
<section class="section-padding-equal-80">
    <div class="container">
        <div class="post-ad-box-layout1 light-shadow-bg">
            <div class="post-ad-form light-box-content">
                <div class="post-alert alert alert-success">You have unlimited free ads listing slots.</div>
                <form id="regForm" action="/ad/post" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if (Session::has('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ Session::get('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    <!-- //success -->
                    @if (Session::has('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ Session::get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    <h1 style="text-align: left !important;">Post your ad for free</h1>
                    <p><small>Provide more information about your item and upload good quality photos</small></p>
                    <!-- One "tab" for each step in the form: -->
                    {{-- <div class="post-section post-type tab">
                        <div class="post-ad-title">
                            <i class="fas fa-tags"></i>
                            <h3 class="item-title">Select Type</h3>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Ad Type
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">

                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ad_type" id="individual"
                                        value="individual">
                                    <label class="form-check-label" for="individual">INDIVIDUAL</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ad_type" id="company"
                                        value="company">
                                    <label class="form-check-label" for="company">COMPANY</label>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="post-section post-category tab">
                        <div class="post-ad-title">
                            <i class="fas fa-tags"></i>
                            <h3 class="item-title">Select Category</h3>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Category
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select class="form-control select-box" name="category_id" id="parentCategory"
                                        required>
                                        <option selected>Choose...</option>
                                        @foreach ($categories as $c)
                                            @if ($c['id'] !== 1)
                                                <option value="{{ $c['id'] }}">{{ $c['name'] }}</option>
                                                {{-- <option>Somali</option> --}}
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Sub Category
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select class="form-control select-box" name="sub_category_id" id="subCategory"
                                        required>

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="post-section post-information tab">
                        <div class="post-ad-title">
                            <i class="fas fa-folder-open"></i>
                            <h3 class="item-title">Ad Listing Information</h3>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Title
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="title" id="post-title">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Ad Summary
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="ad_summary" id="ad-summary" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Price Type
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select class="form-control select-box" name="price_type">
                                        <option value="fixed">Fixed</option>
                                        <option value="negotiable">Negotiable</option>
                                        <option value="on_call">On Call</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="post_price">
                            <div class="col-sm-3">
                                <label class="control-label" id="price_lbl">
                                    Price [KES]
                                    {{-- <span>*</span> --}}
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="price" id="post-price">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Description
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <div id="description_container">
                                        <textarea style="color: #000;" name="description" class="form-control textarea" id="data_description" cols="30" rows="8"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Tags
                                    {{-- <span>*</span> --}}
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group tags-input">
                                    <ul id="tags"></ul>
                                    <input name="tags" type="text" class="form-control" id="input-tag">
                                    <small>Enter the tags separated by commas or press the Enter (↵) button on your
                                        keyboard after each tag. The number of tags cannot exceed 15. And each tag can
                                        only be 2 to 30 characters long.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="post-section post-features tab">
                        <div class="post-ad-title">
                            <i class="fas fa-list-ul"></i>
                            <h3 class="item-title">Features</h3>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Features List
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">

                                    <textarea style="color:#000;" name="features" class="form-control textarea" id="ad_features" cols="30" rows="8"></textarea>

                                    {{-- <div class="help-text">
                                        <span>Write a feature in each line eg.</span>
                                        <span>Feature 1</span>
                                        <span>Feature 2</span>
                                        <span>....</span>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="post-section post-img tab">
                        <div class="post-ad-title">
                            <i class="far fa-image"></i>
                            <h3 class="item-title">Images</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label> Image(s) </label>
                                <input type="file" name="images[]"
                                    class="form-control @error('images') is-invalid @enderror" multiple>
                                @error('images')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <hr />
                                <br />
                                <div class="img-upload-instruction alert alert-danger">
                                    <p>Recommended image size to (870x493)px</p>
                                    <p>Image maximum size 3 MB.</p>
                                    <p>Allowed image type (png, jpg, jpeg).</p>
                                    <p>You can upload up to 5 images.</p>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="form-group">
                            <div class="img-gallery">
                                <div class="img-upload">
                                    <div class="upload-title">Drop files here to add them.</div>
                                    <a href="#" class="item-btn">Browse files ...</a>
                                </div>
                                <div class="img-upload-instruction alert alert-danger">
                                    <p>Recommended image size to (870x493)px</p>
                                    <p>Image maximum size 3 MB.</p>
                                    <p>Allowed image type (png, jpg, jpeg).</p>
                                    <p>You can upload up to 5 images.</p>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <div class="post-section post-contact tab">
                        <div class="post-ad-title">
                            <i class="fas fa-user"></i>
                            <h3 class="item-title">Seller Contact Details</h3>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Name
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" value="{{ $vendor->name }}"
                                        placeholder="Enter Seller's name" class="form-control" name="seller_name"
                                        id="seller_name" readonly>
                                    <input type="hidden" value="{{ $vendor->id }}" name="seller_id" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Email
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="email" value="{{ $vendor->email }}"
                                        placeholder="Enter Seller's email address" class="form-control"
                                        name="seller_email" id="seller_email" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Phone
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" value="{{ $vendor->phone }}"
                                        placeholder="Enter Seller's phone number" class="form-control"
                                        name="seller_phone" id="seller_phone" readonly>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Country
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select id="inputCountry" class="form-control" name="country_id">
                                        <option selected>Choose...</option>
                                        @foreach ($countries as $c)
                                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                                            {{-- <option>Somali</option> --}}
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Region
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select id="inputRegion" class="form-control" name="region_id">

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Place
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select id="inputPlace" class="form-control" name="place_id">

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Area
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select id="inputArea" class="form-control" name="area_id">

                                    </select>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="row">
                                    <div class="col-sm-3">

                                    </div>
                                    <div class="col-sm-9">
                                        <div class="form-group">
                                            <input type="submit" class="submit-btn" value="Submit Listing">
                                        </div>
                                    </div>
                                </div> --}}
                    </div>
                    <div style="overflow:auto;">
                        <div style="float:right;">
                            <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                            <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
                        </div>
                    </div>
                    <!-- Circles which indicates the steps of the form: -->
                    <div style="text-align:center;margin-top:40px;">
                        <span class="step"></span>
                        <span class="step"></span>
                        <span class="step"></span>
                        <span class="step"></span>
                        <span class="step"></span>
                        <span class="step"></span>
                    </div>
                </form>

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

@include('more.partials._footer')