<? session_start();
require_once("assets/php/_user_authenticate.php"); ?>
<!-- Login the User -->

<!-- This code generates the base URL for the website by combining the protocol, domain name, and directory path -->
<?php
    $rootFolder = basename($_SERVER['DOCUMENT_ROOT']);
    $baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . str_replace('/pages', '', dirname($_SERVER['SCRIPT_NAME']));
?>
<!-- This code generates the base URL for the website by combining the protocol, domain name, and directory path -->

<!-- This code is useful for internal styles  -->
<?php ob_start(); ?>

    <!-- DATA TABLES CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
    
    <!-- Style button location for datatable -->
    <style>
        /* Top container layout */
        
        .top-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;

            margin-top: 10px;   /* ✅ adds space above everything */
        }

        
        .dataTables_wrapper .top-container {
            margin-top: 10px;
        }



        /* Left controls (Show entries + buttons) */
        .left-controls {
            display: flex;
            align-items: center;          /* ✅ aligns dropdown vertically */
            gap: 10px;
        }

        /* Search container */
        .dataTables_filter {
            display: flex;
            align-items: center;          /* ✅ vertical alignment */
            margin-right: 15px;           /* ✅ spacing from right edge */
        }

        
        .dataTables_filter input {
            width: 300px !important;      /* ✅ about 2× default size */
            margin-left: 8px;
        }
        
        .dataTables_length {
            margin-left: 10px;
        }


        .dataTables_filter input {
            padding: 6px 10px;
            border-radius: 6px;
        }

        .dataTables_length select {
            margin: 0 5px;
        }


        /* Add left margin to "Show entries" dropdown */
        .dataTables_length {
            margin-left: 10px;
        }

        /* Add left margin to footer info text */
        .dataTables_info {
            margin-left: 10px;
        }
    </style>
    <!-- Style button location for datatable -->

<?php $styles = ob_get_clean(); ?>
<!-- This code is useful for internal styles  -->

<!-- This code is useful for content -->
<?php ob_start(); ?>

                <div class="container-fluid">

                    <!-- Page Header -->
                    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                        <h1 class="page-title fw-semibold fs-18 mb-0">Manage Businesses and Organizations</h1>
                        <div class="ms-md-1 ms-0">
                            <nav>
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);">ShipApps</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Manage Businesses and Organizations</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <!-- Page Header Close -->

                    <!-- Start::row -->
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card custom-card">
                                <div class="card-header justify-content-between">
                                    <div class="card-title"> 
                                        Businesses and Organizations <span id="business-count" class="badge bg-light text-default rounded ms-1 fs-12 align-middle">0</span>
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">
                                        <button class="btn btn-primary btn-sm btn-wave" data-bs-toggle="modal" data-bs-target="#create-contact"><i class="ri-add-line me-1 fw-semibold align-middle"></i>Add Company</button>
                                        <button class="btn btn-success-light btn-sm btn-wave">Export As CSV</button>
                                        <div class="dropdown">
                                            <a href="javascript:void(0);" class="btn btn-light btn-sm btn-wave" data-bs-toggle="dropdown" aria-expanded="false">
                                                Sort By<i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                            </a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a class="dropdown-item" href="javascript:void(0);">Newest</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">Date Added</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">A - Z</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    
                                    <div id="businesses-container" class="table-responsive">
                                        <table id="datatable-businesses"
                                            class="table table-bordered table-hover text-nowrap"
                                            style="width:100%">
                                        </table>
                                    </div>

                                </div>
                                <div class="card-footer border-top-0">
                                    <div class="d-flex align-items-center">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End::row -->

                    <!-- Start:: Company Details Offcanvas -->
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExample">
                        <div class="offcanvas-body p-0">
                            <div class="d-sm-flex align-items-top p-4 border-bottom border-block-end-dashed main-profile-cover">
                                <div>
                                    <span class="avatar avatar-xxl avatar-rounded me-3 bg-light-transparent p-2">
                                        <img src="<?php echo $baseUrl; ?>/assets/images/company-logos/12.png" alt="">
                                    </span>
                                </div>
                                <div class="flex-fill main-profile-info">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h6 class="fw-semibold mb-1 text-fixed-white">Spruko Technologies</h6>
                                        <button type="button" class="btn-close crm-contact-close-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <p class="mb-1 text-muted text-fixed-white op-7">Telecommunications</p>
                                    <p class="fs-12 text-fixed-white mb-4 op-5">  
                                        <span class="me-3"><i class="ri-building-line me-1 align-middle"></i>Georgia</span> 
                                        <span><i class="ri-map-pin-line me-1 align-middle"></i>Washington D.C</span> 
                                    </p>
                                    <div class="d-flex mb-0">
                                        <div class="me-4">
                                            <p class="fw-bold fs-20 text-fixed-white text-shadow mb-0">113</p>
                                            <p class="mb-0 fs-11 op-5 text-fixed-white">Deals</p>
                                        </div>
                                        <div class="me-4">
                                            <p class="fw-bold fs-20 text-fixed-white text-shadow mb-0">$12.2k</p>
                                            <p class="mb-0 fs-11 op-5 text-fixed-white">Contributions</p>
                                        </div>
                                        <div class="me-4">
                                            <p class="fw-bold fs-20 text-fixed-white text-shadow mb-0">$10.67k</p>
                                            <p class="mb-0 fs-11 op-5 text-fixed-white">Comitted</p>
                                        </div>
                                    </div>
                                </div>
                            </div>  
                            <div class="p-4 border-bottom border-block-end-dashed">
                                <div class="mb-0">
                                    <p class="fs-15 mb-2 fw-semibold">Professional Bio :</p>
                                    <p class="text-muted op-8 mb-0">
                                        <b class="text-default">Spruko</b> Technologies is a leading technology company specializing in innovative software solutions for businesses worldwide. With a strong focus on cutting-edge technologies and a team of skilled professionals.
                                    </p>
                                </div>   
                            </div>  
                            <div class="p-4 border-bottom border-block-end-dashed">
                                <p class="fs-14 mb-2 me-4 fw-semibold">Contact Information :</p>
                                <div class="">
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="me-2">
                                            <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                                <i class="ri-mail-line align-middle fs-14"></i>
                                            </span>
                                        </div>
                                        <div>
                                            sprukotechnologies2981@gmail.com
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-2">
                                        <div class="me-2">
                                            <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                                <i class="ri-phone-line align-middle fs-14"></i>
                                            </span>
                                        </div>
                                        <div>
                                            1678-28993-223
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-0">
                                        <div class="me-2">
                                            <span class="avatar avatar-sm avatar-rounded bg-light text-muted">
                                                <i class="ri-map-pin-line align-middle fs-14"></i>
                                            </span>
                                        </div>
                                        <div>
                                            MIG-1-11, Monroe Street, Georgetown, Washington D.C, USA,20071
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center">
                                <p class="fs-14 mb-0 me-4 fw-semibold">Social Networks :</p>
                                <div class="btn-list mb-0">
                                    <button class="btn btn-sm btn-icon btn-primary-light btn-wave waves-effect waves-light mb-0">
                                        <i class="ri-facebook-line fw-semibold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-icon btn-secondary-light btn-wave waves-effect waves-light mb-0">
                                        <i class="ri-twitter-line fw-semibold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-icon btn-warning-light btn-wave waves-effect waves-light mb-0">
                                        <i class="ri-instagram-line fw-semibold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-icon btn-success-light btn-wave waves-effect waves-light mb-0">
                                        <i class="ri-github-line fw-semibold"></i>
                                    </button>
                                    <button class="btn btn-sm btn-icon btn-danger-light btn-wave waves-effect waves-light mb-0">
                                        <i class="ri-youtube-line fw-semibold"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="p-4 border-bottom border-block-end-dashed d-flex align-items-center gap-3">
                                <div class="fs-14 fw-semibold">Company Size:</div>
                                <div>
                                    <span class="badge bg-primary-transparent m-1">Corporate</span> - 1001+ Employees
                                </div>
                            </div>
                            <div class="p-4 d-flex align-items-center gap-3">
                                <div class="fs-14 fw-semibold">
                                    Key Contact :
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="lh-1">
                                        <span class="avatar avatar-rounded avatar-sm">
                                            <img src="<?php echo $baseUrl; ?>/assets/images/faces/2.jpg" alt="img">
                                        </span>
                                    </div>    
                                    <div class="fw-semibold">Lisa Convay</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End:: Company Details Offcanvas -->

                    <!-- Start:: Add Company -->
                    <div class="modal fade" id="create-contact" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h6 class="modal-title">Add Company</h6>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body px-4">
                                    <div class="row gy-3">
                                        <div class="col-xl-12">
                                            <div class="mb-0 text-center">
                                                <span class="avatar avatar-xxl avatar-rounded p-2 bg-light">
                                                    <img src="<?php echo $baseUrl; ?>/assets/images/company-logos/11.png" alt="" id="profile-img">
                                                    <span class="badge rounded-pill bg-primary avatar-badge">
                                                        <input type="file" name="photo" class="position-absolute w-100 h-100 op-0" id="profile-change">
                                                        <i class="fe fe-camera"></i>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-xl-12">
                                            <label for="company-name" class="form-label">Company Name</label>
                                            <input type="text" class="form-control" id="company-name" placeholder="Contact Name">
                                        </div>
                                        <div class="col-xl-12">
                                            <label for="company-mail" class="form-label">Email</label>
                                            <input type="email" class="form-control" id="company-mail" placeholder="Enter Email">
                                        </div>
                                        <div class="col-xl-12">
                                            <label for="company-phone" class="form-label">Phone No</label>
                                            <input type="tel" class="form-control" id="company-phone" placeholder="Enter Phone Number">
                                        </div>
                                        <div class="col-xl-12">
                                            <label for="key-contact" class="form-label">Key Contact</label>
                                            <input type="text" class="form-control" id="key-contact" placeholder="Contact Name">
                                        </div>
                                        <div class="col-xl-12">
                                            <label class="form-label">Industry</label>
                                            <select class="form-control" name="choices-multiple-remove-button1" id="choices-multiple-remove-button1">
                                                <option value="">Select Industry</option>
                                                <option value="Realestate">Real Estate</option>
                                                <option value="Legal">Legal</option>
                                                <option value="Maritime">Maritime</option>
                                                <option value="Outdoor Activities">Outdoor Activities</option>
                                                <option value="Art">Art</option>
                                                <option value="Education">Education</option>
                                                <option value="Manufacturing">Manufacturing</option>
                                                <option value="Health Services">Health Services</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-12">
                                            <label class="form-label">Company Size</label>
                                            <select class="form-control" name="choices-multiple-remove-button2" id="choices-multiple-remove-button2">
                                                <option value="">Company Size</option>
                                                <option value="Micro">Micro Business (1 to 3 Employees)</option>
                                                <option value="Small">Small Business (4 to 20 Employees)</option>
                                                <option value="Medium">Medium Business (20 to 99 Employees)</option>
                                                <option value="Franchise">Franchise</option>
                                                <option value="Home">Home Business</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                    <button type="button" id="createBusinessBtn" class="btn btn-primary">Create Contact</button>                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End:: Add Company -->
                </div>

<?php $content = ob_get_clean(); ?>
<!-- This code is useful for content -->

<!-- This code is useful for internal scripts  -->
<?php ob_start(); ?>

    <!-- JQUERY JS -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

    <!-- DATATABLES CDN JS -->
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <!--<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script> -->
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.6/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>


        <!-- JS -->
        <script>
  
            $(document).ready(function () {

                var businessesTable = $('#datatable-businesses').DataTable({

                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    pageLength: 10,

                    dom: '<"top-container"<"left-controls"lB>f>rtip',

                    processing: true,
                    serverSide: true,

                    ajax: 'assets/php/_get_businesses.php',

                    order: [[0, 'asc']],
          
                    columns: [
                        { title: "Business Name" },
                        { title: "Packages", orderable: true },
                        { title: "Status" },
                        { title: "Tags", orderable: false, searchable: false },
                        { title: "Actions", orderable: false, searchable: false },
                        { title: "business_key", visible: false }
                    ],

                    language: {
                        searchPlaceholder: 'Search businesses...',
                        sSearch: '',
                    },

                    autoWidth: false,
                    scrollX: true
                });
              
                $('#datatable-businesses').on('xhr.dt', function (e, settings, json) {

                    if (json && json.recordsTotal !== undefined) {
                        $('#business-count').text(json.recordsTotal);
                    }

                });           

                $('#business-count').text(
                    json.recordsTotal.toLocaleString()
                );

                $('#datatable-businesses tbody').on('click', 'tr', function () {

                    var data = businessesTable.row(this).data();

                    var businessKey = data[4];

                    loadBusinessForm(businessKey);

                });

                $(document).on('click', '.view-business', function () {

                    let key = $(this).data('key');

                    loadBusinessForm(key); // you already started this

                });

                $(document).on('click', '.edit-business', function () {

                    let key = $(this).data('key');

                    loadBusinessForEdit(key); // you can create this next

                });

                $(document).on('click', '.contact-delete', function () {

                    let key = $(this).data('key');

                    if (!confirm('Delete this business?')) return;

                    $.post('assets/php/_delete_business.php', {
                        business_key: key
                    }, function (resp) {

                        if (resp.success) {
                            $('#datatable-businesses').DataTable().ajax.reload();
                        } else {
                            alert(resp.error);
                        }

                    });

                });

                $(document).on('click', '#createBusinessBtn', function () {

                    $.ajax({
                        url: 'assets/php/_create_business.php',
                        method: 'POST',
                        data: {
                            business_name: $('#company-name').val(),
                            legal_name: $('#company-name').val(), // or separate field if added
                            tax_id: '',
                            email: $('#company-mail').val(),
                            phone: $('#company-phone').val()
                        },
                        success: function (resp) {

                            if (resp.success) {

                                $('#create-contact').modal('hide');

                                $('#datatable-businesses')
                                    .DataTable()
                                    .ajax.reload();

                            } else {

                                alert(resp.error);

                            }

                        }
                    });
                });

            });

        </script>

<?php $scripts = ob_get_clean(); ?>
<!-- This code is useful for internal scripts  -->

<!-- This code use for render base file -->
<?php include 'layouts/base.php'; ?>
<!-- This code use for render base file -->