@extends('admin.layout')

@section('content')
<style>
.download-csv {  text-align:right}
.upload-csv-form1 .form-group {
    float: left;
    vertical-align: middle;
    margin-right: 20px;
}
    
.radio-label {
    font-size: 15px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.radio-label input {
    transform: scale(1.3);
    margin-right: 8px;
}

.format-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.format-table th, .format-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
</style>

<div class="search-list">
    <div class="content-wrapper search-result-list">  
        <section class="content-header">
            <h1>Upload Files</h1>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> Dashboard </a></li>
                <li class="active">Upload Files</li>
            </ol>
        </section>

        <section class="content"> 
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-info"> 
                        <div class="box-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    @if(session()->has('error'))
                                        <div class="alert alert-danger">
                                            {{ session()->get('error') }}
                                        </div>
                                    @endif 
                                    
                                    @if(session()->has('message'))
                                        <div class="alert alert-success">
                                            {{ session()->get('message') }}
                                        </div>
                                    @endif 

                                    <div id="error-message" style="display:none; color: red; padding: 10px; background-color: #f8d7da; border: 1px solid #f5c6cb; margin-bottom: 10px;">
                                        
                                    </div>

                                    <!-- Radio Buttons -->
                                    <div class="col-md-12">
                                      <label class="radio-label" id="extensive_statisticsLabel">
                                        <input type="radio" name="dump_type" value="dump1" checked> 
                                        Extension statistics
                                    </label>

                                    <label class="radio-label" id="agent_in_queue_statisticsLabel">
                                        <input type="radio" name="dump_type" value="dump2"> 
                                        Agent in Queue statistics
                                    </label>

                                    <label class="radio-label" id="detailed_queue_statisticsLabel">
                                        <input type="radio" name="dump_type" value="dump3"> 
                                        Detailed Queue statistics
                                    </label>

                                    <label class="radio-label" id="queue_answered_calls_by_waiting_timeLabel">
                                        <input type="radio" name="dump_type" value="dump4"> 
                                        Queue answered calls by waiting time
                                    </label>

                                    <label class="radio-label" id="data_additionLabel">
                                        <input type="radio" name="dump_type" value="data_addition"> 
                                        Data Addition
                                    </label>

                                    </div>
                                    
                                    <div id="dump1" class="dump-form" style="display:block;">
                                        <div class="col-md-12 download-csv">
                                            <button class="btn btn-primary" id="downloadCsv1"> Download csv format</button>
                                        </div>

                                        <div class="col-md-12"> 
                                        <form class="upload-csv-form1" id="uploadCsvForm" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label for="upload_date">Upload Date:</label>
                                                <input type="date" class="form-control" name="upload_date_1" id="upload_date" required style="width: 200px;" max="2025-04-28">
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Choose file:</label>
                                                <input class="ml-2  form-control" type="file" name="file" id="file" accept=".csv">
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Upload CSV</label>
                                                <button class="form-control btn btn-primary" type="submit">Upload CSV</button>
                                            </div>
                                        </form>
                                        </div>
                                    </div>

                                    <div id="dump2" class="dump-form" style="display:none;">
                                        <div class="col-md-12 download-csv">
                                            <button class="btn btn-primary" id="downloadCsv2"> Download csv format</button>
                                        </div>
                                        <div class="col-md-12"> 
                                        <form class="upload-csv-form1" enctype="multipart/form-data" id="uploadCsvForm2">
                                            @csrf
                                            <div class="form-group">
                                                <label for="upload_date">Upload Date:</label>
                                                <input type="date" class="form-control" name="upload_date_2" id="upload_date_2" required style="width: 200px;" max="2025-04-28">
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Choose file:</label>
                                                <input class="ml-2 form-control" type="file" name="file" id="file" accept=".csv">    
                                            </div>
                                            <div class="form-group">
                                               <label for="upload_date">Upload CSV</label>
                                                <button class="ml-2 btn btn-primary form-control" type="submit">Upload CSV</button>    
                                            </div>
                                        </form>
                                      </div>
                                    </div>

                                    <div id="dump3" class="dump-form" style="display:none;">
                                        <div class="col-md-12 download-csv">
                                            <button class="btn btn-primary" id="downloadCsv3"> Download csv format </button>
                                        </div>
                                        <div class="col-md-12"> 
                                            <form class="upload-csv-form1" id="uploadCsvForm3" enctype="multipart/form-data">
                                                @csrf
                                                <div class="form-group">
                                                <label for="upload_date">Upload Date:</label>
                                                    <input type="date" class="form-control" name="upload_date_3" id="upload_date_3" required style="width: 200px;" max="2025-04-28">
                                                </div>
                                                <div class="form-group">
                                                <label for="upload_date">Choose file:</label>
                                                    <input class="ml-2 form-control" type="file" name="file" id="file" accept=".csv">    
                                                </div>
                                                <div class="form-group">
                                                <label for="upload_date">Upload CSV</label>
                                                    <button class="ml-2 btn btn-primary form-control" type="submit">Upload CSV</button>    
                                                </div>
                                            </form>
                                       </div>
                                    </div>

                                    <div id="dump4" class="dump-form" style="display:none;">
                                        <div class="col-md-12 download-csv">
                                            <button class="btn btn-primary" id="downloadCsv4"> Download csv format </button>
                                        </div>
                                        <div class="col-md-12"> 
                                        <form class="upload-csv-form1" id="uploadCsvForm4"  enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label for="upload_date">Upload Date:</label>
                                                <input type="date" class="form-control" name="upload_date_4" id="upload_date_4" required style="width: 200px;" max="2025-04-28">
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Choose file:</label>
                                                <input class="ml-2 form-control" type="file" name="file" id="file" accept=".csv">    
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Upload CSV</label>
                                                <button class="ml-2 btn btn-primary form-control" type="submit">Upload CSV</button>    
                                            </div>
                                        </form>
                                       </div>
                                    </div>

                                    <div id="data_addition" class="dump-form" style="display:none;">
                                        <div class="col-md-12 download-csv">
                                            <button class="btn btn-primary" id="downloadCsv5"> Download csv format</button>
                                        </div>
                                        <div class="col-md-12"> 
                                        <form class="upload-csv-form1" id="data_addition_form" enctype="multipart/form-data">
                                            @csrf
                                            <div class="form-group">
                                                <label for="upload_date">Upload Date:</label>
                                                <input type="date" class="form-control" name="upload_date_5" id="upload_date_5" required style="width: 200px;" max="2025-04-28">
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Choose file:</label>
                                                <input class="ml-2 form-control" type="file" name="file" id="file" accept=".csv">    
                                            </div>
                                            <div class="form-group">
                                                <label for="upload_date">Upload CSV</label>
                                                <button class="ml-2 btn btn-primary form-control" type="submit">Upload CSV</button>    
                                            </div>
                                        </form>
                                      </div>
                                    </div>


                                    <div class="col-md-12 mt-4">
                                        <button class="btn btn-primary" id="dashboardone" disabled> Go to Dashboard one</button>
                                        <button class="btn btn-primary" id="dashboardtwo" disabled> Go to Dashboard Two</button>
                                    </div>
                                </div>
                            </div>
                         </div> 
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<script>

    document.addEventListener("DOMContentLoaded", function() {

        const radioButtons = document.querySelectorAll('input[name="dump_type"]');
        const dumpForms = document.querySelectorAll('.dump-form');

        function updateVisibility(selectedValue) {
            dumpForms.forEach(form => form.style.display = 'none');
            document.getElementById(selectedValue).style.display = 'block';
        }

        const defaultRadio = document.querySelector('input[name="dump_type"][value="dump1"]');
        if (defaultRadio) {
            defaultRadio.checked = true;
            updateVisibility(defaultRadio.value);
        }

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                updateVisibility(this.value);
            });
        });
    
    });


    document.getElementById('downloadCsv1').addEventListener('click', function() {
        downloadCSV('format1');
    });

    document.getElementById('downloadCsv2').addEventListener('click', function() {
        downloadCSV('format2');
    });

    document.getElementById('downloadCsv3').addEventListener('click', function() {
        downloadCSV('format3');
    });

    document.getElementById('downloadCsv4').addEventListener('click', function() {
        downloadCSV('format4');
    });

    document.getElementById('downloadCsv5').addEventListener('click', function() {
        downloadCSV('format5');
    });

    function downloadCSV(format) {
        let data;
        let filename = 'dump_data.csv';
        if (format === 'format1') {
            data = [
                ['Agent Extension', 'Inbound Answered', 'Inbound Unanswered', 'Outbound Answered', 'Outbound Unanswered', 'Total Answered', 'Total Unanswered', 'Total Talking Time', 'Sentiment'],
                ['Kavi Singh Technical', '0', '0', '80', '2', '180', '7', '0:00:00', 'Positive'],
            ];
            filename = 'Extensive_Statistics.csv';
        } else if (format === 'format2') {
            data = [
                ['Agent', 'Total Logged In Time', 'Calls Answered', '% Calls Serviced', 'Calls Answered Per Hour', 'Ring Time Total', 'Ring Time Mean', 'Talk Time Total', 'Talk Time Mean'],
                ['Kavi Singh Technical', '6:32:37', '8', '67%', '1', '0:02:34', '0:00:13', '1:27:44', '0:10:58'],
            ];
            filename = 'Agent_in_Queue_statistics.csv';
        } else if (format === 'format3') {
            data = [
                ['Queue', 'Calls Total', 'Calls Abandoned', 'Calls Answered', '% Calls Serviced',
                'Successful Callbacks',
                'Talk Time Total',
                'Talk Time Mean'],
                ['BOSS', '131', '36', '95', '73%', '0', '17:25:04', '0:11:00'],
                ['BOSS', '131', '36', '95', '73%', '0', '17:25:04', '0:11:00'],
            ];
            filename = 'Detailed_Queue_statistic.csv';

        } else if (format === 'format4') {
            data = [
                ['Queue', 'Call Time', 'Destination', 'Caller ID', 'Ringing', 'Answer Time', 'Sentiment'],
                ['8000 - Guru', '2025-02-05T23:38:40', '2062 Harry James CSR', '9726932041', '0:14:26', '2025-02-05T23:53:05', 'positive'],
                ['8000 - Guru', '2025-02-05T23:38:40', '2062 Harry James CSR', '9726932041', '0:14:26', '2025-02-05T23:53:05', 'positive'],
            ];
            filename = 'Queue_answered_calls_by_waiting_time.csv';
        }
        else if (format === 'format5') {
            data = [
                ['TM name', 'TL name', 'Schedule', 'Task'],
                ['Abeer soni', 'vishnu', 'P', 'Inbound'],
            ];
            filename = 'Data_Addition.csv';
        }

        let csvContent = data.map(row => row.join(',')).join('\n');
        const link = document.createElement('a');
        link.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent);
        link.target = '_blank';
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>

@endsection
@section("scripts")
<script>
    
   $(document).ready(function() {
        var savedDate = localStorage.getItem("uploadDate");
        if (savedDate) {
            const dateFormat = savedDate;
            $('#upload_date').val(dateFormat);
            $('#upload_date_2').val(dateFormat);
            $('#upload_date_3').val(dateFormat);
            $('#upload_date_4').val(dateFormat);
            $('#upload_date_5').val(dateFormat);
        }

    function resetLocalStorageKeys() {
        var keys = ['extensive_statistics', 'agent_in_queue_statistics', 'detailed_queue_statistics', 
         'queue_answered_calls_by_waiting_time', 'data_addition', 'uploadDate'];

        keys.forEach(function(key) {
            if (key === 'uploadDate') {
              localStorage.removeItem(key);
            } else {
             localStorage.setItem(key, "false");
           }
        });
    }

    function showTickFromLocalStorage() {
        var keys = ['extensive_statistics', 'agent_in_queue_statistics', 'detailed_queue_statistics', 'queue_answered_calls_by_waiting_time', 'data_addition'];

        keys.forEach(function(key) {
            if (localStorage.getItem(key) === "true") {
                $('#' + key + 'Label').append('✔️');
                $('input[name="dump_type"][value="' + key + '"]').prop('checked', true);
            }
        });

        checkRadioButtons();
    }

    function checkRadioButtons() {

        var allChecked = true;
        var keys = ['extensive_statistics', 'agent_in_queue_statistics', 'detailed_queue_statistics', 'queue_answered_calls_by_waiting_time', 'data_addition'];
        keys.forEach(function(key) {
            if (localStorage.getItem(key) !== "true") {
                allChecked = false;
            }
        });

        if (allChecked) {
            $('#dashboardone, #dashboardtwo').prop('disabled', false);
        } else {
            $('#dashboardone, #dashboardtwo').prop('disabled', true);
        }
    }

    function showTickAndSelectNext(key, nextRadioId, nextFormId) {
        localStorage.setItem(key, true);
        console.log('#' + key + 'Label', "test");
        $('#' + key + 'Label').append('✔️');
        $('input[name="dump_type"][value="' + nextRadioId + '"]').prop('checked', true);
        $('.dump-form').hide();
        $('#' + nextFormId).show();
        checkRadioButtons();
    }

    showTickFromLocalStorage();

    $('#dashboardone').on('click', function() {
        resetLocalStorageKeys();
        window.open("/admin/dashboard-1", "_blank");
    });

    $('#dashboardtwo').on('click', function() {
        resetLocalStorageKeys();
        window.open("/admin/dashboard-2", "_blank");
    });

     $("#uploadCsvForm").on("submit", function(e) {
        e.preventDefault();

        var submitButton = $("button[type='submit']");
        submitButton.prop("disabled", true).text("Processing...");
        var formData = new FormData(this);

        $.ajax({
            url: "{{ route('uploaddump1.csv') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                var uploadDate = $('#upload_date').val();
                localStorage.setItem("uploadDate", uploadDate);

                $("#uploadCsvForm")[0].reset();
                showTickAndSelectNext('extensive_statistics', 'dump2', 'dump2');
                $('#error-message').hide().empty();
                submitButton.prop("disabled", false).text("Upload CSV");
            },
            error: function(xhr, status, error) {
                var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An unexpected error occurred';
                $('#error-message').text(errorMessage).show();
                $("#uploadCsvForm")[0].reset();
                submitButton.prop("disabled", false).text("Upload CSV");
            }
        });
    });



         $("#uploadCsvForm2").on("submit", function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var submitButton = $(this).find("button[type='submit']");
            submitButton.prop("disabled", true).text("Processing...");

            $.ajax({
                url: "{{ route('uploaddump2.csv') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#uploadCsvForm2")[0].reset();
                    showTickAndSelectNext('agent_in_queue_statistics', 'dump3', 'dump3');
                    $('#error-message').hide();
                    submitButton.prop("disabled", false).text("Upload CSV");
                },
                error: function(xhr, status, error) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An unexpected error occurred';
                    $('#error-message').text(errorMessage).show();
                    $("#uploadCsvForm2")[0].reset();
                    submitButton.prop("disabled", false).text("Upload CSV");
                }
            });
        });

        $("#uploadCsvForm3").on("submit", function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var submitButton = $(this).find("button[type='submit']");
            submitButton.prop("disabled", true).text("Processing...");

            $.ajax({
                url: "{{ route('uploaddump3.csv') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#uploadCsvForm3")[0].reset();
                    showTickAndSelectNext('detailed_queue_statistics', 'dump4', 'dump4');
                    $('#error-message').hide();
                    submitButton.prop("disabled", false).text("Upload CSV");
                },
                error: function(xhr, status, error) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An unexpected error occurred';
                    $('#error-message').text(errorMessage).show();
                    $("#uploadCsvForm3")[0].reset();
                    submitButton.prop("disabled", false).text("Upload CSV");
                }
            });
        });

        $("#uploadCsvForm4").on("submit", function(e) {
            e.preventDefault();
            var formData = new FormData(this);
            var submitButton = $(this).find("button[type='submit']");
            submitButton.prop("disabled", true).text("Processing...");

            $.ajax({
                url: "{{ route('uploaddump4.csv') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#uploadCsvForm4")[0].reset();
                    showTickAndSelectNext('queue_answered_calls_by_waiting_time', 'data_addition', 'data_addition');
                    $('#error-message').hide();
                    submitButton.prop("disabled", false).text("Upload CSV");
                },
                error: function(xhr, status, error) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An unexpected error occurred';
                    $('#error-message').text(errorMessage).show();
                    $("#uploadCsvForm4")[0].reset();
                    submitButton.prop("disabled", false).text("Upload CSV");
                }
            });
        });

        $("#data_addition_form").on("submit", function(e) {
            e.preventDefault();

            var formData = new FormData(this);
            var submitButton = $(this).find("button[type='submit']");
            submitButton.prop("disabled", true).text("Processing...");

            $.ajax({
                url: "{{ route('dataAddition.csv') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $("#data_addition_form")[0].reset();
                    showTickAndSelectNext('data_addition', 'data_addition', 'data_addition');
                    $('#error-message').hide();
                    submitButton.prop("disabled", false).text("Upload CSV");
                },
                error: function(xhr, status, error) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An unexpected error occurred';
                    $('#error-message').text(errorMessage).show();
                    $("#data_addition_form")[0].reset();
                    submitButton.prop("disabled", false).text("Upload CSV");
                }
            });
        });


        
});

</script>
@endsection