{% 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 Ads From Conductor File</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Ad-Breaks</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Conductor-File</li>
                </ol>
            </div>
        </div>
                    
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Upload Conductor File</h3>
            </div>
            <div class="card-body">
                <form id="conductorForm" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="channelInput" class="form-label">Channel</label>
                            <input type="text" class="form-control" id="channelInput" name="channel" required />
                        </div>
                        <div class="col-md-6">
                            <label for="dateInput" class="form-label">Date</label>
                            <input type="date" class="form-control" id="dateInput" name="date" required/>
                        </div>
                    </div>
                    <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="conductorFileInput">
                            Browse   
                        </label>
                        <input type="file" id="conductorFileInput" class="file-browserinput" name="conductor_file" accept=".xlsx, .csv" 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 class="card">
            <div class="card-header"> 
                <form method="GET" action="{% url 'ads_from_conductor' %}"> 
                    <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" >Get</button>
                    <h3 class="card-title" for="date" style="display: inline-block;">Extracted Ads for Date:</h3>
                    <input type="date" id="date" name="date" type="date" class="form-control" value="{{ current_date }}" style="display: inline-block;">
                </form>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th> Date </th>
                            <th> Channel </th>
                            <th> Start At </th>
                            <th> End At </th>
                            <th> Duration </th>
                            <th> Show Before </th>
                            <th> Show After </th>
                            <th> Is Show During ? </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ad in ads_planning %}
                        <tr>
                            <td>{{ ad.date|date:"Y-m-d" }}</td> 
                            <td>{{ ad.channel }}</td> 
                            <td>{{ ad.ad_break_start_at|time:"H:i:s" }}</td>
                            <td>{{ ad.ad_break_end_at|time:"H:i:s" }}</td> 
                            <td>{{ ad.duree }}</td>   
                            <td>{{ ad.show_before }}</td>   
                            <td>{{ ad.show_after }}</td>   
                            <td>{{ ad.if_show_during }}</td>   
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>  
            </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($('#conductorForm')[0]);
            formData.append('channel', channelValue);
            formData.append('date', dateValue);
            // Send AJAX request
            $.ajax({
                url: '{% url "ads_from_conductor" %}',
                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
                            $('#conductorForm')[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
                            $('#conductorForm')[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
                        $('#conductorForm')[0].reset(); 
                    });
                }
            });
        });
    });
</script>
{% endblock content %}