<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>FranFlix</title>

        <link rel="icon" type="image/x-icon" href="/images/favicon.ico"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.auth0.com/js/auth0-samples-theme/1.0/css/auth0-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/monokai-sublime.min.css"/>
        <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/v/bs4-4.6.0/moment-2.29.4/jszip-3.10.1/dt-2.2.2/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/fh-4.0.1/r-3.0.4/sb-1.8.2/sp-2.3.3/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-/WWPvSKtxLl8rK/oipQU3+62KDDQ6xvF92mRa/ZO/Sc4vwVg6MtfeeNCoMnpIOgE" crossorigin="anonymous">
        <style>
            /*@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/
            @import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
            body {
                font-family: "Montserrat", sans-serif;
                font-weight: 400;
                font-style: normal;
                color: #444444!important;
            }
            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
                font-family: "Montserrat", sans-serif;
                font-weight: 700!important;
                font-style: normal;
                color: #444444!important;
            }

            .logo {
                background-image: url('https://franflix.net/application/files/3617/4786/4011/FranFlix_PNG_White-150x102.png')!important;
                height:105px!important;
                width: 155px!important;
                background-repeat:no-repeat!important;
                background-size:cover!important;
                cursor: pointer;
            }
            .bg-franflix {
                background-color: #1b41bd!important;
                color: #ffffff!important;
            }

            .bg-franflix-light {
                background-color: #aba9bb!important;
                color: #ffffff!important;
            }

            .border-franflix {
                border-color: #1b41bd!important;

            }

            .navbar-dark {
                background-color: #1b41bd!important;
            }
            .nav-link {
                color: #ffffff!important;
            }
            .h1-text-primary {
                color: #1b41bd!important;
                font-weight: bolder;
            }
            .btn-primary {
                background-color: #1b41bd!important;
                color: #ffffff!important;
            }
            .image-container {
                position: relative;
                /*display: inline-block;*/
                width: 100%;
            }
            .text-franflix {
                color: #1b41bd!important;
            }
            .icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2; /* Ensure the icon is above the image */
                color : #FFFFFF;
                font-weight: bold;
            }
            .bg-orange {
                background-color: #FF6E00!important;
                color: #FFFFFF;
            }
            .border-orange {
                border-color: #FF6E00!important;
            }
            .note-editor {
                width: 100% !important;
            }
        </style>
        <!-- Google tag (gtag.js) --> 
        <script async src="https://www.googletagmanager.com/gtag/js?id=AW-990683238"></script> 
        <script> window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'AW-990683238');
        </script>
    </head>
    <body style="min-height: 100vh">
        <!-- Google Tag Manager (noscript) -->
        <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W5RCVGLL"
                height="0" width="0" style="display:none;visibility:hidden"></iframe>
        </noscript>
        <!-- End Google Tag Manager (noscript) -->
        <div class="d-flex flex-column">
            <div class="nav-container mb-3">
        <nav class="navbar navbar-expand-md navbar-dark bg-franflix text-white">
            <div class="container">
                <div id="logo" class="navbar-brand logo"></div>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    
                    <ul class="navbar-nav mr-auto">
                                                                       
                    </ul>
                    <ul class="navbar-nav d-none d-md-block">

                        <!-- Login button: show if NOT authenticated -->
                        <li class="nav-item">
                            <a href="/oauth2/authorization/okta" id="qsLoginBtn" class="text-white"><i class="fas fa-sign-in-alt text-white"></i> Login</a>
                        </li>
                        <!-- / Login button -->

                        <li class="nav-item mt-3">
                            <a href="/register" id="qsRegBtn" class="text-white"><i class="fas fa-user text-white"></i>  Register</a>
                        </li>


                        <!-- Fullsize dropdown: show if authenticated -->
                        
                        <!-- /Fullsize dropdown -->

                    </ul>

                    <!-- Responsive login button: show if NOT authenticated -->
                    <ul class="navbar-nav d-md-none">
                        <a href="/oauth2/authorization/okta" id="qsLoginBtn" class="btn btn-primary btn-block">Login</a>
                    </ul>
                    <!-- /Responsive login button -->

                    <!-- Responsive profile dropdown: show if authenticated -->
                    
                </div>
            </div>
        </nav>
    </div>
            <div  class="flex-grow-1">
                <div id="page">
        <div class="container">
            
            <div class="row">
                <div class="col-12"  id="franchisesTableDiv">
                    <section>
        
        
            
            
            
        
        <div class="row mb-5">
            
                        
        </div>
    </section>
                </div>
            </div>
        </div>
    </div>
            </div>
            <!--<div th:replace="~{fragments/footer :: footer}"></div>-->
            <section>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/v/bs4-4.6.0/moment-2.29.4/jszip-3.10.1/dt-2.2.2/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/fh-4.0.1/r-3.0.4/sb-1.8.2/sp-2.3.3/sr-1.4.1/datatables.min.js" integrity="sha384-R6m7r58ozFuPBsWMmjtZXuiJ1rCQCMDz3bKfYUgkMy7wXhFj6WleVCW0IbmKr2ju" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk/site.min.js" async defer></script>
        <script nomodule src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk/site.compat.min.js" async defer></script>
        <script>hljs.initHighlightingOnLoad();</script>
        <script>
            $(function () {

                setTimeout(() => {
                    $('#message').fadeOut('slow');
                }, 30000);

                initSummernote();

                initHomeFranchiseTable();

                if ($("#captcha").length) {
                    $('input[name="frc-captcha-response"]').on("change", function () {
                        var newValue = $(this).val();
                        $("#captchaResponse").val(newValue);
                    });
                    let previousValue = $('input[name="frc-captcha-response"]').val();
                    setInterval(function () {
                        const currentValue = $('input[name="frc-captcha-response"]').val();
                        if (currentValue !== previousValue) {
                            previousValue = currentValue;
                            $('input[name="frc-captcha-response"]').trigger('change');
                        }
                    }, 100);
                }

                if ($("#categoryTable").length) {
                    $('#categoryTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }
                    });
                }
                if ($("#franchiseTable").length) {
                    $('#franchiseTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }
                    });
                }
                if ($("#fundingSourceTable").length) {
                    $('#fundingSourceTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }
                    });
                }
                if ($("#buyerStatusesInfoTable").length) {
                    $('#buyerStatusesInfoTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }

                    });
                }
                if ($("#buyersInfoTable").length) {
                    $('#buyersInfoTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }

                    });
                }

                if ($("#buyersHomeTable").length) {
                    $('#buyersHomeTable').DataTable({
                        responsive: true,
                        /*layout: {
                         topStart: {
                         buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                         }
                         }*/

                    });
                }

                if ($("#sellersInfoTable").length) {
                    $('#sellersInfoTable').DataTable({
                        responsive: true,
                        layout: {
                            topStart: {
                                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                            }
                        }
                    });
                }
                $("#logo").on("click", function () {
                    location.href = '/';
                });
            });

            function initHomeFranchiseTable() {
                if ($("#homeFranchiseTable").length) {
                    $('#homeFranchiseTable').DataTable({
                        pageLength: 10,
                        responsive: true

                    });
                }
                if ($("#favesTable").length) {
                    $('#favesTable').DataTable({
                        pageLength: 5,
                        lengthChange: false,
                        searching: false,
                        ordering: false,
                        paging: false,
                        info: false
                    });
                }
            }
            function addToFavorites(franID) {
                var userID = $('#fran-' + franID).attr('data-userid');
                var role = $('#fran-' + franID).attr('data-role');

                var url = "\/buyers\/addToFavorites\/"

                        $.ajax({
                            type: "GET",
                            url: url + userID + "/" + role + "/" + franID,
                            success: function (data) {
                                $('#franchisesTableDiv').html(data);
                                initHomeFranchiseTable();
                            }
                        });
            }
            function removeFavorite(franID) {
                var userID = $('#fav-' + franID).attr('data-userid');
                var role = $('#fav-' + franID).attr('data-role');

                var url = "\/buyers\/removeFavorite\/"

                        $.ajax({
                            type: "GET",
                            url: url + userID + "/" + role + "/" + franID,
                            success: function (data) {
                                $('#franchisesTableDiv').html(data);
                                initHomeFranchiseTable();
                            }
                        });
            }
            function initSummernote() {
                $('[data-original-title="Recent Color"]').each(function () {
                    $(this).attr('data-backcolor', 'transparent');
                    $(this).attr('style', 'background-color: transparent;');
                });

                // Optionally, hide the "More Color" button if custom colors are not needed
                $('[data-original-title="More Color"]').each(function () {
                    $(this).attr('style', 'display: none;');
                });
                $('.summernote').summernote({
                    height: 200,
                    width: '100%!important',
                    colorButton: {
                        foreColor: '#000000',
                        backColor: 'transparent'
                    },
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['insert', ['link']],
                        ['view', ['codeview', 'help']],
                    ],
                });
            }
        </script>
    </section>
        </div>
    </body>
</html>