<!DOCTYPE html>
<html lang="en" class="h-100">


<head>
    <!-- meta and links start -->
    <%- include('templet/meta')-%>

</head>

<body>
    <%- include('templet/preloder_topbar_sidebar',{titel: accessdata?.topbardata?.name})-%>
        <!--********** Content body start **********-->

        <div class="content-body">

            <div class="container-fluid" style="min-height: 100vh;">
                <div class="row">
                    <div class="col-12">
                        <div class="card ">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <%= language.Service_Addons %>
                                </h3>
                                <button
                                    class="btn btn-rounded btn-primary <%= accessdata.roll.service.includes('write') ?'':'d-none' %>"
                                    data-bs-toggle="modal" data-bs-target="#service_addons"><span
                                        class="btn-icon-start text-primary "><i
                                            class="fa fa-plus color-info"></i></span>
                                    <%= language.Add_New_Addons %>
                                </button>
                            </div>
                            <div class="d-none">
                                <input type="hiden" name="sym" value="<%= accessdata.symbol %>">
                                <input type="hiden" name="pls" value="<%= accessdata.plac %>">
                                <input type="hiden" name="thousands_separator"
                                    value="<%= accessdata.thousands_separator %>">
                            </div>
                            <div class="card-body ">
                                <div class="table-responsive">
                                    <table id="example3" class="display table-responsive-lg" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>
                                                    <%= language.Addons %>
                                                </th>
                                                <th>
                                                    <%= language.Price %>
                                                </th>
                                                <th class="<%= ismulty ? '': 'd-none' %>">
                                                    <%= language.Store_Name %>
                                                </th>
                                                <th>
                                                    <%= language.Status %>
                                                </th>
                                                <th
                                                    class="<%= accessdata.roll.service.includes('edit') || accessdata.roll.service.includes('delete') ?'':'d-none' %>">
                                                    <%= language.Action %>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% addonList.forEach(function(data, i){ %>
                                                <tr>
                                                    <td>
                                                        <%= i + 1 %>
                                                    </td>
                                                    <td>
                                                        <%= data.addon %>
                                                    </td>
                                                    <td class="symbol">
                                                        <%= data.price %>
                                                    </td>
                                                    <td class="<%= ismulty ? '': 'd-none' %>">
                                                        <%=data.store %>
                                                    </td>
                                                    <td>
                                                        <%if( data.status==0){ %>
                                                            <span class="badge light badge-secondary ">Active</span>
                                                            <% }else{ %>
                                                                <span class="badge light badge-warning">Deactive</span>
                                                                <% } %>
                                                    </td>
                                                    <td>
                                                        <a href="#"
                                                            class="btn btn-primary shadow sharp me-1 <%= accessdata.roll.service.includes('edit') ?'':'d-none' %>"
                                                            id="services_addons_update" data-bs-toggle="modal"
                                                            data-bs-target="#service_addons_update"
                                                            data-id=" <%= data.id %>" data-addon="<%= data.addon %>"
                                                            data-price=" <%= data.price %>"
                                                            data-status=" <%= data.status %>">
                                                            <i class="fas fa-pencil-alt"></i></a>

                                                        <a href="/services/deletaddon/<%= data.id %>"
                                                            class="btn btn-danger shadow sharp me-1 <%= accessdata.roll.service.includes('delete') ?'':'d-none' %>"
                                                            id="delete">
                                                            <i class="fa fa-trash"></i></a>
                                                    </td>
                                                </tr>
                                                <% }) %>



                                        </tbody>
                                    </table>
                                </div>


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


        </div>

        <!--********** Content body end **********-->

        <!-- Modal update -->
        <div class="modal fade" id="service_addons_update">
            <div class="modal-dialog  modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <%= language.Edit_Service_Addons %>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form action="" id="updateaddon_form" method="post" class="need-validation">

                            <div class="row g-1 align-items-center">
                                <div class="form-group">
                                    <label><strong>
                                            <%= language.Addon_Name %>
                                        </strong><span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="addon_name_update"
                                        id="addon_name_update" placeholder="Enter Addon Name" required>
                                </div>

                                <div class="form-group">
                                    <label><strong>
                                            <%= language.Addon_Price %>
                                        </strong><span class="text-danger">*</span></label>
                                    <input type="flot" class="form-control" name="addon_price_update"
                                        id="addon_price_update" placeholder="Enter Addon Price" required>
                                </div>

                                <div class="form-group">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="active_addon_update"
                                            name="active_update" value="0">
                                        <label class="form-check-label" for="active_addon_update">
                                            <%= language.Is_Active %> ?
                                        </label>
                                    </div>
                                </div>
                            </div>
                    </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                                    <%= language.Cancel %>
                                </button>
                                <button type="submit" class="btn btn-sm  btn-primary">
                                    <%= language.Save %>
                                </button>
                            </div>
                        </form>



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

        <!-- Modal add -->
        <div class="modal fade" id="service_addons">
            <div class="modal-dialog  modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <%= language.Add_Service_Addons %>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                    <form action="/services/addaddon" method="post" class="need-validation">

                            <div class="row g-1 align-items-center">
                                <div class="form-group">
                                    <label><strong>
                                            <%= language.Addon_Name %>
                                        </strong><span class="text-danger">*</span></label>
                                    <input type="text" class="form-control " name="addon_name" id="addon_name"
                                        placeholder="Enter Addon Name" required>
                                </div>

                                <div class="form-group">
                                    <label><strong>
                                            <%= language.Addon_Price %>
                                        </strong><span class="text-danger">*</span></label>
                                    <input type="flot" class="form-control " name="addon_price" id="addon_price"
                                        placeholder="Enter Addon Price" required>
                                </div>

                                <div class="col-md-12 mb-1 <%= ismulty ? '': 'd-none' %>">
                                    <div class="form-group">
                                        <label class="form-label"><strong>
                                                <%= language.Store_List %>
                                            </strong><span class="text-danger">*</span></label>
                                        <select class="form-control wide mb-3" name="storeid" id="coupon_addon">
                                            <option value="" selected disabled> Select Store </option>
                                            <% storeList.forEach(function(x){ %>
                                                <option value="<%= x.id %>">
                                                    <%= x.name %>
                                                </option>
                                                <% }) %>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="active" name="active"
                                            value="0">
                                        <label class="form-check-label" for="active">
                                            <%= language.Is_Active %>
                                        </label>
                                    </div>
                                </div>
                            </div>
                    </div>
               
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                            <%= language.Cancel %>
                        </button>
                        <button type="submit" class="btn btn-sm  btn-primary">
                            <%= language.Save %>
                        </button>
                    </div>

                    </form>

 </div>

            </div>
        </div>

        </div>
        <!--**********************************
            Footer start
        ***********************************-->
        <%- include('templet/footer')-%>

            <!--**********************************
            Footer end
        ***********************************-->

            </div>

            <!--********** Main wrapper end **********-->
            <%- include('templet/script')-%>


                <script>
                    $('#service_addons').on('shown.bs.modal', function () {
                        $('#coupon_addon').select2({
                            dropdownParent: $('#service_addons'),
                            placeholder: 'Select Store(s)',
                            width: '100%',
                            allowClear: true
                        });
                    });
                </script>
</body>


</html>