@extends('layouts.master')
@section('title', 'Scrab Station : List')
@section('content')
<style>
/* Main table and search view toggle styles */
.main-table-view, .search-view {
    transition: all 0.3s ease;
}

.search-view {
    display: none;
}

.search-view.active {
    display: block;
}

.main-table-view.hidden {
    display: none;
}

/* Current Station Simple Table */
.current-station-info {
    margin-bottom: 20px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.current-station-info .table {
    margin-bottom: 0;
    background: white;
}

.current-station-info .table th {
    background-color: #002C3E;
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    text-align: center;
}

.current-station-info .table td {
    padding: 10px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}

/* Search Section Styles */
.search-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.search-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.search-section .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.search-section .form-control:focus {
    border-color: #002C3E;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,44,62,0.2);
}

.search-results {
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fafafa;
    max-height: 400px;
    overflow-y: auto;
}

.search-results .table {
    margin-bottom: 0;
}

.search-results .table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 16px;
    padding: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-results .table td {
    padding: 8px;
    vertical-align: middle;
}

.search-results .table tbody tr:hover {
    background-color: #f0f8ff;
}

/* Action Buttons - Sticky Footer */
.action-buttons {
    position: fixed;
    bottom: 0;
    left: 40%;
    /* right: 0; */
    text-align: right;
    padding: 20px 40px;
    /* background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%);
    backdrop-filter: blur(10px);
    border-top: 2px solid #e9ecef;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1); */
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.common-btn.action_button {
    min-width: 160px !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.addbtn {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
}

.addbtn:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.addbtn:active {
    transform: translateY(0px);
}

.cancelbtn {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white !important;
}

.cancelbtn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #545b62 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.cancelbtn:active {
    transform: translateY(0px);
}

/* Add padding to search view to prevent content from going under sticky footer */
.search-view .leadership-list-data {
    padding-bottom: 100px;
}

.back-to-list-btn {
    background-color: #002C3E !important;
    color: white !important;
    border: none !important;
}

.back-to-list-btn:hover {
    background-color: #001f2e !important;
}

/* Logo Upload Styles */
.logo-upload-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.logo-upload-section h6 {
    color: #002C3E;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
}

.logo-thumbnail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-preview {
    width: 60px;
    height: 60px;
    border: 2px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    cursor: pointer;
    position: relative;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
}

.logo-upload-btn {
    background: #002C3E;
    color: white;
    border: none;
    padding: 17px 25px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%;
}

.logo-upload-btn:hover {
    background: #001f2e;
}

/* Logo Modal Styles */
.logo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* Higher than confirmation popup */
}

.logo-modal-content {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.logo-modal-header {
    background: #002C3E;
    color: white;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.logo-modal-body {
    padding: 20px;
}

.logo-tab-buttons {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.logo-tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.logo-tab-btn.active {
    color: #002C3E;
    border-bottom-color: #002C3E;
}

.logo-tab-content {
    display: none;
}

.logo-tab-content.active {
    display: block;
}

.logo-upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.logo-upload-area:hover {
    border-color: #002C3E;
}

.logo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.logo-gallery-item {
    width: 100px;
    height: 100px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.logo-gallery-item:hover,
.logo-gallery-item.selected {
    border-color: #002C3E;
    transform: scale(1.05);
}

.logo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Confirmation Popup Styles */
.confirmation_popup .main-box {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.confirmation_popup .popup-header {
    background-color: #002C3E;
    color: white;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.confirmation_popup .popup-header h4 {
    margin: 0;
    font-size: 18px;
}

.confirmation_popup .closebtn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation_popup .closebtn:hover {
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.confirmation_popup .popup-body {
    padding: 20px;
}

.confirmation_popup #confirmationMessage {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.confirmation_popup .station-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.confirmation_popup .station-info h5 {
    color: #002C3E;
    margin-bottom: 10px;
    font-size: 16px;
}

.confirmation_popup .station-info p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.confirmation_popup .form-group {
    margin-bottom: 15px;
}

.confirmation_popup .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.confirmation_popup .form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.confirmation_popup .form-group input:focus {
    border-color: #002C3E;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,44,62,0.2);
}

.confirmation_popup .form-group .coordinates-row {
    display: flex;
    gap: 10px;
}

.confirmation_popup .form-group .coordinates-row .coord-group {
    flex: 1;
}

.confirmation_popup .popup-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.confirmation_popup .confirmYes {
    background-color: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    margin-right: 10px !important;
}

.confirmation_popup .confirmYes:hover {
    background-color: #218838 !important;
}

.confirmation_popup .confirmNo {
    background-color: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
}

.confirmation_popup .confirmNo:hover {
    background-color: #c82333 !important;
}

/* Loader Overlay Styles */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 44, 62, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-content {
    text-align: center;
    color: white;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.loader-subtext {
    font-size: 14px;
    opacity: 0.8;
}

/* Sync Data Button - Theme Matching */
.sync-data-btn {
    background: linear-gradient(135deg, #002C3E 0%, #001f2e 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,44,62,0.3) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-data-btn:hover {
    background: linear-gradient(135deg, #001f2e 0%, #001122 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,44,62,0.4) !important;
}

.sync-data-btn:active {
    transform: translateY(0px) !important;
}

.replace-station-btn {
    background-color: #002C3E;
    border-color: #002C3E;
}

.replace-station-btn:hover {
    background-color: #001f2e;
    border-color: #001f2e;
}
</style>

<div class="middle-part-wrap location-list-page-wrap list_view">
    <div class="leadership-list-wrap location-list-wrap">
        
        <!-- Main Table View -->
        <div class="main-table-view">
            <div class="leadership-top-header">
                <h3>Scrap Stations</h3>
                <div class="debug-buttons" style="margin-top: 10px;">
                    <button class="sync-data-btn" onclick="refreshData()">Sync Data</button>
                </div>
            </div>
            <div id="errormsg" class="text-center animated fadeIn" style="display: none; color:red">
                <strong class="errormsg"></strong>
            </div>
            <div id="successMsg" class="text-center animated fadeIn" style="display: none; color:green">
                <strong class="successMsg"></strong>
            </div>
            <div class="leadership-list-data scroll">
                <ul class="listRecordsUl">
                    <div class="card">
                        <div class="card-body">
                            <table id="list" class="table table-striped table-bordered viewdatatable dt-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Company</th>
                                        <th>Address</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                        <th>Last Updated</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </ul>
            </div>
        </div>

        <!-- Search View (Hidden by default) -->
        <div class="search-view">
            <div class="leadership-top-header">
                <h3>Add/Replace Station</h3>
                <button class="btn btn-sm btn-secondary back-to-list-btn">
                    <i class="fa fa-arrow-left"></i> Back to List
                </button>
            </div>

            <div id="errormsg2" class="text-center animated fadeIn" style="display: none; color:red">
                <strong class="errormsg2"></strong>
            </div>
            <div id="successMsg2" class="text-center animated fadeIn" style="display: none; color:green">
                <strong class="successMsg2"></strong>
            </div>

            <div class="leadership-list-data scroll">
                <!-- Current Station Info -->
                <div id="currentStationInfo" class="current-station-info" style="display: none;">
                    <!-- This will be populated dynamically -->
                </div>
                
                <!-- Search Section -->
                <div class="search-section">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="stationNameSearch">Search by Name:</label>
                            <input type="text" id="stationNameSearch" class="form-control" placeholder="Enter station name...">
                        </div>
                        <div class="col-md-6">
                            <label for="stationAddressSearch">Search by Address:</label>
                            <input type="text" id="stationAddressSearch" class="form-control" placeholder="Enter address or location...">
                        </div>
                    </div>
                    <div id="searchResults" class="search-results" style="margin-top: 15px;">
                        <div class="text-center p-3">Type in name or address field to search stations</div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button class="addbtn common-btn action_button">Add Station</button>
                    <button class="cancelbtn common-btn action_button">Cancel</button>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Confirmation Popup -->
<div class="commanpopup confirmation_popup" style="display: none; z-index:123457; position: fixed;">
    <div class="overlaybg" onclick="event.stopPropagation();" style="background-color: rgba(0,0,0,0.5); pointer-events: auto;"></div>
    <div class="main-box" style="max-width: 600px; width: 90%; position: relative; z-index: 123458; padding-top:0px">
        <div class="popup-header position-relative justify-content-center">
            <div class="position-absolute" style="right: 5px; top: 5px;">
                <button class="closebtn confirm-close-btn">&times;</button>
            </div>
            <div>
                <h4 class="titlemsg mt-0">Confirm Action</h4>
                <p id="confirmationMessage" style="color: #ffffff; margin: 5px 0;">Are you sure you want to perform this action?</p>
            </div>
        </div>
        <div class="popup-body">
            
                        
            <!-- Editable Fields -->
            <div id="editableFields" style="display: none;">
                <div class="form-group">
                    <label for="editAddress">Address:</label>
                    <input type="text" id="editAddress" placeholder="Enter station address">
                </div>
                
                <div class="form-group">
                    <label>Coordinates:</label>
                    <div class="coordinates-row">
                        <div class="coord-group">
                            <label for="editLatitude" style="font-weight: normal; font-size: 12px; margin-bottom: 3px;">Latitude:</label>
                            <input type="text" id="editLatitude" placeholder="Enter latitude">
                        </div>
                        <div class="coord-group">
                            <label for="editLongitude" style="font-weight: normal; font-size: 12px; margin-bottom: 3px;">Longitude:</label>
                            <input type="text" id="editLongitude" placeholder="Enter longitude">
                        </div>
                    </div>
                </div>

                <div class="form-group" id="logoSelectionForm">
                    <label>Select Logo (Optional)</label>
                    <div class="coordinates-row">
                        <div class="coord-group">
                            <div class="logo-preview" id="logoPreview" onclick="openLogoModal()" style="width: 150px; height: 100px; position: relative;">
                                <img id="logoPreviewImg" src="{{ asset('images/thumbnail-images.png') }}" alt="Logo Preview" width="150px" height="100px">
                                <button type="button" class="logo-delete-btn" onclick="deleteLogo(event)" style="position: absolute; top: 5px; right: 5px; background: #dc3545; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 12px; cursor: pointer; display: none;" title="Delete Logo">×</button>
                            </div>
                        </div>
                        <div class="coord-group" style="margin-top: 27px; text-align: left;">
                            <button type="button" class="logo-upload-btn" onclick="openLogoModal()">Choose Logo</button>
                        </div>
                    </div>
                    <input type="hidden" id="selectedLogoId" value="">
                    <input type="hidden" id="selectedLogoData" value="">
                </div>
                
                <div class="form-group" id="existingLogoMessage" style="display: none;">
                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                        <div style="display: flex; align-items: center; justify-content: center;">
                            <svg width="24" height="24" fill="currentColor" style="margin-right: 10px;">
                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                            </svg>
                            <span style="font-size: 14px; font-weight: 500;">Already added company logo for this company</span>
                        </div>
                    </div>
                </div>
                
               
            </div>
        </div>
        <div class="popup-footer text-center">
            <button class="confirmYes common-btn action_button">Yes</button>
            <button class="confirmNo common-btn action_button">No</button>
        </div>
    </div>
</div>

<!-- Logo Upload Modal -->
<div class="logo-modal" id="logoModal">
    <div class="logo-modal-content">
        <div class="logo-modal-header">
            <span>Select Station Logo</span>
            <button class="logo-modal-close" onclick="closeLogoModal()">&times;</button>
        </div>
        <div class="logo-modal-body">
            <div class="logo-tab-buttons">
                <button class="logo-tab-btn active" onclick="switchLogoTab('upload')">Upload New</button>
                <button class="logo-tab-btn" onclick="switchLogoTab('gallery')">Choose Existing</button>
            </div>
            
            <div class="logo-tab-content active" id="logoUploadTab">
                <div class="logo-upload-area" onclick="document.getElementById('logoFileInput').click()">
                    <p>Click here to upload a logo</p>
                    <p style="font-size: 12px; color: #666; margin-top: 10px;">PNG, JPG, SVG (Max 2MB)</p>
                </div>
                <input type="file" id="logoFileInput" accept="image/png, image/jpeg, image/svg+xml" style="display: none;" onchange="handleLogoUpload(event)">
                <div id="logoUploadPreview" style="margin-top: 20px; text-align: center; display: none;">
                    <img id="logoUploadPreviewImg" style="max-width: 200px; max-height: 200px; border-radius: 8px; border: 1px solid #ddd;">
                    <div style="margin-top: 10px;">
                        <button type="button" class="logo-upload-btn" onclick="saveUploadedLogo()">Use This Logo</button>
                    </div>
                </div>
            </div>
            
            <div class="logo-tab-content" id="logoGalleryTab">
                <div class="logo-gallery" id="logoGallery">
                    <!-- Gallery items will be loaded here -->
                </div>
            </div>
        </div>
        <div class="logo-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeLogoModal()">Cancel</button>
        </div>
    </div>
</div>

<!-- Loader Overlay -->
<div class="loader-overlay" id="loaderOverlay">
    <div class="loader-content">
        <div class="loader-spinner"></div>
        <div class="loader-text">Syncing Data...</div>
        <div class="loader-subtext">Please wait while we update the information</div>
    </div>
</div>

<link rel="stylesheet" type="text/css" media="screen" href="{!! asset('plugin/datatable/dataTables.bootstrap5.min.css') !!}">

<script type="text/javascript" src="{!! asset('plugin/datatable/jquery.dataTables.min.js') !!}"></script>
<script type="text/javascript" src="{!! asset('plugin/datatable/dataTables.bootstrap5.min.js') !!}"></script>
<script>
    
    let currentStationData = null;
    let selectedStationForAction = null;
    let actionType = ''; // 'add' or 'replace'
    
    $(document).ready(function () {
        $('#scrabstationClass').addClass('active'); 
        fill_datatable();
        
        // Handle Add/Replace button click from MAIN TABLE
        $(document).on('click', '#list .btn-success', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            console.log('=== MAIN TABLE ADD/REPLACE BUTTON CLICKED ===');
            
            // Get the row data from DataTable
            const row = $(this).closest('tr');
            const table = $('#list').DataTable();
            const rowData = table.row(row).data();
            
            console.log('Selected row data:', rowData);
            
            // Store current station data globally
            currentStationData = rowData;
            
            // Show search view and hide main table
            showSearchView(rowData);
        });
        
        // Handle Back to List button
        $('.back-to-list-btn, .cancelbtn').click(function() {
            console.log('=== BACK TO LIST CLICKED ===');
            hideSearchView();
        });
        
        // Handle confirmation popup close
        $('.confirmation_popup .confirm-close-btn, .confirmNo').click(function() {
            console.log('=== CLOSING CONFIRMATION POPUP ===');
            $('.confirmation_popup').hide();
            selectedStationForAction = null;
            actionType = '';
        });
        
        // Handle Add button click - Show confirmation
        $('.addbtn').click(function() {
            console.log('=== ADD BUTTON CLICKED ===');
            console.log('Current Station Data:', currentStationData);
            
            actionType = 'add';
            showConfirmationPopup('add', null);
        });
        
        // Handle Confirmation Yes button
        $('.confirmYes').click(function() {
            console.log('=== CONFIRMATION YES CLICKED ===');
            console.log('Action Type:', actionType);
            console.log('Selected Station:', selectedStationForAction);
            console.log('Current Station:', currentStationData);
            
            // Close confirmation popup first
            $('.confirmation_popup').hide();
            
            if (actionType === 'add') {
                console.log('Performing ADD action');
                performAddAction();
            } else if (actionType === 'replace') {
                console.log('Performing REPLACE action');
                performReplaceAction(selectedStationForAction);
            }
            
            selectedStationForAction = null;
            actionType = '';
        });
        
        // Handle search input for name and address
        $(document).on('input', '#stationNameSearch, #stationAddressSearch', function() {
            const nameSearch = $('#stationNameSearch').val().trim();
            const addressSearch = $('#stationAddressSearch').val().trim();
            
            console.log('Name search:', nameSearch);
            console.log('Address search:', addressSearch);
            
            try {
                searchStations(nameSearch, addressSearch);
            } catch (error) {
                console.error('Error calling searchStations:', error);
            }
        });
    });
    
    // Show search view and hide main table
    function showSearchView(currentStation = null) {
        // Hide main table view
        $('.main-table-view').addClass('hidden');
        
        // Show search view
        $('.search-view').addClass('active');
        
        // Populate current station info
        if (currentStation) {
            const currentStationHtml = `
                <h5 style="margin-bottom: 15px; color: #002C3E;">Current Station:</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Company</th>
                            <th>Address</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Map</th>
                            <th>Last Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>${currentStation.name || 'N/A'}</td>
                            <td>${currentStation.company || 'N/A'}</td>
                            <td>${currentStation.address || 'N/A'}</td>
                            <td>${currentStation.latitude || 'N/A'}</td>
                            <td>${currentStation.longitude || 'N/A'}</td>
                            <td>
                                <a href="https://www.google.com/maps?q=${currentStation.latitude || ''},${currentStation.longitude || ''}" target="_blank" style="font-size: 20px;">
                                    <img src="{{asset('images/map-1272165_1280.webp')}}" alt="⛳️" style="width: 37px; height: 37px;">
                                </a>
                            </td>
                            <td>${currentStation.last_updated || 'N/A'}</td>
                        </tr>
                    </tbody>
                </table>
            `;
            
            $('#currentStationInfo').html(currentStationHtml).show();
            
            // Pre-fill search with station name and address
            $('#stationNameSearch').val(currentStation.name || '');
            $('#stationAddressSearch').val(currentStation.address || '');
            
            // Automatically trigger search with the name
            if (currentStation.name && currentStation.name.length >= 2) {
                searchStations(currentStation.name, currentStation.address || '');
            } else {
                $('#searchResults').html('<div class="text-center p-3">Type in name or address field to search stations</div>');
            }
        } else {
            $('#currentStationInfo').hide();
            $('#stationNameSearch').val('');
            $('#stationAddressSearch').val('');
            $('#searchResults').html('<div class="text-center p-3">Type in name or address field to search stations</div>');
        }
        
        // Scroll to top
        window.scrollTo(0, 0);
    }
    
    // Hide search view and show main table
    function hideSearchView() {
        // Hide search view
        $('.search-view').removeClass('active');
        
        // Show main table view
        $('.main-table-view').removeClass('hidden');
        
        // Clear search fields
        $('#stationNameSearch').val('');
        $('#stationAddressSearch').val('');
        $('#currentStationInfo').hide();
        $('#searchResults').html('<div class="text-center p-3">Type in name or address field to search stations</div>');
        
        // Reset current station data
        currentStationData = null;
        
        // Scroll to top
        window.scrollTo(0, 0);
    }
    
    // Show confirmation popup
    function showConfirmationPopup(action, stationData = null) {
        console.log('=== SHOWING CONFIRMATION POPUP ===');
        console.log('Action:', action);
        console.log('Station Data:', stationData);
        
        let message = '';
        let displayStation = null;
        
        if (action === 'add') {
            message = 'Are you sure you want to add this station?';
            displayStation = currentStationData;
            selectedStationForAction = null;
        } else if (action === 'replace') {
            message = `Are you sure you want to replace the current station with "${stationData.name}"?`;
            displayStation = currentStationData; // Show current station data, not replacement station
            selectedStationForAction = stationData;
        }
        
        
        // Set logo preview - use station's brand_logo_url if available, otherwise use placeholder
        if (displayStation && displayStation.brand_logo_url) {
            document.getElementById('logoPreviewImg').src = displayStation.brand_logo_url;
            // Show delete button when station has a logo
            document.querySelector('.logo-delete-btn').style.display = 'block';
        } else {
            document.getElementById('logoPreviewImg').src = "{{ asset('images/thumbnail-images.png') }}";
            // Hide delete button when using placeholder
            document.querySelector('.logo-delete-btn').style.display = 'none';
        }
        document.getElementById('selectedLogoId').value = '';
        document.getElementById('selectedLogoData').value = '';
        
        // Show station info and editable fields
        if (displayStation) {
            $('#stationNameDisplay').text(displayStation.name || 'N/A');
            $('#stationCompanyDisplay').text(displayStation.company || 'N/A');
            
            // Pre-fill editable fields with current values
            $('#editAddress').val(displayStation.address || '');
            $('#editLatitude').val(displayStation.latitude || '');
            $('#editLongitude').val(displayStation.longitude || '');
            
            // Check if company already exists and handle logo selection
            if (displayStation.company) {
                fetch("{{url('admin/station/checkCompany')}}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    body: JSON.stringify({
                        company: displayStation.company
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.exists) {
                        // Company exists - hide logo selection form and show message
                        $('#logoSelectionForm').hide();
                        $('#existingLogoMessage').show();
                        console.log('Company exists, showing existing logo message');
                    } else {
                        // New company - show logo selection form and hide message
                        $('#logoSelectionForm').show();
                        $('#existingLogoMessage').hide();
                        console.log('New company, showing logo selection form');
                    }
                })
                .catch(error => {
                    console.error('Error checking company:', error);
                    // On error, show logo selection form and hide message as fallback
                    $('#logoSelectionForm').show();
                    $('#existingLogoMessage').hide();
                });
            } else {
                // No company name - show logo selection form and hide message
                $('#logoSelectionForm').show();
                $('#existingLogoMessage').hide();
            }
            
            $('#stationInfoDisplay').show();
            $('#editableFields').show();
        } else {
            $('#stationInfoDisplay').hide();
            $('#editableFields').hide();
            $('#logoSelectionForm').hide();
        }
        
        // Show confirmation popup AFTER setting data
        setTimeout(function() {
            $('.confirmation_popup').show();
        }, 100);
    }
    
    // Perform add action
    function performAddAction() {
        console.log('=== PERFORMING ADD ACTION ===');
        console.log('Current Station:', currentStationData);
        
        if (!currentStationData) {
            showMessage('Current station not found', 'error', 2);
            return;
        }
        
        // Get updated values from form
        const updatedAddress = $('#editAddress').val().trim() || currentStationData.address;
        const updatedLatitude = $('#editLatitude').val().trim() || currentStationData.latitude;
        const updatedLongitude = $('#editLongitude').val().trim() || currentStationData.longitude;
        
        // Get logo data
        const selectedLogoId = $('#selectedLogoId').val();
        const selectedLogoData = $('#selectedLogoData').val();
        
        const apiUrl = "{{url('admin/scrabstation/add')}}";
        
        const requestData = {
            scrap_station_id: currentStationData.id,
            address: updatedAddress,
            latitude: updatedLatitude,
            longitude: updatedLongitude
        };
        
        // Add logo data if selected
        if (selectedLogoId && selectedLogoData) {
            if (selectedLogoId === 'new_upload') {
                requestData.logo_data = selectedLogoData;
            } else {
                requestData.logo_id = selectedLogoId;
            }
        }
        
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMessage(`Station added: ${data.station_name}`, 'success', 2);
                
                // Go back to main table
                hideSearchView();
                
                // Refresh the main table to show new data
                $('#list').DataTable().ajax.reload(null, false);
            } else {
                showMessage(`Add failed: ${data.error}`, 'error', 2);
            }
        })
        .catch(error => {
            showMessage(`Network error: ${error.message}`, 'error', 2);
        });
    }
    
    // Perform replace action
    function performReplaceAction(stationData) {
        console.log('=== PERFORMING REPLACE ACTION ===');
        console.log('Replacing with Station:', stationData);
        console.log('Current Station:', currentStationData);
        
        const scrapStationId = currentStationData ? currentStationData.id : null;
        const existingStationId = stationData.id;
        const stationName = stationData.name || 'Unknown Station';
        
        if (!scrapStationId) {
            showMessage('Current station not found', 'error', 2);
            return;
        }
        
        // Get updated values from form
        const updatedAddress = $('#editAddress').val().trim() || stationData.address;
        const updatedLatitude = $('#editLatitude').val().trim() || stationData.latitude;
        const updatedLongitude = $('#editLongitude').val().trim() || stationData.longitude;
        
        // Get logo data
        const selectedLogoId = $('#selectedLogoId').val();
        const selectedLogoData = $('#selectedLogoData').val();
        
        const requestData = {
            scrap_station_id: scrapStationId,
            existing_station_id: existingStationId,
            address: updatedAddress,
            latitude: updatedLatitude,
            longitude: updatedLongitude
        };
        
        // Add logo data if selected
        if (selectedLogoId && selectedLogoData) {
            if (selectedLogoId === 'new_upload') {
                requestData.logo_data = selectedLogoData; // Base64 data for new upload
            } else {
                requestData.logo_id = selectedLogoId; // Existing logo ID
            }
        }
        
        // Call replace API
        fetch("{{url('admin/scrabstation/replace')}}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showMessage(`Station replaced with: ${stationName}`, 'success', 2);
                
                // Go back to main table
                hideSearchView();
                
                // Refresh the main table to show updated data
                $('#list').DataTable().ajax.reload(null, false);
            } else {
                showMessage(`Replace failed: ${data.error}`, 'error', 2);
            }
        })
        .catch(error => {
            showMessage(`Network error: ${error.message}`, 'error', 2);
        });
    }
    
    // Search stations
    function searchStations(nameSearch, addressSearch) {
        console.log('searchStations function called with:', { nameSearch, addressSearch });
        
        // Check if at least one field has 2+ characters
        if ((nameSearch.length < 2 || nameSearch === '') && (addressSearch.length < 2 || addressSearch === '')) {
            $('#searchResults').html('<div class="text-center p-3">Type at least 2 characters in name or address field</div>');
            return;
        }
        
        $('#searchResults').html('<div class="text-center p-3">Searching...</div>');
        
        const apiUrl = "{{url('admin/scrabstation/search')}}";
        
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            body: JSON.stringify({
                name_search: nameSearch,
                address_search: addressSearch,
                draw: 1,
                start: 0,
                length: 1000
            })
        })
            .then(response => response.json())
            .then(data => {
                console.log('API Response data:', data);
                if (data.success) {
                    const stations = data.data || [];
                    if (stations.length === 0) {
                        $('#searchResults').html('<div class="text-center p-3">No stations found</div>');
                    } else {
                        $('#searchResults').html(createStationTable(stations, currentStationData));
                        attachSelectHandlers();
                    }
                } else {
                    $('#searchResults').html('<div class="text-center text-danger p-3">Error: ' + (data.error || 'Unknown error') + '</div>');
                }
            })
            .catch(error => {
                console.error('API Error:', error);
                $('#searchResults').html('<div class="text-center text-danger p-3">Network error: ' + error.message + '</div>');
            });
    }
    
    // Create station table HTML
    function createStationTable(stations, currentStation = null) {
        if (stations.length === 0) {
            return '<div class="text-center p-3">No stations found</div>';
        }
        
        let html = `
            <table class="table table-striped table-bordered" style="width:100%; font-size: 12px;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Company</th>
                        <th>Address</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th>Map</th>
                        <th>Directions</th>
                        <th>Last Updated</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
        `;
        
        stations.forEach(station => {
            html += `
                <tr class="station-row" data-station='${JSON.stringify(station).replace(/'/g, "\\'")}'>
                    <td style="font-weight: 600; font-size: 16px; color: #002C3E;">${station.name || 'N/A'}</td>
                    <td style="font-size: 16px;">${station.company || 'N/A'}</td>
                    <td style="font-size: 16px;">${station.address || 'N/A'}</td>
                    <td style="font-size: 16px;">${station.latitude || 'N/A'}</td>
                    <td style="font-size: 16px;">${station.longitude || 'N/A'}</td>
                    <td style="text-align: center;">
                        <a href="https://www.google.com/maps?q=${station.latitude || ''},${station.longitude || ''}" target="_blank" class="" style="font-size: 20px;"><img src="{{asset('images/map-1272165_1280.webp')}}" alt="⛳️" style="width: 37px; height: 37px;"></a>
                    </td>
                    <td style="text-align: center;">
                        ${currentStation && currentStation.latitude && currentStation.longitude && station.latitude && station.longitude ? 
                            `<a href="https://www.google.com/maps/dir/${currentStation.latitude},${currentStation.longitude}/${station.latitude},${station.longitude}" target="_blank" class="" style="font-size: 20px;"><img src="{{asset('images/7034796.png')}}" alt="🧭" style="width: 37px; height: 37px;"></a>` : 
                            '<span style="color: #ccc; font-size: 20px;">🧭</span>'}
                    </td>
                    <td style="font-size: 16px;">${station.lastupdated || 'N/A'}</td>
                    <td style="text-align: center;">
                        <button class="btn btn-sm btn-success replace-station-btn">Replace</button>
                    </td>
                </tr>
            `;
        });
        
        html += `
                </tbody>
            </table>
        `;
        
        return html;
    }
    
    // Attach click handlers to select buttons
    function attachSelectHandlers() {
        $('.replace-station-btn').off('click').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            console.log('=== REPLACE BUTTON CLICKED ===');
            
            const row = $(this).closest('tr');
            const stationData = row.data('station');
            
            console.log('Station Data from row:', stationData);
            console.log('Current Station Data:', currentStationData);
            
            actionType = 'replace';
            showConfirmationPopup('replace', stationData);
        });
    }

    function fill_datatable(){
        var table = $('#list').DataTable({
            scrollX: true,
            lengthMenu: [
                [10, 25, 50],
                [10, 25, 50],
            ],
            "order": [[0, "desc"]],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }
            ],
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{url('admin/scrabstation/getList')}}",
                "dataType": "json",
                "type": "POST",
                "data": {'_token': "{{csrf_token()}}"}
            },
            "columns": [
                {"data": "id", "sortable": false},
                {"data": "name"},
                {"data": "company"},
                {"data": "address"},
                {"data": "latitude"},
                {"data": "longitude"},
                {"data": "last_updated"},
                {"data": "action", "sortable": false}
            ],
        });
    }

    function refreshData() {
        // Show loader overlay
        document.getElementById('loaderOverlay').style.display = 'flex';
        
        fetch("{{url('admin/scrabstation/sync')}}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        })
        .then(response => response.json())
        .then(data => {
            // Hide loader overlay
            document.getElementById('loaderOverlay').style.display = 'none';
            
            if (data.success) {
                showMessage(`✅ ${data.message}`, 'success', 1);
                $('#list').DataTable().ajax.reload(null, false);
            } else {
                showMessage(`❌ Sync failed: ${data.error}`, 'error', 1);
            }
        })
        .catch(error => {
            // Hide loader overlay
            document.getElementById('loaderOverlay').style.display = 'none';
            showMessage(`❌ Network error: ${error.message}`, 'error', 1);
        });
    }

    function showMessage(message, type, viewNumber = 1) {
        const suffix = viewNumber === 2 ? '2' : '';
        const errorDiv = document.getElementById('errormsg' + suffix);
        const successDiv = document.getElementById('successMsg' + suffix);
        
        if (type === 'error') {
            errorDiv.querySelector('.errormsg' + suffix).textContent = message;
            errorDiv.style.display = 'block';
            successDiv.style.display = 'none';
            setTimeout(() => errorDiv.style.display = 'none', 3000);
        } else {
            successDiv.querySelector('.successMsg' + suffix).textContent = message;
            successDiv.style.display = 'block';
            errorDiv.style.display = 'none';
            setTimeout(() => successDiv.style.display = 'none', 3000);
        }
    }

    // Logo Upload Functions
    function openLogoModal() {
        document.getElementById('logoModal').style.display = 'flex';
        loadLogoGallery();
    }

    function closeLogoModal() {
        document.getElementById('logoModal').style.display = 'none';
        // Reset upload preview
        document.getElementById('logoUploadPreview').style.display = 'none';
        document.getElementById('logoFileInput').value = '';
    }

    function switchLogoTab(tab) {
        // Update tab buttons
        document.querySelectorAll('.logo-tab-btn').forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');
        
        // Update tab content
        document.querySelectorAll('.logo-tab-content').forEach(content => content.classList.remove('active'));
        document.getElementById(tab === 'upload' ? 'logoUploadTab' : 'logoGalleryTab').classList.add('active');
    }

    function handleLogoUpload(event) {
        const file = event.target.files[0];
        if (!file) return;
        
        // Validate file size (2MB max)
        if (file.size > 2 * 1024 * 1024) {
            alert('File size must be less than 2MB');
            return;
        }
        
        // Validate file type
        if (!file.type.match(/image\/(png|jpeg|svg\+xml)/)) {
            alert('Only PNG, JPG, and SVG files are allowed');
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('logoUploadPreviewImg').src = e.target.result;
            document.getElementById('logoUploadPreview').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }

    function saveUploadedLogo() {
        const imgSrc = document.getElementById('logoUploadPreviewImg').src;
        if (!imgSrc) return;
        
        // Update preview in main popup
        document.getElementById('logoPreviewImg').src = imgSrc;
        document.getElementById('selectedLogoData').value = imgSrc;
        document.getElementById('selectedLogoId').value = 'new_upload';
        
        // Show delete button when new logo is uploaded
        document.querySelector('.logo-delete-btn').style.display = 'block';
        
        closeLogoModal();
    }

    function loadLogoGallery() {
        // Load existing logos from API
        fetch("{{url('admin/station/getLogos')}}", {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayLogoGallery(data.logos);
            }
        })
        .catch(error => {
            console.error('Error loading logos:', error);
        });
    }

    function displayLogoGallery(logos) {
        const gallery = document.getElementById('logoGallery');
        gallery.innerHTML = '';
        
        logos.forEach((logo, index) => {
            const item = document.createElement('div');
            item.className = 'logo-gallery-item';
            item.onclick = () => selectLogoFromGallery(logo, index);
            item.innerHTML = `<img src="${logo.url}" alt="Logo ${index + 1}">`;
            gallery.appendChild(item);
        });
    }

    function selectLogoFromGallery(logo, index) {
        // Remove previous selection
        document.querySelectorAll('.logo-gallery-item').forEach(item => item.classList.remove('selected'));
        
        // Add selection to clicked item
        event.target.closest('.logo-gallery-item').classList.add('selected');
        
        // Update preview in main popup
        document.getElementById('logoPreviewImg').src = logo.url;
        document.getElementById('selectedLogoData').value = logo.url;
        document.getElementById('selectedLogoId').value = logo.id;
        
        // Show delete button when logo is selected
        document.querySelector('.logo-delete-btn').style.display = 'block';
        
        // Close modal after a short delay to show selection
        setTimeout(() => closeLogoModal(), 300);
    }

    // Delete logo function
    function deleteLogo(event) {
        event.stopPropagation();
        
        // Reset to placeholder
        document.getElementById('logoPreviewImg').src = "{{ asset('images/thumbnail-images.png') }}";
        document.getElementById('selectedLogoId').value = '';
        document.getElementById('selectedLogoData').value = '';
        
        // Hide delete button
        document.querySelector('.logo-delete-btn').style.display = 'none';
    }

</script>
@stop