@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/update/{{ $ad['id'] }}" 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;">
                        Edit '{{ $ad['title'] }}' Ad
                    </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-category tab">
                        <div class="post-ad-title">
                            <i class="fas fa-tags"></i>
                            <h3 class="item-title">Edit Ad 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">
                                    <p>{{ $top_cat_name }}</p>
                                    <select class="form-control select-box" name="category_id" id="parentCategory"
                                        required>
                                        <option value="{{ $top_cat_name }}" selected>Change category...</option>
                                        @foreach ($categories 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">
                                    Sub Category
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <p>{{ $sub_cat_name }}</p>
                                    <select class="form-control select-box" name="sub_category_id" id="subCategory"
                                        required>

                                    </select>
                                </div>
                            </div>
                        </div>
                        {{-- fetch_sub_sub_categories --}}
                        <div class="row">
                            <div class="col-sm-3">
                                <label class="control-label">
                                    Sub Sub-Category
                                    <span>*</span>
                                </label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select class="form-control select-box" name="sub_sub_category_id" id="subSubCategory"
                                        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">Edit Ad Listing Details</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" value="{{ $ad['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" value="{{ $ad['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">
                                    <p>{{ $ad['price_type'] }}</p>
                                    <select class="form-control select-box" name="price_type">
                                        <option value="{{ $ad['price_type'] }}" selected>{{ $ad['price_type'] }}</option>
                                        <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" value="{{ $ad['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 name="description" class="form-control textarea" id="data_description" cols="10" rows="8">
                                            {{ $ad['description'] }}
                                        </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">
                                    <p>{{ $ad['tags'] }}</p>
                                    <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">Edit Ad Listing 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 name="features" class="form-control textarea" id="ad_features" cols="10" rows="8">
                                        {{ $ad['features'] }}
                                    </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">Edit Images</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label> Image(s) </label>
                                <div class="row">
                                    @if ($ad_pictures != null)
                                        <table id="ad_images" class="display" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th align="center">Image</th>
                                                    <th>Date added</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($ad_pictures as $p)
                                                    <tr>
                                                        <td>
                                                            <img
                                                                src="/{{ $p['filename'] }}"
                                                                {{-- class="img-thumbnail" --}}
                                                                alt="{{ $ad['title'] }}"
                                                                width="50"
                                                                style="object-fit: contain; height: 100px; width:100%;"
                                                            />
                                                        </td>
                                                        <td>
                                                            {{ \Carbon\Carbon::parse($p['created_at'])->diffForHumans() }}
                                                        </td>
                                                        <td>
                                                            <a href="/ad/delete-pic/{{ $p['id'] }}" class="badge badge-danger">Delete</a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                                <br/ >
                                <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">Edit 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>{{ $country }}</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">
                                    <p>{{ $region }}</p>
                                    <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">
                                    <p>{{ $place }}</p>
                                    <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">
                                    <p>{{ $area }}</p>
                                    <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')