{% extends "DAIManagementApp/base.html" %}

{% block content %}
<!--app-content open-->
<div class="app-content">
    <div class="side-app">
        <!-- PAGE-HEADER -->
        <div class="page-header">
            <div>
                <h1 class="page-title">Extract Spot Insertion From FTP Verif File</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">playlist</a></li>
                    <li class="breadcrumb-item"><a href="#">Spot</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Verifs-File Insertion</li>
                </ol>
            </div>
        </div>
                    
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Upload Verifs File</h3>
            </div>
            <div class="card-body">
                <form id="verifsForm" enctype="multipart/form-data">
                    {% csrf_token %} 
                    <div class="input-group mb-3 file-browser">
                        <input type="text" class="form-control browse-file" placeholder="Choose" readonly>
                        <label class="input-group-text btn btn-primary" for="verifsFileInput">
                            Browse   
                        </label>
                        <input type="file" id="verifsFileInput" class="file-browserinput" name="verifs_file" accept=".ver" style="display: none;"/>
                    </div>
                    <button type="button" id="submitButton" style="width:100px; text-align:center;" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div> 
    </div> 
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    $(document).ready(function () {
        $('#submitButton').click(function () {
            // Get the values of Channel and Date fields
            var channelValue = $('#channelInput').val();
            var dateValue = $('#dateInput').val(); 
            // Create FormData object and append Channel and Date values
            var formData = new FormData($('#verifsForm')[0]);
            formData.append('channel', channelValue);
            formData.append('date', dateValue);
            // Send AJAX request
            $.ajax({
                url: '{% url "verifs_static_insert" %}',
                type: 'POST',
                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    // Handle success response
                    if (response.status === "Success") {
                        // Show success message with Swal
                        Swal.fire({
                            icon: "success", 
                            text: response.message,
                            timer: 15000, // 15 seconds
                            showConfirmButton: false,
                        }).then((result) => { 
                            // Reset the form after the alert is closed
                            $('#verifsForm')[0].reset();
                            console.log(response)
                        });
                    } else {
                        // Show failure message with Swal
                        Swal.fire({
                            icon: "error", 
                            text: response.message,
                            timer: 15000, // 15 seconds
                            showConfirmButton: false,
                        }).then((result) => { 
                            // Reset the form after the alert is closed
                            $('#verifsForm')[0].reset(); 
                        });
                    }
                },
                error: function (xhr, status, error) {
                    // Handle error response
                    console.error('Error:', error);
                    // Show generic error message with Swal
                    Swal.fire({
                        icon: 'error', 
                        text: 'An error occurred. Please try again later.',
                        timer: 15000, // 15 seconds
                        showConfirmButton: false,
                    }).then((result) => { 
                        // Reset the form after the alert is closed
                        $('#verifsForm')[0].reset(); 
                    });
                }
            });
        });
    });
</script>
{% endblock content %}