{{>adminheader}}
<title>{{title}}</title>

<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: #FFEAF3; color:rgb(0, 0, 0);">
                        <h4><b>{{title}} </b></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card card-primary card-outline" style="border-left: 2px solid black;">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <img class="profile-user-img img-fluid img-box" src="{{user.profile}}"
                                alt="User profile picture">
                        </div><br>
                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Username</b>
                                <p class="float-right">
                                    {{user.username}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Email</b>
                                <p class="float-right" style="word-break: break-word;">
                                    {{user.email}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Phone</b>
                                <p class="float-right">
                                    {{user.phone}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Location</b>
                                <p class="float-right">
                                    {{user.location}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>User Type</b>
                                <p class="float-right">
                                    {{user.usertype}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Status</b>
                                <p class="float-right">
                                    {{user.status}}
                                </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"><a class="nav-link active" href="#user" data-toggle="tab">Details</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="#details" data-toggle="tab">Events</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="#idProofs" data-toggle="tab">Wish List's</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="user">
                                <form method="post" action="/admin/users/{{user._id}}" enctype="multipart/form-data">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Username<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="name" disabled
                                                    value="{{user.username}}" placeholder="Product Name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Email<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="email" disabled
                                                    value="{{user.email}}" placeholder="Product Email">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Phone<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="phone" disabled
                                                    value="{{user.phone}}" placeholder="Product Phone">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Location<span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="location" disabled
                                                    value="{{user.location}}" placeholder="Product Location">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">User Type<span
                                                        class="text-danger">*</span></label>
                                                <select class="form-control" name="usertype">
                                                    <option disabled selected value="{{user.usertype}}">
                                                        Select</option>
                                                    <option value="Admin">Admin</option>
                                                    <option value="User">User</option>
                                                </select>

                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label class="col-form-label">Freeze and Unfreeze<span
                                                        class="text-danger">*</span></label>
                                                <select class="form-control" name="status">
                                                    <option disabled selected value="{{user.status}}">Select
                                                    </option>
                                                    <option value="freeze">freeze</option>
                                                    <option value="unfreeze">unfreeze</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="form-group d-flex justify-content-center">
                                        <button class="btn btn-lg btn-primary" type="submit">Submit</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="details" style="overflow-x: auto;">
                                <table id="example2" aria-describedby="example1_info">
                                    <thead>
                                        <tr>
                                            <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Event Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Date</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Time</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Location</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Venue</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Invitation
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each events}}
                                        <tr class="odd">
                                            <td>{{inc @index}}</td>
                                            <td>{{this.name}}</td>
                                            <td>{{formatDate1 this.date }}</td>
                                            <td>{{this.time}}</td>
                                            <td>{{this.location}}</td>
                                            <td>{{this.venue}}</td>
                                            <td>
                                                <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-image="{{this.invitationcard}}"
                                                    data-bs-target="#imageModal" class="btn btn-md btn-info m-1">
                                                    <i class="fa-solid fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="idProofs" style="overflow-x: auto;">
                                <table id="example3" aria-describedby="example1_info">
                                    <thead>
                                        <tr>
                                            <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Name</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">No of Items</th>
                                            <th class="sorting" tabindex="0" aria-controls="example1">Created Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each wishlist}}
                                        <tr class="odd">
                                            <td>{{inc @index}}</td>
                                            <td>{{this.wishlistname}}</td>
                                            <td>{{this.wishlistLength}}</td>
                                            <td>{{formatDate this.createdAt}}</td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- /.tab-content -->
                </div><!-- /.card-body -->
            </div>
        </div>
    </div>
    </div>
</section>
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalLabel">Invitation Card</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="
                baground-color:none;
                border:none;
                width: 30px;
                height: 30px;
                ">
                    <i class="fa-solid fa-xmark"></i> <!-- Font Awesome close icon -->
                </button>
            </div>
            <div class="modal-body text-center">
                <img src="" id="modalImage" style="width: 50%; height: auto;">
            </div>
        </div>
    </div>
</div>
{{>adminfooter}}

<script>
    $(document).ready(function () {
        $('#example1').DataTable();
        $('#example2').DataTable();
    });

    let data1
    function subCategory() {
        var category = document.getElementById('category').value;

        // Clear previous subcategory options
        var subcategoryDropdown = document.getElementById('subcategory');
        subcategoryDropdown.innerHTML = '<option value="" disabled selected>Select Product Sub-Category</option>';

        var baseUrl = window.location.origin;

        // Make an API call to fetch subcategories based on the selected category
        fetch(`${baseUrl}/api/city/subcategories/${category}`)
            .then(response => response.json())
            .then(data => {
                // Populate the subcategory dropdown with the fetched subcategories
                data1 = data
                data.forEach(subcategory => {
                    var option = document.createElement('option');
                    option.value = subcategory.name;
                    option.textContent = subcategory.name;
                    subcategoryDropdown.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error fetching subcategories:', error);
            });
    }

    function categories() {
        var subcategory = document.getElementById('subcategory').value;

        // Find the selected subcategory in data1
        var selectedSubcategory = data1.find(item => item.name === subcategory);

        // Get the flavor dropdown
        var flavorDropdown = document.getElementById('flavor');

        // Check if the flavor is 'false' and make the dropdown read-only
        if (selectedSubcategory && selectedSubcategory.flavor === 'false') {
            flavorDropdown.setAttribute('disabled', 'disabled');
        } else {
            // Enable the dropdown if the flavor is not 'false'
            flavorDropdown.removeAttribute('disabled');
        }
    }


</script>

<script>
    function showTable(tableId) {
        // Hide all tables
        document.getElementById('table1').classList.add('d-none');
        document.getElementById('table2').classList.add('d-none');
        document.getElementById('table3').classList.add('d-none');
        // Show selected table
        document.getElementById(tableId).classList.remove('d-none');
    }

    $(document).ready(function () {
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var projectId = button.data('id');
            var modal = $(this);
            modal.find('a.btn-danger').attr('href', '/admin/deleteevent/' + projectId);
        });

        // Initialize DataTables
        $('#example2, #example3, #example4').each(function () {
            if (!$.fn.DataTable.isDataTable($(this))) {
                $(this).addClass('table table-bordered table-striped').DataTable({
                    "paging": true,
                });
            }
        });

        $('#imageModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var imageUrl = button.data('image');
            var modal = $(this);
            modal.find('#modalImage').attr('src', imageUrl);
        });
    });
</script>