<main class="container bg-light shadow-sm rounded border my-2">
    <div class="row">
        <!-- Start Main Container -->
        <div class="col-12 col-lg-4">
            <div id="details">
                <?php echo getAds($AdsPath . '/preview_before'); ?>
                <?php echo $breadhtml; ?>
                <h1 class="p-2 mb-3 text-dark text-truncate fs-5 fw-normal text-uppercase border-bottom">
                    <?php echo $UserInfo['name']; ?> - Profile</h1>
                <div class="row">
                    <div class="col-12 mb-2">
                        <div class="mt-2">
                            <img data-bs-toggle="tooltip" title="" src="<?php echo APP_URL . '/assets/images/user.svg'; ?>" data-src="<?php echo $usrImg; ?>" alt="<?php echo $UserInfo['name']; ?>" class="lazy mx-auto d-block rounded-circle shadow-lg" width="150" height="150">
                        </div>
                        <h2 class="text-center p-2 mb-2 text-truncate fs-6 fw-normal border-bottom text-success">
                          <?php echo $UserInfo['name']; ?></h2>
                        <div class="card card-body p-0 movie-show-i fw-light">
                            <p><i class="fa fa-calendar" aria-hidden="true"></i> Registered:
                                <?php echo date('d M, Y', strtotime($UserInfo['created_at'])); ?></p>
                        </div>
                        <?php if ($isLogged && $UserInfo['id'] == $AuthUser['id']) : ?>
                            <div class="d-grid gap-3 mt-2">
                                <button type="button" onclick="editProfile();" class="btn btn-outline-danger"><i class="fa fa-edit" aria-hidden="true"></i> Edit Profile</a>
                            </div>
                            <div class="m-2 text-center">
                                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                    <?php if ($files_1) : ?>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="pills-upload-tab" data-bs-toggle="pill" data-bs-target="#pills-upload" type="button" role="tab" aria-controls="pills-home" aria-selected="true"><i class="fa fa-upload"></i> Uploaded</button>
                                        </li>
                                    <?php endif; ?>
                                    <?php if ($files_2) : ?>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-favourite-tab" data-bs-toggle="pill" data-bs-target="#pills-favourite" type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><i class="fa fa-heart"></i> Favourite</button>
                                        </li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Main Container -->
        <!-- Start Sidebar -->
        <div class="col-12 col-lg-8">
            <aside>
                <?php echo getAds($AdsPath . '/sidebar_before'); ?>
                <div class="tab-content" id="pills-tabContent">
                    <?php if ($files_1) : ?>
                        <div class="tab-pane fade show active" id="pills-upload" role="tabpanel" aria-labelledby="pills-upload-tab">
                            <div id="reletedSongs">
                                <h3><i class="fa fa-upload" aria-hidden="true"></i> Uploaded Songs</h3>
                                <?php
                                $files = $files_1;
                                require __DIR__ . '/_files_list.php';
                                unset($files_1);
                                ?>
                                <div class="text-center m-2"><a href="<?php echo APP_URL . '/musics/1/' . $UserInfo['user_name'] . $endRoute; ?>" class="btn btn-outline-primary text-uppercase">See All <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
                                    </a></div>
                            </div>
                        </div>
                    <?php endif; ?>
                    <?php if ($files_2) : ?>
                        <div class="tab-pane fade" id="pills-favourite" role="tabpanel" aria-labelledby="pills-favourite-tab">
                            <div id="uploadedSongs">
                                <h3><i class="fa fa-heart" aria-hidden="true"></i> Favourite Songs</h3>
                                <?php
                                $files = $files_2;
                                require __DIR__ . '/_files_list.php';
                                unset($files_2);
                                ?>
                                <div class="text-center m-2"><a href="<?php echo APP_URL . '/musics/1/my-favourites' . $endRoute; ?>" class="btn btn-outline-primary text-uppercase">See All <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
                                    </a></div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </aside>
        </div>
        <!-- End Sidebar -->
    </div>
    <?php if ($isLogged && $UserInfo['id'] == $AuthUser['id']) : ?>
        <div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <form id="editProfile">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEditLabel"><i class="fa fa-edit" aria-hidden="true"></i> Edit Profile
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label for="name">Name:</label>
                                    <input type="text" name="name" id="" value="<?php echo $AuthUser['name'];?>" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="name">Email:</label>
                                    <input type="text" name="email" value="<?php echo $AuthUser['email'];?>" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="name">Phone:</label>
                                    <input type="text" name="phone" value="<?php echo $AuthUser['mobile'];?>" class="form-control">
                                </div>

                                <div class="form-group col-12">
                                    <label for="name">Avator:</label>
                                    <input type="file" name="avator" class="form-control" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" onclick="submitProfile();" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <?php endif; ?>
</main>