<!-- Contribute new listing -->
<!-- Notes:
    Form to create a new listing
    Form should have a link to cancel creating
    Form could have a link to preview the listing
    Divided into multiple sections:
        Query if they're the owner or not
        Location
        Basic information about the location (title, subtitle, address, local area)
        Description of the location
        Contact information (phone, (optional) email, (optional) website)
        Products (Per product: name, description, price)
        Images
        Tags (optional) (some existing options, some custom)
        Preview of the listing as a popup (optional)
    On submit, the listing should be created and the user redirected to the listing page
-->

<%- include('../partials/header') %>
<%- include('../partials/nav') %>

<div class="new-listing container">
    <div class="row-auto my-4 text-center">
        <!-- <h1 class="title"><%= title %> </h1> -->
        <h3 class="text-primary title"> We're happy to have you!</h3>
        <p>This site relies on people like you contributing new locations. 
            We're a community reliant service and count on you to tells others like you where to go.
         </p>
    </div>
    <div class="row h-90">
        <section class="new col-auto container">
            <form id="new-form" action="/listings" method="POST">
                <div class="tab active scrollable row mt-3 p-2 overflow-auto">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="col mb-3">
                            <label for="owner" class="fw-bold fs-5">Are you the owner of this location?</label>
                        </div>
                        <div class="col mb-5">
                            <div class="form-check form-check-inline bg-secondary ps-5 pe-4 py-3">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" name="owner" value="yes" required>
                                <label class="form-check-label" for="inlineRadio1">Yes</label>
                            </div>
                            <div class="form-check form-check-inline bg-secondary ps-5 pe-4 py-3">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" name="owner" value="no" required checked>
                                <label class="form-check-label" for="inlineRadio2">No</label>
                            </div>  
                        </div>   
                        <div>
                            <p class="text-muted">You don't have to be! We encourage you to contribute as many places as you know.</p>
                        </div>            
                    </div>
                </div>

                <div class="tab scrollable row mt-3 p-2 overflow-auto">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="row mb-3">
                            <label for="location" class="fw-bold fs-5">Where is this store?</label>
                        </div>
                        <div class="row mb-2">
                            <div class="d-flex justify-content-center align-items-center">
                                <span class="input-group searchbar">
                                    <input type="text" name="address" class="form-control" style="min-width: 200px;" placeholder="Enter full address" required value="">
                                </span>
                                <a href="#" class="btn btn-secondary col-auto font-btn ms-3"><i class="bi bi-geo-alt-fill"></i> Use my location</a>
                            </div>
                        </div>   
                        <div class="row mb-3">
                            <p class="text-muted">You must enter a full UK address.</p>
                        </div>            
                    </div>
                </div>

                <div class="tab scrollable row mt-3 p-2 overflow-auto">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="row mb-3">
                            <label for="location" class="fw-bold fs-5">Tell us about your store</label>
                        </div>
                        <div class="mb-3 input-group align-items-center">
                            <label for="title" class="form-label col-3">Title</label>
                            <input type="text" class="form-control" name="title" placeholder="Enter title" required value="">
                        </div>   
                        <div class="mb-3 input-group align-items-center">
                            <label for="headline" class="form-label col-3">Headline</label>
                            <input type="text" class="form-control" name="subtitle" placeholder="Enter headline" value="">
                        </div>
                        <div class="mb-3 input-group align-items-center">
                            <label for="headline" class="form-label col-3">Description</label>
                            <textarea class="form-control" name="description" rows="2" placeholder="Enter description" required></textarea>
                        </div>
                        <div class="row input-group mb-3">
                            <label for="logo" class="form-label ps-0">Upload a logo</label>
                            <input type="file" class="custom-file-input ps-0" name="logo">
                          </div>
                        <div class="row mt-2">
                            <p class="text-muted">This is what people will see in the search results.</p>
                        </div>            
                    </div>
                </div>

                <div class="tab scrollable row mt-3 p-2 overflow-auto">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="row mb-3">
                            <label for="location" class="fw-bold fs-5">Add one or more products</label>
                        </div>
                        <div class="input-group mb-3 align-items-center">
                            <label for="title" class="form-label col-3">Name</label>
                            <input type="text" class="form-control" name="productName1" placeholder="Enter name" required value="">
                        </div>   
                        <div class="input-group mb-3 align-items-center">
                            <label for="headline" class="form-label col-3">Weight</label>
                            <input type="number" class="form-control" name="productWeight1" placeholder="Enter weight" step="any">
                            <span class="input-group-text">kg</span>
                        </div>
                        <div class="input-group mb-3 align-items-center">
                            <label for="logo" class="form-label col-3">Price</label>
                            <span class="input-group-text">Â£</span>
                            <input type="number" class="form-control" name="productPrice1" step="0.01" placeholder="Enter price">
                        </div>
                        <input type="hidden" name="productCount" value="1">
                        <div class="row my-3 col-12">
                            <p class="text-muted text-center">Give buyers a quick idea of what you've got on offer. <br>Include a descriptive name, size (weight in kg) and price.</p>
                        </div>
                        <div class="row d-flex flex-row align-items-end">
                            <div class="col-auto">
                                <button type="button" class="btn btn-secondary">Add another product</button>
                            </div>
                        </div>            
                    </div>
                </div>

                <div class="tab scrollable row mt-3 p-2">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="row mb-3">
                            <label for="location" class="fw-bold fs-5">When is the store open?</label>
                        </div>

                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="monday">Monday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="mondayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="mondayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="mondayClosed" name="mondayClosed">
                                <label class="form-check-label" for="mondayClosed">Closed</label>
                            </div>
                        </div>                        
                        
                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="tuesday">Tuesday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="tuesdayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="tuesdayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="tuesdayClosed" name="tuesdayClosed">
                                <label class="form-check-label" for="tuesdayClosed">Closed</label>
                            </div>
                        </div>

                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="wednesday">Wednesday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="wednesdayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="wednesdayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="wednesdayClosed" name="wednesdayClosed">
                                <label class="form-check-label" for="wednesdayClosed">Closed</label>
                            </div>
                        </div>

                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="thursday">Thursday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="thursdayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="thursdayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="thursdayClosed" name="thursdayClosed">
                                <label class="form-check-label" for="thursdayClosed">Closed</label>
                            </div>
                        </div>

                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="friday">Friday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="fridayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="fridayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="fridayClosed" name="fridayClosed">
                                <label class="form-check-label" for="fridayClosed">Closed</label>
                            </div>
                        </div>
                        
                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="saturday">Saturday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="saturdayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="saturdayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="saturdayClosed" name="saturdayClosed">
                                <label class="form-check-label" for="saturdayClosed">Closed</label>
                            </div>
                        </div>

                        <div class="d-flex flex-row align-items-center">
                            <div class="col-2">
                                <label for="sunday">Sunday</label>
                            </div>
                            <div class="input-group col">
                                <input type="time" class="form-control" name="sundayOpen" placeholder="Opening time" value="">
                                <span class="input-group-text">-</span>
                                <input type="time" class="form-control" name="sundayClose" placeholder="Closing time" value="">
                            </div>
                            <div class="form-check form-switch mx-3 col-2">
                                <input class="form-check-input" type="checkbox" id="sundayClosed" name="sundayClosed">
                                <label class="form-check-label" for="sundayClosed">Closed</label>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <p class="text-muted">Make sure that these times are correct, you don't want to disappoint anyone.</p>
                        </div>            
                    </div>
                </div>

                <div class="tab scrollable row mt-3 p-2 overflow-auto">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <div class="row mb-3">
                            <label for="location" class="fw-bold fs-5">How can people contact the store?</label>
                        </div>
                        <div class="input-group mb-3 align-items-center">
                            <label for="phoneNumber" class="form-label col-2">Phone</label>
                            <span class="input-group-text"><i class="bi bi-telephone-fill"></i></span>
                            <input type="text" class="form-control" name="phoneNumber" placeholder="Enter name" value="">
                        </div>   
                        <div class="input-group mb-3 align-items-center">
                            <label for="headline" class="form-label col-2">Email</label>
                            <span class="input-group-text"><i class="bi bi-envelope-at-fill"></i></span>
                            <input type="text" class="form-control" name="email" placeholder="Enter email" value="">
                        </div>
                        <div class="row my-3 col-10">
                            <p class="text-muted text-center">We find listings do better when they have a phone number to call.</p>
                        </div>
                    </div>
                </div>

                <div class="tab">
                    <div class="form-group d-flex flex-column justify-content-center align-items-center">
                        <input type="hidden" id="userId" name="userId" value="<%= user.id %>">
                        <div class="row mb-3">
                            <p class="fw-bold fs-5">Almost done!<p>
                        </div>
                        <!-- <div class="row mb-3 text-center">
                            <p>After we look over your contribution and make sure everything checks out you'll be able to find it in the results.</p>
                        </div> -->
                        <div class="row my-3 col-10">
                            <p class="text-muted text-center">Before you submit please make sure everything is correct.</p>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="row d-flex flex-row justify-content-between">
                        <div id="back" class="controls hidden col-2  d-inline-flex align-items-center">
                            <a href="" class="btn  btn-primary text-white" ><i class="bi bi-caret-left-fill"></i></a>
                            <span class="ms-2 text-muted">Back</span>
                        </div>
                        <div id="next" class="controls col-2 d-inline-flex align-items-center">
                            <span class="me-2 text-muted">Next</span>
                            <a href="" class="btn btn-primary text-white" ><i class="bi bi-caret-right-fill"></i></a>
                        </div>
                    </div>
                </div>
                <div class="row my-2 justify-content-center">
                    <button type="submit" class="btn col-3 controls hidden btn-info text-white mb-3" id="submit">Submit</button>
                </div>

                <div class="d-flex flex-row justify-content-betweens">
                    <span class="text-muted me-2">PROGRESS</span>
                    <span class="step py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                    <span class="step hidden py-1 px-4 me-1 flex-grow-1 bg-primary"></span>
                </div>

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


<script src="/javascripts/tabs.js"></script>
<%- include('../partials/footer') %>