@extends('layouts.master')
@section('title', 'Station : List')
@section('content')

<div class="middle-part-wrap location-list-page-wrap list_view">
    <div class="leadership-list-wrap location-list-wrap">
        <div class="leadership-top-header">
            <h3>Station Logos</h3>
        </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 station-logo-list">
                <div class="card">
                    <div class="card-body">
                        <table id="list" class="table user-list table-striped table-bordered viewdatatable dt-responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th width="400" class="text-center"><span>Id</span></th>
                                    <th width="200" class="text-center"><span>Company Name</span></th>
                                    <th width="200" class="text-center"><span>Total Stations</span></th>
                                    <th width="400" class="text-center"><span>Station Logo</span></th>
                                    <th width="400"><span>Company Logo</span></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</div>
<div class="commanpopup warning_popup" style="display: none;">
    <div class="overlaybg"></div>
    <div class="main-box">
        <p class="titlemsg mt-0"><span class="warning_text"></span></p>
        <button class="cancelbtn">Cancel</button>
    </div>
</div>
<div class="commanpopup action_popup" style="display: none;">
    <div class="overlaybg"></div>
    <div class="main-box">
        <p class="titlemsg mt-0"><span class="warning_text"></span></p>
        <button class="saveBtn rejectbtn yesbtn common-btn">Save</button>
        <button class="cancelbtn">Cancel</button>
    </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>
    
    $(document).ready(function () {
        $('#logosClass').addClass('active'); 
        fill_datatable();
    });
    
    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/station/logos/list')}}",
                "dataType": "json",
                "type": "POST",
                "data": {'_token': "{{csrf_token()}}"}
            },
            "columns": [
                {"data": "id", "sortable": false},
                {"data": "name", "className": "text-center"},
                {"data": "totalStations", "className": "text-center", "sortable": false},
                {"data": "logo", "className": "text-center", "sortable": false},
                {"data": "company_logo",  "className": "text-center", "sortable": false}
            ],
        });
    }

    $(document).on('change', '.validateAndPreviewImage', function(){
        const $this = $(this);
        const file = $this[0].files[0];
        
        if (file) {
            const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
            if (!validImageTypes.includes(file.type)) {
                $(".warning_popup .titlemsg").html('Invalid file type. Please select an image file (JPEG, PNG, GIF, WEBP).');
                $('.warning_popup').show();
                $this.val('');
                return;
            }
            const fileSize = file.size/1024/1024; // in MB 
            if(fileSize > 20){
                $(".warning_popup .titlemsg").html("Image size can't be greater than 20 MB.");
                $('.warning_popup').show();
                $this.val('');
                return;
            }
            $('td label').show();
            $('.newImages').remove();
            $('._actionBtn').remove();

            // Create image preview and action buttons
            const reader = new FileReader();
            reader.onload = function (e) {
                createImagePreview($this, e.target.result, file);
            };
            reader.readAsDataURL(file);
        }
    });

    // Function to create the image preview and action buttons
    function createImagePreview($this, imageSrc, file) {
        $this.prev('label').hide();
        
        const newImage = $('<img>', {
            src: imageSrc,
            width: '150',
            height: '150',
            class: 'newImages',
            id: 'new-logo-preview-' + $this.attr('id')
        });
        
        const saveButton = $('<button>', {
            text: 'Save',
            class: 'save-button logo-save'
        });

        const cancelButton = $('<button>', {
            text: 'Cancel',
            class: 'save-button logo-cancel'
        });

        const buttonsDiv = $('<div class="_actionBtn">', {
            class: 'logo-buttons'
        }).append(saveButton, cancelButton);

        $this.after(newImage, buttonsDiv);

        const stationId = $this.attr('data_id');
        const imageType = $this.attr('data_type');

        saveButton.on('click', function () {
            showConfirmationPopup(() => {
                saveImage(stationId, imageType, file);
            });
        });

        cancelButton.on('click', function() {
            $this.val('');
            $this.prev('label').show();
            newImage.remove();
            buttonsDiv.remove();
        });
    }
   
    // Function to show confirmation popup
    function showConfirmationPopup(onConfirm) {
        $(".action_popup .titlemsg").html("Are you sure you want to update this image?<br> Updating this image will replace the logo<br>for all related stations.");
        $('.action_popup').show();

        // Handle Save button in popup
        $(".action_popup .saveBtn").off('click').on('click', function () {
            $('.action_popup').hide();
            if (typeof onConfirm === 'function') {
                onConfirm();
            }
        });
    }
    function saveImage(stationId, imageType, file) {
        const formData = new FormData();
        formData.append('stationId', stationId);
        formData.append('imageType', imageType);
        formData.append('file', file);
        formData.append('_token', "{{csrf_token()}}");
        $('body').prepend('<div class="loader"></div>');
        $.ajax({
            url: "{{url('admin/station/logos/save')}}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#list').DataTable().ajax.reload(null, false);
                $(".warning_popup .titlemsg").html(response.message);
                $('.warning_popup').show();
                $('.loader').remove();
            },
            error: function(xhr, status, error) {
                const errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An unknown error occurred.';
                $(".warning_popup .titlemsg").html(errorMessage);
                $('.warning_popup').show();
                $('.loader').remove();
            }
        });
    }

    $(document).on('click', '.cancelbtn', function(){
        $('.commanpopup').hide();
    });

</script>
@stop