{{>header}}
<title>User Details</title>
{{!-- Check if there's a success message and display it --}}
{{#if success}}
{{!-- <div class="alert-success">{{success}}</div> --}}
{{/if}}

{{!-- Check if there's an error message and display it --}}
{{#if error}}
<div class="alert-danger">{{error}}</div>
{{/if}}


<section class="content">
    <div class="container-fluid">
        <div class="row pb-2 pr-2 pl-2">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    <div class="card-header" style="background-color: white; color:#4B0F77;">
                        <h4><b>User Details</b></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <img class="profile-user-img img-fluid img-box" style="height: 50%; width:50%"
                                src="/{{User.profilePicture}}" alt="User image"
                                onerror="this.onerror=null; this.src='/admin/images/dummy.png';">


                        </div><br>
                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>First Name</b>
                                <p class="float-right">
                                    {{User.firstName}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Last Name</b>
                                <p class="float-right">
                                    {{User.lastName}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Email</b>
                                <p class="float-right"
                                    style="max-width: 150px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    {{#if User.email}}{{User.email}}{{else}}N/A{{/if}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Phone</b>
                                <p class="float-right">
                                    {{User.phone}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Status</b>
                                <p class="float-right">
                                    {{#if User.status}}{{User.status}}{{else}}N/A{{/if}}
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header p-8">
                        <ul class="nav nav-pills">
                            <li class="nav-item mr-2">
                                <a class="nav-link active" href="#details" data-toggle="tab"
                                    style="color: white; background-color: #4B0F77; border-radius: 4px; padding: 8px 12px;">User
                                    Details</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="#orders" data-toggle="tab"
                                    style="color: white; background-color: #4B0F77; border-radius: 4px; padding: 8px 12px;">Orders</a>
                            </li>
                            {{#ifIncludes User.role 'user'}}
                            <li class="nav-item">
                                <a class="nav-link" href="#address" data-toggle="tab">Address</a>
                            </li>
                            <li class="nav-item">

                                {{/ifIncludes}}
                        </ul>


                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- User Details Tab -->
                            <div class="tab-pane active" id="details">
                                <form action="/admin/v1/updateuser/{{User._id}}" method="post">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">First Name</label>
                                                <input type="text" class="form-control" name="firstName" readonly
                                                    value="{{User.firstName}}" placeholder="First Name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Last Name</label>
                                                <input type="text" class="form-control" name="lastName" readonly
                                                    value="{{User.lastName}}" placeholder="Last Name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Phone</label>
                                                <input type="text" class="form-control" name="phone" readonly
                                                    value="{{User.country_id.code}} {{User.phone}}"
                                                    placeholder="Phone Number">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Email</label>
                                                <input type="email" class="form-control" name="email" readonly
                                                    value="{{#if User.email}}{{User.email}}{{else}}N/A{{/if}}"
                                                    placeholder="Email">
                                            </div>
                                        </div>
                                        {{!-- <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Address</label>
                                                <textarea class="form-control" readonly rows="1"
                                                    name="address">{{serviceProviderLocation.address}}</textarea>
                                            </div>
                                        </div> --}}
                                        {{!--
                                    </div>
                                    <div class="row"> --}}
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Status</label>
                                                <select name="status" class="form-control">
                                                    <option value="Active" {{#if (eql User.status "Active"
                                                        )}}selected{{/if}}>
                                                        Active</option>
                                                    <option value="Inactive" {{#if (eql User.status "Inactive"
                                                        )}}selected{{/if}}>
                                                        Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="col-form-label">Community</label>

                                                <select name="community" class="form-control" required>
                                                    <option value="">Select Community</option>

                                                    {{#each allCommunities}}
                                                    <option value="{{this._id}}" {{#if (eqStr this._id
                                                        ../User.community._id)}}selected{{/if}}>
                                                        {{this.communityName}}
                                                    </option>
                                                    {{/each}}

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group text-center">
                                        <button type="submit" class="btn btn-info col-md-4">Update</button>
                                    </div>
                                    {{!-- <div class="form-group d-flex justify-content-center">
                                        <a href="javascript:void(0);" data-bs-toggle="modal" data-id="{{User._id}}"
                                            data-bs-target="#deleteModal" class="btn btn-danger col-md-4 btn-block">
                                            Delete
                                        </a>
                                    </div> --}}
                                </form>
                            </div>
                            <!-- /.tab-pane -->

                            <!-- Orders Tab -->
                            <div class="tab-pane" id="orders">
                                <div class="row">
                                    <div class="col-sm-12 table-responsive">
                                        <table id="example2" class="table table-striped table-bordered"
                                            aria-describedby="example1_info">
                                            <thead>
                                                <tr>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">OrderId
                                                    </th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Community
                                                        Name</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Vendor
                                                        Name</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Receiver
                                                        Name</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Receiver
                                                        Phone</th>
                                                    <th class="sorting" tabindex="0" aria-controls="example1">Action
                                                    </th>


                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{#each userOrders}}
                                                <tr class="odd">
                                                    <td>{{this.orderId}}</td>
                                                    <td>{{this.communityName}}</td>
                                                    <td>{{this.vendorName}}</td>
                                                    <td>{{this.receiverName}}</td>
                                                    <td>{{this.receiverPhone}}</td>
                                                    <td>
                                                        <div class="eye d-flex justify-content-center">
                                                            <a href="/admin/v1/singleorder/{{this._id}}"
                                                                class="btn btn-md btn-info m-1">
                                                                <i class="fas fa-eye"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                {{/each}}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane" id="address">
                                <table id="example2" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Address</th>
                                            <th>Latitude</th>
                                            <th>Longitude</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#ifIncludes User.role 'user'}}
                                        {{#each userAddress}}
                                        <tr>
                                            <td>{{inc @index}}</td>
                                            <td>{{this.address}}</td>
                                            <td>{{this.latitude}}</td>
                                            <td>{{this.longitude}}</td>
                                            <td>{{this.status}}</td>

                                        </tr>
                                        {{/each}}
                                        {{/ifIncludes}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.tab-content -->
                        <!-- Orders Tab -->
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 style="color: black; font-weight: 480;">Are you sure you want to delete this?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <a href="" id="deleteBannerLink" type="button" class="btn btn-danger">Yes</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#deleteModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var bannerId = button.data('id');
                var modal = $(this);
                modal.find('#deleteBannerLink').attr('href', '/admin/deleteuser/' + bannerId);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            if (!$.fn.DataTable.isDataTable('#example2')) {
                $('#example2').addClass('table table-bordered table-striped').DataTable({
                    "paging": true,
                    "searching": true,
                    "lengthChange": true,
                    "ordering": true,
                    "info": true
                });
            }
        });

    </script>
    <script>
        $(document).ready(function () {
            if (!$.fn.DataTable.isDataTable('#example3')) {
                $('#example3').addClass('table table-bordered table-striped').DataTable({
                    "paging": true,
                    "searching": true,
                    "lengthChange": true,
                    "ordering": true,
                    "info": true
                });
            }
        });

    </script>
</section>
{{>footer}}

<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#example4')) {
            $('#example4').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
                "dom": 'Bfrtip',
                "buttons": [
                    'csv', 'excel', 'pdf', 'colvis'
                ]
            });
        }
    });
</script>