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

{% load static %} 

{% block title %} View Campaign {{ data.campaign.name }} {% endblock %}

{% block extra_css %}
<link href="{% static 'css/campaign-design-system.css' %}" rel="stylesheet">
<style>
    /* View-specific styles */
    .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 150px;
    }

    .info-value {
        color: #212529;
        background-color: #f8f9fa;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        flex: 1;
    }

    .campaign-status-badge {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.375rem;
        text-transform: uppercase;
        display: inline-block;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> View Campaign {{ data.campaign.name }} </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">View</li>
        </ol>
    </div>
</div> 
{% endblock breadcrumb %}


{% block content %}   
<div id="indexForm" >
  {% 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">Campaign Name</label>
          <input disabled class="form-control" type="text" value="{{ data.campaign.name }}">
          <div class="help-text">Unique identifier for the campaign</div>
        </div>

        <!-- Agency, Advertiser, Product Row -->
        <div class="col-lg-4 mb-3">
          <label class="form-label">Agency</label>
          <input disabled class="form-control" type="text" value="{{ data.agency_by_brand.name|default:'N/A' }}">
          <div class="help-text">Agency managing this campaign</div>
        </div>

        <div class="col-lg-4 mb-3">
          <label class="form-label">Advertiser</label>
          <input disabled class="form-control" type="text" value="{{ data.campaign.brand.name|default:'N/A' }}">
          <div class="help-text">Brand or advertiser for this campaign</div>
        </div>

        <div class="col-lg-4 mb-3">
          <label class="form-label">Product</label>
          <input disabled class="form-control" type="text" value="{{ data.campaign.product|default:'N/A' }}">
          <div class="help-text">Product or service being advertised</div>
        </div>

        <!-- Category and Country Row -->
        <div class="col-lg-6 mb-3">
          <label class="form-label">Category</label>
          <input disabled class="form-control" type="text" value="{{ data.campaign.category|default:'N/A' }}">
          <div class="help-text">IAB content category</div>
        </div>

        <div class="col-lg-6 mb-3">
          <label class="form-label">Target Country</label>
          <input disabled class="form-control" type="text" value="{{ data.campaign.country|default:'N/A' }}">
          <div class="help-text">Primary target country for this campaign</div>
        </div>

        <!-- Status -->
        <div class="col-lg-6 mb-3">
          <label class="form-label">Status</label>
          <div>
            {% if data.campaign.status == 'Active' %}
              <span class="badge bg-success"><span class="status-indicator status-active"></span>{{ data.campaign.status }}</span>
            {% elif data.campaign.status == 'Paused' %}
              <span class="badge bg-warning"><span class="status-indicator status-paused"></span>{{ data.campaign.status }}</span>
            {% elif data.campaign.status == 'Completed' %}
              <span class="badge bg-secondary"><span class="status-indicator status-completed"></span>{{ data.campaign.status }}</span>
            {% elif data.campaign.status == 'Draft' %}
              <span class="badge bg-info"><span class="status-indicator status-draft"></span>{{ data.campaign.status }}</span>
            {% else %}
              <span class="badge bg-secondary">{{ data.campaign.status }}</span>
            {% endif %}
          </div>
          <div class="help-text">Current campaign status</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">Start Date</label>
          <input disabled type="date" class="form-control" value="{{ data.campaign.start_date|date:'Y-m-d' }}">
          <div class="help-text">Campaign start date</div>
        </div>
        <div class="col-lg-6 mb-3">
          <label class="form-label">End Date</label>
          <input disabled type="date" class="form-control" value="{{ data.campaign.end_date|date:'Y-m-d' }}">
          <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">Budget</label>
          <input disabled type="text" class="form-control" value="{{ data.campaign.budget|default:'0.00' }}">
          <div class="help-text">Total campaign budget</div>
        </div>

        <div class="col-lg-3 mb-3">
          <label class="form-label">CPM</label>
          <input disabled type="text" class="form-control" value="{{ data.campaign.cpm|default:'0.00' }}">
          <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 disabled type="text" class="form-control" value="{{ data.campaign.volume|default:'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 disabled type="text" class="form-control" value="{{ data.campaign.broadcasts_day|default:'0' }}">
          <div class="help-text">Daily broadcast frequency</div>
        </div>

        <div class="col-lg-3 mb-3">
          <label class="form-label">Delivery</label>
          <input disabled type="text" class="form-control" value="{{ data.campaign.delivery|default:'0' }}">
          <div class="help-text">Delivery rate</div>
        </div>
      </div>
    </div>
  </div> 

  <div class="card">
    <div class="card-header">
        <h3 class="card-title"> Media Planning </h3>
    </div>
    <div class="card-body">
        <div class="row row-sm">
            <div class="col-lg">
                <label  class="form-label"> General Rotation </label>
                <select disabled="true" class="form-control select2-show-search form-select mb-4"  name="general_rotation" data-placeholder="Choose one" id="general_rotation">
                  <option value="1" {% if data.campaign.general_rotation == '1' %} Selected {% endif%}>Yes</option>
                  <option value="0" {% if data.campaign.general_rotation == '0' %} Selected {% endif%}>No</option> 
                </select><br><br>
            </div>
        </div> 
        <!-- Media Type -->
        <div class="row row-sm">
          <div class="col-lg">
            <label  class="form-label">Media Type</label>
            <select disabled="true" class="form-control select2-show-search form-select mb-4"  name="media_type" data-placeholder="Choose one" id="media_type">
              <option selected value="tv" {% if data.campaign.media_type == "tv" %} Selected {% endif%}>Tv Linear</option>
              <option value="vod" {% if data.campaign.media_type == "vod" %} Selected {% endif%}>AVOD</option>
              <option value="ott" {% if data.campaign.media_type == "ott" %} Selected {% endif%}>OTT</option>
            </select>
            <br>
            <br>
          </div>
        </div> 
        <div class="{% if data.campaign.general_rotation == '0' %} row row-sm d-md-flex {% else %} row row-sm d-none {% endif %}" id="rotation_is_no">
          {% for channel_placements in data.channels_and_placement %}
          <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_placements.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>
                        {% if channel_placements.channel_id in data.placement_channel %}
                          {% if time.id_time in channel_placements.placement %}
                            <input disabled checked="true" onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel_placements.channel_id }}" value="{{time.id_time}}">
                            <label for="coding">{{ time.name }}</label>

                          {% endif %}
                        {% else %}
                        <input onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel_placements.channel_id }}" value="{{time.id_time}}">
                        <label for="coding">{{ time.name }}</label>
                        {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                  </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>   
        <div class="{% if data.campaign.general_rotation == '0' %} row row-sm d-none {% else %} row row-sm d-md-flex {% endif %}" id="rotation_is_yes">
            {% 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 disabled type="checkbox" class="custom-switch-input" name="channels_checked" value="{{channel.id_channel}}" checked>
                    <span class="custom-switch-indicator"></span> 
                  </label>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div> 
        <div class="row row-sm"> 
          <!-- Campaign Media planing program categories -->
          <div class="col-lg">
            <label class="form-label">Program Category</label>
            <select disabled="true" class="form-control select2-show-search form-select mb-4" id="program_categories" name="program_category[]" multiple data-placeholder="Choose one"> 
                <option value="drama" {% if "drama" in data.campaign.program_category %} Selected {% endif %} >Drama</option>  
                <option value="news" {% if "news" in data.campaign.program_category %} Selected {% endif %}>News</option> 
                <option value="sports" {% if "sports" in data.campaign.program_category %} Selected {% endif %}>Sports</option> 
                <option value="food" {% if "food" in data.campaign.program_category %} Selected {% endif %}>Food</option>
                <option value="comedy" {% if "comedy" in data.campaign.program_category %} Selected {% endif %}>Comedy</option>
                <option value="youth" {% if "youth" in data.campaign.program_category %} Selected {% endif %}>Youth</option>
            </select>
          </div>
          <div class="col-lg">
              <label  class="form-label">Pacing</label>
              <select disabled="true" class="form-control select2-show-search form-select mb-4" id="pacing" onchange="dis()" name="pacing" data-placeholder="Choose one">
                <option value="1" {% if data.campaign.pacing == "1" %} Selected {% endif%}>Yes</option>
                <option value="0" {% if data.campaign.pacing == "0" %} Selected {% endif%}>No</option> 
              </select>
          </div> 
      </div> 
    </div>
  </div> 
</div>  

<div class="ms-auto pageheader-btn">

  <a href="{% url 'campaigns:edit_campaign' id_campaign=data.campaign.id %}" 
    class="btn btn-warning btn-icon text-white me-2" 
    data-bs-toggle="tooltip" 
    data-bs-placement="top" 
    title="Edit campaign settings"
    name="edit_btn">
      <i class="zmdi zmdi-edit"></i>
      <span class="d-none d-sm-inline">Edit</span>
  </a>  
</div>  
{% endblock content %}