{% extends 'master.html' %}
{% load static %}
{% block content %}
  <div class="container mt-5" style="margin-top: 100px !important; margin-bottom: 100px !important;">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card shadow-sm border rounded-4 p-5 bg-white">
          <h2 class="text-center fw-bold text-primary mb-4">Order Summary</h2>

          

          <div class="row">
            <!-- Left Column: Ad Details & Customization -->
            <div class="col-md-6">
              <div class="d-flex align-items-center">
                <img src="{{ template.image.url }}" class="img-thumbnail shadow-sm rounded border" width="120" />
                <div class="ms-3">
                  <h5 class="fw-bold">{{ template.name }}</h5>
                  <p class="small text-muted">
                    <strong>Ad Type:</strong> {{ template.ad_type }}
                  </p>
                  <p class="text-muted">{{ template.description }}</p>
                  <h5 class="text-success fw-bold">Rs. {{ template.price|floatformat:2 }}</h5>
                </div>
              </div>

              <div class="mt-3">
                <h5 class="fw-bold">Customization Details:</h5>
                <ul class="list-group shadow-sm rounded">
                  <li class="list-group-item">
                    <strong>Ad Title:</strong> {{ customize.title }}
                  </li>
                  <li class="list-group-item">
                    <strong>Description:</strong> {{ customize.description }}
                  </li>
                  <li class="list-group-item">
                    <strong>Selected Color:</strong>
                    <span class="color-box" style="background-color: {{ customize.color }};"></span> {{ customize.color }}
                  </li>
                  <li class="list-group-item">
                    <strong>Font Style:</strong> {{ customize.style }}
                  </li>
                  {% if customize.image %}
                    <li class="list-group-item">
                      <strong>Uploaded Image:</strong><br />
                      <img src="{{ customize.image.url }}" class="img-thumbnail shadow-sm mt-2 rounded" width="100" />
                    </li>
                  {% else %}
                    <li class="list-group-item text-muted">No image uploaded</li>
                  {% endif %}
                </ul>
              </div>
            </div>

            <!-- Right Column: Billing & Price Details -->
            <div class="col-md-6">
              <form method="post">
                {% csrf_token %}

                <h4 class="fw-bold">Billing Details:</h4>

                <div class="mb-3">
                  <label class="form-label fw-semibold">Full Name:</label>
                  <input type="text" name="full_name" class="form-control rounded-3 shadow-sm" placeholder="Enter your full name" value="{{ request.POST.full_name }}" required />
                </div>

                <div class="mb-3">
                  <label class="form-label fw-semibold">Email Address:</label>
                  <input type="email" name="email" class="form-control rounded-3 shadow-sm" placeholder="Enter your email" value="{{ request.POST.email }}" required />
                </div>

                <div class="mb-3">
                  <label class="form-label fw-semibold">Phone Number:</label>
                  <input type="tel" name="phone" class="form-control rounded-3 shadow-sm" placeholder="Enter your phone number" value="{{ request.POST.phone }}" required />
                </div>

                {% if template.ad_type|lower == 'banner' %}
                  <div class="mb-3">
                    <label class="form-label fw-semibold">Location Link:</label>
                    <input type="url" id="location_link" name="location_link" class="form-control rounded-3 shadow-sm" placeholder="Enter location link" value="{{ request.POST.location_link }}" />
                    <small class="text-danger" id="location_error"></small>
                  </div>
                {% endif %}

                {% if template.ad_type|lower == 'social media' %}
                  <div class="mb-3">
                    <label class="form-label fw-semibold">Social Media Platform:</label>
                    <select id="social_media_link" name="social_media_link" class="form-control rounded-3 shadow-sm">
                      <option value="">-- Select Platform --</option>
                      <option value="facebook">Facebook</option>
                      <option value="instagram">Instagram</option>
                      <option value="twitter">Twitter</option>
                      <option value="linkedin">LinkedIn</option>
                    </select>
                    <small class="text-danger" id="social_media_error"></small>
                  </div>
                {% endif %}

                <div class="mb-3">
                  <label class="form-label fw-semibold">Ad Completion Date:</label>
                  <input type="date" name="ad_completion_date" class="form-control rounded-3 shadow-sm" min="{{ min_date }}" value="{{ request.POST.ad_completion_date }}" required />
                </div>

                <h5 class="fw-bold">Price Details:</h5>
                <ul class="list-group rounded shadow-sm">
                  <li class="list-group-item">
                    <strong>Base Price:</strong> Rs. {{ template.price|floatformat:2 }}
                  </li>
                  <li class="list-group-item">
                    <strong>Additional Charge:</strong> Rs. {{ additional_charge|floatformat:2 }}
                  </li>
                  <li class="list-group-item">
                    <strong>Making Charges:</strong> Rs. {{ making_charges|floatformat:2 }}
                  </li>
                  <li class="list-group-item">
                    <strong>GST (18%):</strong> Rs. {{ gst|floatformat:2 }}
                  </li>
                  <li class="list-group-item fw-bold text-success">
                    <strong>Total Price:</strong> Rs. {{ total_price|floatformat:2 }}
                  </li>
                </ul>

                <!-- Checkout Buttons -->
                <div class="d-flex justify-content-center gap-3 mt-4">
                  <button type="submit" name="pay" class="btn btn-success shadow-sm rounded-3 px-4 py-2 btn-animate">Proceed To Pay</button>
                  <a href="{% url 'indexview' %}" class="btn btn-danger shadow-sm rounded-3 px-4 py-2 btn-animate">Cancel</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .btn-animate {
      transition: transform 0.2s ease-in-out;
    }
    .btn-animate:hover {
      transform: scale(1.05);
    }
    
    .list-group-item {
      background: #f8f9fa;
      font-size: 1rem;
    }
    
    .color-box {
      display: inline-block;
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      margin-right: 5px;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('form').addEventListener('submit', function (event) {
        let valid = true
    
        // Validate Location Link
        let locationLink = document.getElementById('location_link')
        if (locationLink && !locationLink.value.trim()) {
          document.getElementById('location_error').innerText = 'Location link is required.'
          valid = false
        } else {
          document.getElementById('location_error').innerText = ''
        }
    
        // Validate Social Media Selection
        let socialMedia = document.getElementById('social_media_link')
        if (socialMedia && socialMedia.value === '') {
          document.getElementById('social_media_error').innerText = 'Please select a social media platform.'
          valid = false
        } else {
          document.getElementById('social_media_error').innerText = ''
        }
    
        if (!valid) {
          event.preventDefault() // Prevent form submission if invalid
        }
      })
    })
  </script>
{% endblock %}