<%- include('header')%>

<script>
    function handleSubmit(event){
        event.preventDefault();
        const pname = document.getElementById('pname').value
        const pdesc = document.getElementById('pdesc').value
        const pimage = document.getElementById('pimage').file[0]

        const productDetails = {
            name: pname,
            desc: pdesc,
            image: pimage ? pimage.name : 'no file inserted'

        };
        console.log('product details:', productDetails);
        alert('Image Successfully Added');
    }
</script>
<div class="container mt-5 p-3 bg-white">
    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
            <!--  -->
            <h1 class="text-primary">
                Add Services
                <button type="button" class="btn btn-primary btn-sm float-end" data-bs-toggle="modal" data-bs-target="#myModal">
                    <i class="lni lni-plus"></i> Add Category
                </button>
            </h1>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel">Add Category</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="categoryForm" method="POST" action="/admin/addCategory">
                                <div class="mb-3">
                                    <label for="categoryName" class="form-label">Category Name</label>
                                    <input type="text" class="form-control" name="name" id="categoryName" placeholder="Enter category" required>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">Add Category</button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

            <form class="form p-3" method="POST" action="/freightservice" enctype="multipart/form-data">
                <div class="form-group py-2">
                    <label>Enter Name of Service</label>
                      <input type="text" class="form-control" name="name" id="pname" aria-describedby="helpId" placeholder="Enter name of service">
                      <small id="helpId" class="form-text text-muted">Services</small>
                </div>
                <div class="form-group py-2">
                  <label for="">Enter Description</label>
                  <input type="text" class="form-control" name="description" id="pdesc" aria-describedby="helpId" placeholder="">
                  <small id="helpId" class="form-text text-muted">Help text</small>
                </div>
                <div class="form-group py-2">
                    <label for="">Enter Category</label>
                    <select type="text" class="form-control" name="category" aria-describedby="helpId">
                        <% categories.forEach(cat=>{ %>
                            <option><%= cat.name %></option>

                        <% })%>
                        
                    </select>
                </div>
                <div class="form-group py-2">
                    <input type="file" name="image" id="pimage" class="form-control">
                </div>
                <button class="btn btn-primary" type="submit">Submit</button>
                <a href="/admin" class="text-primary text-right" style="float: right;">Back</a>
                
            
            </form>
        </div>
        <div class="col-lg-2"></div>
    </div>
</div>


<%- include('footer')%>