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

{% load static %}

{% block title %}Add Campaign{% endblock %}

{% block extra_css %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
       display: none;
   }

   /* Modern loading spinner */
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #3498db;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }

   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }

   .btn-loading {
       position: relative;
       pointer-events: none;
   }

   .btn-loading::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       margin: auto;
       border: 2px solid transparent;
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

   /* Disabled button styles */
   .btn.disabled, .btn:disabled {
       opacity: 0.5 !important;
       cursor: not-allowed !important;
       pointer-events: none !important;
   }

   /* Form validation styles */
   .form-control.is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .form-control.is-valid {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .validation-error {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .validation-success {
      color: #155724;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .shake-animation {
      animation: shake 0.5s ease-in-out;
   }

   @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
   }

   /* Card styles to match agency form */
   .card {
       margin-bottom: 1.5rem;
       border: 1px solid #dee2e6;
       border-radius: 0.375rem;
   }

   .card-header {
       background-color: #f8f9fa;
       border-bottom: 1px solid #dee2e6;
       padding: 1rem 1.25rem;
   }

   .card-title {
       margin-bottom: 0;
       font-size: 1.125rem;
       font-weight: 600;
   }

   .required-field::after {
       content: " *";
       color: #dc3545;
   }

   .help-text {
       font-size: 0.75rem;
       color: #6c757d;
       margin-top: 2px;
   }

   /* Multi-select styles */
   .select2-container--default .select2-selection--multiple {
       border: 1px solid #ced4da;
       border-radius: 0.375rem;
       min-height: 38px;
   }

   .select2-container--default .select2-selection--multiple .select2-selection__choice {
       background-color: #007bff;
       border: 1px solid #007bff;
       color: #fff;
       border-radius: 0.25rem;
       padding: 2px 8px;
       margin: 2px;
   }

   .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
       color: #fff;
       margin-right: 5px;
   }

   /* Channel card styles */
   .channel-card {
       transition: all 0.3s ease;
   }

   .channel-card:hover {
       box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   }

   .card-collapsed .card-body {
       padding: 1rem;
   }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Add Campaign</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Campaigns</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}


{% block content %}
<form method='POST' action="{% url 'campaigns:add_campaign' %}" id="campaign-form" data-creatives-url="{% url 'campaigns:ajax_load_creatives' %}" data-advertisers-url="{% url 'agencies:ajax_load_advertisers' %}" novalidate>
  {% 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">
        <!-- Campaign Name -->
        <div class="col-12 mb-3">
          <label class="form-label required-field">Campaign Name</label>
          <input class="form-control" placeholder="Enter campaign name" name="campaign_name" type="text" required>
          <div class="help-text">Unique identifier for the campaign</div>
        </div>

        <!-- Agency, Advertiser, Product -->
        <div class="col-lg-4 mb-3">
          <label class="form-label required-field">Agency</label>
          <select class="form-control select2-show-search form-select" id="agency" name="id_agency" data-placeholder="Choose agency" required>
            <option value="">Select agency...</option>
            {% for agency in data.agency %}
              <option value="{{ agency.pk }}" {% if agency.name == "None" %}selected{% endif %}>
                {{ agency.name }}
              </option>
            {% endfor %}
          </select>
          <div class="help-text">Agency managing this campaign</div>
          <button type="button" class="btn btn-info-light btn-sm mt-2" id="button_agency">
            <i class="fe fe-plus"></i> Add New Agency
          </button>
        </div>

        <!-- Campaign Advertiser -->
        <div class="col-lg-4 mb-3">
          <label class="form-label required-field">Advertiser</label>
          <select class="form-control select2-show-search form-select" id="advertisers" name="id_brand" data-placeholder="Choose advertiser" required>
            <option value="">Select advertiser...</option>
            {% for brand in data.brands %}
            <option value="{{ brand.pk }}">{{brand.name}}</option>
            {% endfor %}
          </select>
          <div class="help-text">Brand or advertiser for this campaign</div>
          <button type="button" class="btn btn-info-light btn-sm mt-2" id="button_brand">
            <i class="fe fe-plus"></i> Add New Advertiser
          </button>
        </div>

        <!-- Campaign Product -->
        <div class="col-lg-4 mb-3">
          <label class="form-label">Product</label>
          <input class="form-control" placeholder="Product name" name="product_name" type="text">
          <div class="help-text">Product or service being advertised</div>
        </div>

        <!-- Campaign Category -->
        <div class="col-lg-6 mb-3">
          <label for="categories" class="form-label">Category</label>
          <select class="form-control select2-show-search form-select" id="categories" name="id_category" data-placeholder="Choose category">
            <option value="">Select category...</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 class="help-text">IAB content category</div>
        </div>

        <!-- Campaign Country -->
        <div class="col-lg-6 mb-3">
          <label class="form-label">Target Country</label>
          <select class="form-control select2-show-search form-select" id="Countries" name="id_country" data-placeholder="Choose country">
            <option value="">Select country...</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 class="help-text">Primary target country for this campaign</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Campaign Period -->
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Campaign Period</h3>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6 mb-3">
          <label class="form-label required-field">Start Date</label>
          <input type="date" id="start_day" name="start_day" class="form-control" autocomplete="off" required>
          <div class="help-text">Campaign start date</div>
        </div>
        <div class="col-lg-6 mb-3">
          <label class="form-label required-field">End Date</label>
          <input type="date" id="end_day" name="end_day" class="form-control" autocomplete="off" required>
          <div class="help-text">Campaign end date</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Campaign Budget & Metrics -->
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Budget & Metrics</h3>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-3 mb-3">
          <label class="form-label required-field">Budget</label>
          <input type="number" id="budget" name="budget" class="form-control" placeholder="0.00" step="0.01" required>
          <div class="help-text">Total campaign budget</div>
        </div>
        <div class="col-lg-3 mb-3">
          <label class="form-label">CPM</label>
          <input type="number" id="cpm" name="cpm" class="form-control" placeholder="0.00" step="0.01">
          <div class="help-text">Cost per thousand impressions</div>
        </div>
        <div class="col-lg-3 mb-3">
          <label class="form-label">Total Volume</label>
          <input type="number" id="volume" name="volume" class="form-control" placeholder="0">
          <div class="help-text">Total impression target</div>
        </div>
        <div class="col-lg-3 mb-3">
          <label class="form-label">Broadcasts/Day</label>
          <input type="number" id="broadcasts_day" name="broadcasts_day" class="form-control" placeholder="0">
          <div class="help-text">Daily broadcast frequency</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Media Planning -->
  <div class="card">
    <div class="card-header">
        <h3 class="card-title">Media Planning</h3>
    </div>
    <div class="card-body">
      <!-- Media Type -->
      <div class="row mb-4">
        <div class="col-lg-6 mb-3">
          <label class="form-label">Media Type</label>
          <select class="form-control select2-show-search form-select" name="media_type" data-placeholder="Choose media type" id="media_type">
            <option selected value="tv">TV Linear</option>
            <option value="vod">AVOD</option>
            <option value="ott">OTT</option>
          </select>
          <div class="help-text">Type of media for ad delivery</div>
        </div>

        <div class="col-lg-6 mb-3">
          <label class="form-label">General Rotation</label>
          <select class="form-control select2-show-search form-select" name="general_rotation" data-placeholder="Choose rotation" id="general_rotation">
            <option value="1">Yes - Rotate across all channels</option>
            <option selected value="0">No - Specific time slots</option>
          </select>
          <div class="help-text">Enable rotation across all selected channels</div>
        </div>
      </div>

      <!-- Channel Selection - Rotation Disabled -->
      <div class="row d-none" id="rotation_is_no">
        <div class="col-12 mb-3">
          <label class="form-label">Channels & Time Slots</label>
          <div class="help-text mb-3">Select channels and specific time slots for ad placement</div>
        </div>
        {% for channel in data.channels %}
        <div class="col-md-6 col-xl-4 mb-3">
          <div class="card card-collapsed channel-card">
            <div class="card-header">
              <h3 class="card-title">{{ channel.channel_name }}</h3>
              <div class="card-options">
                <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse">
                  <i class="fe fe-chevron-up"></i>
                </a>
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                {% for time in data.datetime %}
                  <div class="col-md-12 mb-2">
                    <div class="form-check">
                      <input onchange="veluePlacement({{ time.id_time|safe }})" class="form-check-input playlist_checkbox" type="checkbox" id="time_{{ channel.id_channel }}_{{ time.id_time }}" name="check_placement_{{ channel.id_channel }}" value="{{time.id_time}}">
                      <label class="form-check-label" for="time_{{ channel.id_channel }}_{{ time.id_time }}">
                        {{ time.name }}
                      </label>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>

      <!-- Channel Selection - Rotation Enabled -->
      <div class="row d-md-flex" id="rotation_is_yes">
        <div class="col-12 mb-3">
          <label class="form-label">Channels</label>
          <div class="help-text mb-3">Select channels for rotation</div>
        </div>
        {% for channel in data.channels %}
        <div class="col-md-4 col-xl-3 mb-3">
          <div class="card channel-card">
            <div class="card-header">
              <h3 class="card-title">{{ channel.channel_name }}</h3>
              <div class="card-options">
                <label class="custom-switch m-0">
                  <input onchange="velueChannels({{ channel.id_channel|safe }})" 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>

      <!-- Additional Media Planning Options -->
      <div class="row mt-4">
        <div class="col-lg-6 mb-3">
          <label class="form-label">Program Category</label>
          <select class="form-control select2-multiple form-select" id="program_categories" name="program_categories" multiple data-placeholder="Select program categories">
            <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 class="help-text">Target program categories for ad placement</div>
        </div>

        <div class="col-lg-6 mb-3">
          <label class="form-label">Pacing</label>
          <select class="form-control select2-show-search form-select" name="pacing" data-placeholder="Choose pacing" id="pacing">
            <option value="1">Yes - Evenly distribute</option>
            <option value="0">No - As soon as possible</option>
          </select>
          <div class="help-text">Control ad delivery pacing</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Submit Button -->
  <button type="submit" style="width:200px; text-align:center;" class="btn btn-primary" id="submit-btn">
    <i class="fe fe-check-circle me-2"></i>Create Campaign
  </button>
</form>
{% endblock content %}


{% block modals %}
<!-- Advertiser Modal -->
<div class="modal fade" id="Brand_form" tabindex="-1" role="dialog" aria-labelledby="advertiserModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="advertiserModalLabel">Add New Advertiser</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" id="indexForm2" send-advertiser-url="{% url 'agencies:ajax_send_advertiser' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label required-field">Advertiser Name</label>
            <input id="name_adv" class="form-control" placeholder="Brand or Advertiser's Name" name="advertiser_name" type="text" required>
          </div>

          <div class="mb-3">
            <label class="form-label required-field">Agency</label>
            <select class="form-control select2-show-search form-select" id="agency_adv" name="id_agency" data-placeholder="Choose agency" required>
              {% for agency in data.agency %}
              <option value="{{ agency.pk }}">{{agency.name}}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Category</label>
            <input id="category_adv" class="form-control" placeholder="e.g., Automotive, Food & Beverage" name="category" type="text">
          </div>

          <div class="mb-3">
            <label class="form-label">Status</label>
            <select id="status_adv" class="form-control select2-show-search form-select" name="active_0_1" data-placeholder="Choose status">
              <option value="1" selected="selected">Active</option>
              <option value="0">Inactive</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Description (Optional)</label>
            <textarea id="description_adv" name="advertiser_desc" class="form-control" rows="3" placeholder="Brief description of the advertiser"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="btn_adv" type="button" style="width:120px;" class="btn btn-primary">
            <i class="fe fe-check me-2"></i>Add Advertiser
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Agency Modal -->
<div class="modal fade" id="agency_form" tabindex="-1" role="dialog" aria-labelledby="agencyModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="agencyModalLabel">Add New Agency</h5>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" id="indexForm3" send-agency-url="{% url 'agencies:ajax_send_agency' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label required-field">Agency Name</label>
            <input id="name_agency" class="form-control" placeholder="Agency Name" name="name_agency" type="text" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea id="description_agency" name="description_agency" class="form-control" rows="3" placeholder="Brief description of the agency"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="btn_agency" type="button" style="width:120px;" class="btn btn-primary">
            <i class="fe fe-check me-2"></i>Add Agency
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock modals %}


{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/sweetalert2/sweetalert2.min.js' %}"></script>

<script>
$(document).ready(function() {
    'use strict';

    // Initialize Select2 dropdowns
    $('.select2-show-search').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true
    });

    // Initialize multi-select dropdowns
    $('.select2-multiple').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true,
        multiple: true
    });

    // General rotation toggle
    $('#general_rotation').change(function(){
      const general_rotation = $(this).val();
      if(general_rotation == '0'){
        $('#rotation_is_yes').addClass('d-none');
        $('#rotation_is_no').removeClass('d-none');
      } else {
        $('#rotation_is_no').addClass('d-none');
        $('#rotation_is_yes').removeClass('d-none');
      }
    });

    // Load advertisers when agency changes
    $('#agency').change(function(){
        const url = $("#campaign-form").attr("data-advertisers-url");
        const agencyId = $(this).val();

        if (!agencyId) return;

        $.ajax({
            url: url,
            data: { 'agency': agencyId },
            beforeSend: function() {
                $('#advertisers').prop('disabled', true);
            },
            success: function (data) {
                $("#advertisers").html(data).prop('disabled', false);
            },
            error: function() {
                $('#advertisers').prop('disabled', false);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to load advertisers',
                    timer: 2000
                });
            }
        });
    });

    // Load creatives when advertiser changes
    $('#advertisers').change(function(){
        const url = $("#campaign-form").attr("data-creatives-url");
        const advertiserId = $(this).val();

        if (!advertiserId) return;

        $.ajax({
            url: url,
            data: { 'advertiser': advertiserId },
            success: function (data) {
                $("#creatives").html(data);
            }
        });
    });

    // Add Advertiser
    $('#btn_adv').click(function(){
        const url = $("#indexForm2").attr("send-advertiser-url");
        const name = $('#name_adv').val();
        const category = $('#category_adv').val();
        const status = $('#status_adv').val();
        const description = $('#description_adv').val();
        const agency = $('#agency_adv').val();

        if (!name || !agency) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Fields',
                text: 'Please fill in all required fields',
                timer: 2000
            });
            return;
        }

        const formData = new FormData();
        formData.append('name', name);
        formData.append('category', category);
        formData.append('status', status);
        formData.append('description', description);
        formData.append('agency', agency);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        $.ajax({
            url: url,
            type: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            beforeSend: function() {
                $('#btn_adv').prop('disabled', true).addClass('btn-loading');
            },
            success: function (data) {
                // Reload advertisers list
                const agencyId = $('#agency').val();
                if (agencyId) {
                    const loadUrl = $("#campaign-form").attr("data-advertisers-url");
                    $.ajax({
                        url: loadUrl,
                        data: { 'agency': agencyId },
                        success: function (data) {
                            $("#advertisers").html(data);
                        }
                    });
                }

                $('#Brand_form').modal('hide');
                $('#btn_adv').prop('disabled', false).removeClass('btn-loading');

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Advertiser has been successfully added.',
                    timer: 2000,
                    showConfirmButton: false
                });

                // Reset form
                $('#indexForm2')[0].reset();
            },
            error: function() {
                $('#btn_adv').prop('disabled', false).removeClass('btn-loading');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to add advertiser',
                    timer: 2000
                });
            }
        });
    });

    // Add Agency
    $('#btn_agency').click(function(){
        const url = $("#indexForm3").attr("send-agency-url");
        const name_agency = $('#name_agency').val();
        const description_agency = $('#description_agency').val();

        if (!name_agency) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing Fields',
                text: 'Please enter agency name',
                timer: 2000
            });
            return;
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                'name_agency': name_agency,
                'description_agency': description_agency,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            beforeSend: function() {
                $('#btn_agency').prop('disabled', true).addClass('btn-loading');
            },
            success: function (data) {
                // Reload agency list
                const loadUrl = "{% url 'agencies:ajax_load_agency' %}";
                $.ajax({
                    url: loadUrl,
                    success: function (data) {
                        $("#agency").html(data);
                        $("#agency_adv").html(data);
                    }
                });

                $('#agency_form').modal('hide');
                $('#btn_agency').prop('disabled', false).removeClass('btn-loading');

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Agency has been successfully added.',
                    timer: 2000,
                    showConfirmButton: false
                });

                // Reset form
                $('#indexForm3')[0].reset();
            },
            error: function() {
                $('#btn_agency').prop('disabled', false).removeClass('btn-loading');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Failed to add agency',
                    timer: 2000
                });
            }
        });
    });

    // Form validation
    $('#campaign-form').on('submit', function(e) {
        let isValid = true;

        // Clear previous errors
        $('.validation-error').remove();
        $('.form-control, .form-select').removeClass('is-invalid');

        // Validate required fields
        const requiredFields = [
            'input[name="campaign_name"]',
            'select[name="id_agency"]',
            'select[name="id_brand"]',
            'input[name="start_day"]',
            'input[name="end_day"]',
            'input[name="budget"]'
        ];

        requiredFields.forEach(function(field) {
            if (!$(field).val()) {
                $(field).addClass('is-invalid');
                $(field).after('<div class="validation-error">This field is required.</div>');
                isValid = false;
            }
        });

        // Validate date range
        const startDate = new Date($('input[name="start_day"]').val());
        const endDate = new Date($('input[name="end_day"]').val());

        if (startDate && endDate && startDate > endDate) {
            $('input[name="end_day"]').addClass('is-invalid');
            $('input[name="end_day"]').after('<div class="validation-error">End date must be after start date.</div>');
            isValid = false;
        }

        if (!isValid) {
            e.preventDefault();
            // Scroll to first error
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
            return false;
        }

        // Show loading state
        const submitBtn = $('#submit-btn');
        const originalText = submitBtn.html();
        submitBtn.prop('disabled', true).addClass('btn-loading').html('<span>Creating...</span>');

        // Re-enable after 5 seconds (in case of issues)
        setTimeout(function() {
            submitBtn.prop('disabled', false).removeClass('btn-loading').html(originalText);
        }, 5000);
    });
});

// Modal triggers
$("#button_brand").on('click', function(e){
    e.preventDefault();
    $('#Brand_form').modal('show');
});

$("#button_agency").on('click', function(e){
    e.preventDefault();
    $('#agency_form').modal('show');
});

// Placeholder functions for channel/placement selection
function velueChannels(channelId) {
    console.log('Channel selected:', channelId);
}

function veluePlacement(timeId) {
    console.log('Time slot selected:', timeId);
}
</script>
{% endblock extra_js %}