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

{% load static %}

{% block title %} Campaigns | NEW CAMPAIGN {% endblock %}

{% block stylesheet %}
<style>    
    .btn-close-red {
        color: black; /* Set the default color */
        font-size: 1.75rem; /* Set the default font size */
    }

    .btn-close-red:hover {
        color: red; /* Change the color on hover */
        font-size: 1.75rem; /* Increase the font size on hover */
    }
</style>
{% endblock stylesheet %}

{% block body_attribute %} class="app sidebar-mini {{request.session.theme_mode}}" {% endblock body_attribute %}

{% block content %}
<!--  -->
<div class="app-content">
    <!--  -->
    <div class="side-app">
        <!--  -->
        <div class="page-header">
            <div> 
                <h1 class="page-title">New Campaign</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void()"> Campaigns </a></li>
                    <li class="breadcrumb-item active" aria-current="page"> New Campaign </li>
                </ol> 
            </div> 
        </div>
        <!--  -->
        <div class="row">
            <div class="col-12 col-sm-12">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %} 
                    
                    <!-- Campaign Basic Information -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"> Campaign Information </h3>
                        </div>
                        <div class="card-body">
                            <div class="row row-sm">
                                <!-- Campaign Name --> 
                                <div class="form-group col-lg">
                                    <label class="form-label" for="campaign_name">Name:</label>
                                    <input class="form-control mb-4" type="text" name="campaign_name" id="campaign_name" placeholder="Campaign's Name" required>
                                </div> 
                            </div>
                            <div class="row row-sm">
                                <!-- Campaign Agency --> 
                                <div class="form-group col-lg">
                                    <label class="form-label" for="campaign_agency">Agency:</label> 
                                    <select class="form-control select2-show-search form-select mb-2" id="campaign_agency" name="campaign_agency" data-placeholder="Choose one">
                                        <option value="" disabled selected>Select Agency</option>
                                        {% for agency in agencies %}
                                        <option value="{{ agency.id }}"> {{ agency.name }} </option>
                                        {% endfor %}
                                    </select> 
                                    <button type="button" class="btn btn-info-light" style="margin-top:5px;" data-bs-toggle="modal" data-bs-target="#addAgencyModal">Add New Agency</button>
                                </div> 
                                <!-- Campaign Advertiser --> 
                                <div class="form-group col-lg">
                                    <label class="form-label" for="campaign_advertiser">Advertiser:</label> 
                                    <select class="form-control select2-show-search form-select mb-2" id="campaign_advertiser" name="campaign_advertiser" data-placeholder="Choose one">
                                        <option value="" disabled selected>Select Advertiser</option>
                                        {% for advertiser in data.advertiseres %}
                                        <option value="{{ advertiser.id }}"> {{ advertiser.name }} </option>
                                        {% endfor %}
                                    </select> 
                                    <button type="button" class="btn btn-info-light" style="margin-top:5px;" data-bs-toggle="modal" data-bs-target="#addAdvertiserModal">Add New Advertiser</button> 
                                </div>  
                                <!-- Campaign Product --> 
                                <div class="form-group col-lg">
                                    <label class="form-label" for="campaign_product_name">Product: </label>
                                    <input class="form-control mb-4" placeholder="Product Name"  id="campaign_product_name"  name="campaign_product_name" type="text">
                                </div> 
                            </div>
                            <div class="row row-sm">
                                <!-- Campaign Category -->
                                <div class="col-lg">
                                    <label for="categories" class="form-label">Category</label>            
                                    <select class="form-control select2-show-search form-select mb-4" id="categories" name="id_category" data-placeholder="Choose one"> 
                                        <option selected value=""> </option> 
                                        <option value="IAB2_Automotive">Automotive</option>
                                        <option value="IAB3_Business">Business</option>
                                        <option value="IAB4_Careers">Careers</option>
                                        <option value="IAB5_Education">Education</option>
                                        <option value="IAB6_Family_&_Parenting">Family & Parenting</option>
                                        <option value="IAB7_Health_&_Fitness">Health & Fitness</option>
                                        <option value="IAB8_Food_&_Drink">Food & Drink</option>
                                        <option value="IAB9_Hobbies_&_Interests">Hobbies & Interests</option>
                                        <option value="IAB10_Home_&_Garden">Home & Garden</option>
                                        <option value="IAB11_Law,_Government,_&_Politics">Law, Government, & Politics</option>
                                        <option value="IAB12_News_/_Weather_/_Information">News / Weather / Information</option>
                                        <option value="IAB13_Personal_Finance">Personal Finance</option>
                                        <option value="IAB14_Society">Society</option>
                                        <option value="IAB16_Pets">Pets</option>
                                        <option value="IAB17_Sports">Sports</option>
                                        <option value="IAB18_Style_&_Fashion">Style & Fashion</option>
                                        <option value="IAB19_Technology_&_Computing">Technology & Computing</option>
                                        <option value="IAB20_Travel">Travel</option>
                                        <option value="IAB21_Real_Estate">Real Estate</option>
                                        <option value="IAB22_Shopping">Shopping</option>
                                        <option value="IAB23_Religion_&_Spirituality">Religion & Spirituality</option>
                                        <option value="IAB24_Uncategorized">Uncategorized</option>
                                    </select>     
                                </div> 
                                <!-- Campaign Country -->
                                <div class="col-lg">
                                    <label class="form-label">Country</label>
                                    <select class="form-control select2-show-search form-select mb-4" id="Countries" name="id_country" data-placeholder="Choose one"> 
                                        <option selected value=""> </option> 
                                        <option value="france">France</option>  
                                        <option value="italy">Italy</option> 
                                        <option value="spain">Spain</option> 
                                        <option value="netherlands">Netherlands</option>
                                        <option value="belgium">Belgium</option>
                                    </select>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <!-- Campaign Planing -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"> Periode </h3>
                        </div>
                        <div class= "card-body">
                            <div class="row row-sm"> 
                                <!-- Campaign Start At -->
                                <div class="form-group col-lg ">
                                    <label class="form-label">DATE Start : </label>
                                    <input type="date" id="start_day" name="start_day" class="form-control hasDatepicker" placeholder="MM/DD/YYYY" autocomplete="off" required>
                                </div> 
                                <!-- Campaign End At -->
                                <div class="form-group col-lg ">
                                    <label class="form-label">DATE End : </label>
                                    <input type="date" id="end_day" name="end_day" class="form-control hasDatepicker" placeholder="MM/DD/YYYY" autocomplete="off" required>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <!-- Campaign CPM --> 
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-tittle"> CPM </h3>
                        </div>
                        <div class="card-body">
                            <div class="row row-sm">
                                <div class="col-lg ">
                                    <label class="form-label"> Budget: </label>
                                    <input type="number" id="budget" name="budget" class="form-control hasDatepicker" >
                                </div> 
                                <div class="col-lg ">
                                    <label class="form-label"> CPM : </label>
                                    <input type="number" id="cpm" name="cpm" class="form-control hasDatepicker" >
                                </div>
                                <div class="col-lg ">
                                    <label class="form-label"> Volume Total: </label>
                                    <input type="number" id="volume" name="volume" class="form-control hasDatepicker" >
                                </div> 
                                <div class="col-lg ">
                                    <label class="form-label"> Broadcasts Number /Day: </label>
                                    <input type="number" id="broadcasts_day" name="broadcasts_day" class="form-control hasDatepicker" >
                                </div> 
                            </div>
                        </div>
                    </div>
                    <!-- Campaign Media Planing --> 
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-tittle"> Media Planning </h3>
                        </div> 
                        <div class="card-body">
                            <!-- Campaign Rotation -->
                            <div class="row row-sm">
                                <div class="col-lg">
                                    <label  class="form-label">General Rotation</label>
                                    <select class="form-control select2-show-search form-select mb-4"  name="general_rotation" data-placeholder="Choose one" id="general_rotation">
                                        <option  value="1">Yes</option>
                                        <option selected value="0" >No</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Media Type -->
                            <div class="row row-sm">
                                <div class="col-lg">
                                    <label  class="form-label">Media Type</label>
                                    <select class="form-control select2-show-search form-select mb-4"  name="media_type" data-placeholder="Choose one" id="media_type">
                                        <option selected value="tv">Tv Linear</option>
                                        <option value="vod" >AVOD</option>
                                        <option value="ott" >OTT</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Campaign Media planing channels -->
                            <div class="row row-sm" id="rotation_is_no"> 
                                <label  class="form-label">Channels</label>
                                {% for channel in data.channels %}
                                <!-- <div class="col-md-12 col-xl-3"> -->
                                <div class="col-md-3 col-xl-3 list-item">
                                    <div class="card card-collapsed">
                                        <div class="card-header">
                                        <h3 class="card-title" for="coding">{{ channel.channel_name }}</h3>
                                        <div class="card-options">
                                            <label class="custom-switch m-0">
                                            <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                                            </label>
                                        </div>
                                        </div>
                                        <div class="card-body">
                                        <div class="row row-sm">
                                            {% for time in data.datetime %}
                                            <div class="col-md-6">
                                                <div>
                                                    <input onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel.id_channel }}" value="{{time.id_time}}">
                                                    <label for="coding">{{ time.name }}</label>
                                                </div>
                                            </div>
                                            {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div> 
                            <div class="row row-sm" id="rotation_is_yes"> 
                                <label  class="form-label">Channels</label>
                                {% for channel in data.channels %}
                                <!-- <div class="col-md-12 col-xl-3"> -->
                                <div class="col-md-3 col-xl-3 list-item ">
                                    <div class="card card-collapsed">
                                        <div class="card-header">
                                        <h3 class="card-title" for="coding">{{ channel.channel_name }}</h3>
                                        <div class="card-options">
                                            <label class="custom-switch m-0">
                                            <input  onchange="velueChannels({{channel.id_channel}})"  type="checkbox" class="custom-switch-input" name="channels_checked" value="{{channel.id_channel}}">
                                            <span class="custom-switch-indicator"></span>
                                            </label>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div> 
                            <!-- Campaign Media planing  -->
                            <div class="row row-sm">
                                <!-- Campaign Media planing program categories -->
                                <div class="col-lg">
                                <label class="form-label">Program Category</label>
                                <select class="form-control select2-show-search form-select mb-4" id="program_categories" name="program_categories" multiple data-placeholder="Choose one"> 
                                    <option value="drama">Drama</option>  
                                    <option value="news">News</option> 
                                    <option value="sports">Sports</option> 
                                    <option value="food">Food</option>
                                    <option value="comedy">Comedy</option>
                                    <option value="youth">Youth</option>
                                </select>
                                </div>
                                <!-- Campaign Media planing Pacing -->
                                <div class="col-lg">
                                <label  class="form-label">Pacing</label>
                                <select class="form-control select2-show-search form-select mb-4" name="pacing" data-placeholder="Choose one" id="pacing">
                                    <option value="1">Yes</option>
                                    <option value="0" >No</option>
                                </select> 
                                </div>
                            </div> 
                        </div>
                    </div> 
                    <!--  -->
                    <div class="card">
                        <div class="card-body d-flex justify-content-center" >
                            <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Agency Modal --> 
<div class="modal fade" id="addAgencyModal" tabindex="-1" aria-labelledby="addAgencyModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-center">
                <h5 class="modal-title" id="addAgencyModalLabel">Add New Agency</h5>
                <button type="button" class="btn-close btn-close-red" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form method="POST" enctype="multipart/form-data" id="AddAgencyForm" send-url="{% url 'agencies:create_agency_api' %}" obj_name="Agency">
                {% csrf_token %}
                <div class="modal-body">  
                    <div class="form-group mb-3"> 
                        <label for="agencyName" class="form-label">Name:</label>
                        <input type="text" class="form-control" id="agencyName" name="agencyName" required />
                    </div>
                    <div class="form-group mb-3">
                        <label for="agencyDescription" class="form-label">Description (Optional):</label>
                        <textarea class="form-control" id="agencyDescription" name="agencyDescription" rows="5" spellcheck="false" data-gramm="false"></textarea>
                    </div> 
                </div>
                <div class="modal-footer d-flex justify-content-center"> 
                    <button type="submit" class="btn btn-primary" style="width:100px; text-align:center;">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Advertiser Modal --> 
<div class="modal fade" id="addAdvertiserModal" tabindex="-1" aria-labelledby="addAdvertiserModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-center">
                <h5 class="modal-title" id="addAdvertiserModalLabel">Add New Advertiser</h5>
                <button type="button" class="btn-close btn-close-red" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form method="POST" enctype="multipart/form-data" id="AddAdvertiserForm" send-url="{% url 'agencies:create_agency_api' %}">
                {% csrf_token %}
                <div class="modal-body">  
                    <div class="form-group mb-3"> 
                        <label for="advertiserName" class="form-label">Name:</label>
                        <input type="text" class="form-control" id="advertiserName" name="advertiserName" required />
                    </div>
                    <div class="form-group mb-3">
                        <label for="advertiserDescription" class="form-label">Description (Optional):</label>
                        <textarea class="form-control" id="advertiserDescription" name="advertiserDescription" rows="5" spellcheck="false" data-gramm="false"></textarea>
                    </div> 
                </div>
                <div class="modal-footer d-flex justify-content-center"> 
                    <button type="submit" class="btn btn-primary" style="width:100px; text-align:center;">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascript %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    class FormSubmitter {
        constructor(formId) {
            // Get the form element by its ID
            this.form = document.getElementById(formId);
            // Check if the form exists
            if (!this.form) {
                // Log an error if the form doesn't exist
                console.error(`Form with ID '${formId}' not found`);
                return;
            }
            // Set up event listener for form submission
            this.setupSubmitListener();
        }

        setupSubmitListener() {
            // Add event listener for form submission
            this.form.addEventListener('submit', event => {
                // Prevent the default form submission
                event.preventDefault();
                // Call the method to submit the form data
                this.submitForm();
            });
        }

        submitForm() {
            // Get the form data
            const formData = new FormData(this.form);
            // Get the URL from the form attribute
            const url = this.form.getAttribute('send-url');
            // Get the object name from the form attribute
            const obj_name = this.form.getAttribute('obj_name');
            // Store reference to 'this' to access it inside nested functions
            const self = this;
            // Send AJAX request 
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                processData: false, 
                contentType: false,
                success: function (data) {
                    // Reset the form using the reference to 'this'
                    self.form.reset();
                    // Close the modal
                    $(`#add${obj_name}Modal`).modal('hide');
                    // Show success message
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: `${obj_name} was submitted successfully!`
                    }); 
                },
                error: function(xhr, status, error) {
                    // Show error message
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: `There was an error while submitting ${obj_name}. Please try again later.`
                    }); 
                }
            }); 
        }
    }

    document.addEventListener('DOMContentLoaded', function() { 
        new FormSubmitter('AddAgencyForm');
    });
</script>


{% endblock javascript %}