@extends('admin.layouts.app')

@section('title', 'Create New Certificate Template')

@section('content')

    <link rel="stylesheet" href="{{ asset('assets/style.css') }}" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <script src="{{ asset('vendor/joystick.js') }}"></script>

    <!-- Template Information Panel -->
    <div class="template-info-panel">
        <h3>Template Information</h3>
        <div class="form-group">
            <label for="template_name">Template Name: <span class="required">*</span></label>
            <input type="text" id="template_name" name="name" required placeholder="Enter template name">
            <div class="error-message" id="template_name_error"></div>
        </div>
        <div class="form-group">
            <label for="template_description">Description:</label>
            <textarea id="template_description" name="description" placeholder="Enter template description"></textarea>
        </div>
        <div class="form-group">
            <label for="background_image">Background Image: <span class="required">*</span></label>
            <input type="file" id="background_image" name="image" accept="image/*" required
                   style="display: block; width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            <small class="form-text text-muted">Upload the background image for this template</small>
            <div class="error-message" id="background_image_error"></div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="canvas_width">Canvas Width:</label>
                <input type="number" id="canvas_width" name="canvas_width" value="800" min="100" max="2000" required>
            </div>
            <div class="form-group">
                <label for="canvas_height">Canvas Height:</label>
                <input type="number" id="canvas_height" name="canvas_height" value="600" min="100" max="2000" required>
            </div>
        </div>
    </div>

    <header>
      <h1>Certificate Generator</h1>
    </header>
    <main id="main">
      <div class="toolscontainer">
        <div class="textforamtting">
          <select id="fontfamily" class="font-family">
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Helvetica">Helvetica</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Verdana">Verdana</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Impact">Impact</option>
            <option value="Lucida Console">Lucida Console</option>
            <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
          </select>
          <select id="fontsize">
            <option value="1">1x</option>
            <option value="2">2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
            <option value="5">5x</option>
            <option value="6">6x</option>
            <option value="7">7x</option>
            <option value="8">8x</option>
            <option value="9">9x</option>
            <option value="10">10x</option>
          </select>
          <select id="textalign">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
          </select>
        </div>
        <div class="textforamtting">
          <button id="textbold" class="formattool" data-active="0">B</button>
          <button id="textitalic" class="formattool" data-active="0">I</button>
          <input type="color" id="textcolor" />
          <div class="slidecontainer">
            <input
              type="range"
              min="0"
              max="100"
              value="80"
              class="slider"
              id="textopacity"
            />
          </div>
        </div>
      </div>

      <div>
        <div id="containerdiv">
          <div id="certificatediv">
            <canvas id="certificatecanvas"></canvas>
          </div>
          <div class="downloadcontainer downloadfile">
            <div>
              Download as:
              <select id="downloadtype">
                <option value="png">PNG</option>
                <option value="jpg">JPG</option>
                <option value="pdf">PDF</option>
              </select>
            </div>
            <div>
              <button id="downloadbutton" class="button">Download</button>
            </div>
          </div>
          <div class="downloadcontainer downloadzip">
            <button id="downloadzipbutton" class="button">Download Zip</button>
          </div>
        </div>
        <div id="asidebar">
          <div id="editor"></div>
          <div class="uploadcontainer">
            <!-- Background Image Preview -->
            <div class="image-preview">
              <div id="currentImageInfo" class="current-image-info">
                <span>No image selected</span>
              </div>
              <small class="form-text text-muted">Use the Background Image field above to upload your image</small>
            </div>
          </div>
          <!-- Field Configuration Panel -->
          <div class="field-config-panel">
            <h4>Field Configuration</h4>
            <div class="field-creation">
              <input type="text" id="fieldNameInput" placeholder="Field Display Name" />
              <select id="fieldTypeSelect">
                <option value="text">Text</option>
                <option value="date">Date</option>
                <option value="number">Number</option>
                <option value="custom">Custom Text</option>
              </select>
              <button id="addCustomField" class="button">Add Field</button>
            </div>

            <div class="field-templates">
              <h5>Quick Add Common Fields:</h5>
              <button class="template-btn" data-field="student_name" data-type="text">Student Name</button>
              <button class="template-btn" data-field="serial_number" data-type="text">Serial Number</button>
              <button class="template-btn" data-field="organization" data-type="text">Organization</button>
              <button class="template-btn" data-field="graduation_date" data-type="date">Graduation Date</button>
              <button class="template-btn" data-field="course_name" data-type="text">Course Name</button>
              <button class="template-btn" data-field="instructor_name" data-type="text">Instructor Name</button>
              <button class="template-btn" data-field="completion_date" data-type="date">Completion Date</button>
              <button class="template-btn" data-field="grade" data-type="text">Grade</button>
            </div>

            <div class="config-actions">
              <button id="saveConfig" class="config-btn save-btn">💾 Save Configuration</button>
              <button id="loadConfig" class="config-btn load-btn">📁 Load Configuration</button>
            </div>
          </div>

          <div id="inputs">
            <!-- Dynamic fields will be added here -->
            <div class="no-fields-message">
              <p>📝 <strong>No fields added yet!</strong></p>
              <p>Use the "Quick Add Common Fields" buttons above or create custom fields to get started.</p>
            </div>
          </div>
          <div class="optionscontainer">
            <button id="addinput"><i class="fa fa-plus"></i> Add</button>
          </div>
          <div style="display: flex; justify-content: center">
            <div style="width: 128px; position: relative">
              <img
                src="https://www.cssscript.com/demo/touch-joystick-controller/images/joystick-base.png"
              />
              <div id="stick" style="position: absolute; left: 32px; top: 32px">
                <img
                  src="https://www.cssscript.com/demo/touch-joystick-controller/images/joystick-red.png"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <div class="loaderbody">
      <div>
       <span id="progress">-/-</span>

      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.1.0/jszip-utils.min.js"></script>
    <script src="{{ asset('assets/script.js') }}"></script>

    <!-- Save Template Button -->
    <div class="save-template-section">
        <form id="templateForm" action="/admin/certificates/imt_templates/store" method="POST" enctype="multipart/form-data" novalidate>
            @csrf

            <!-- Hidden fields for template data -->
            <input type="hidden" id="template_name" name="name" value="">
            <input type="hidden" id="canvas_width" name="canvas_width" value="800">
            <input type="hidden" id="canvas_height" name="canvas_height" value="600">
            <input type="hidden" id="description" name="description" value="">

            <!-- File input for background image (will be populated by JavaScript) -->
            <input type="file" id="image_form" name="image" accept="image/*" style="display: none;">

            <button type="submit" id="saveTemplate" class="save-template-btn">
                💾 Save Template
            </button>
        </form>
        <button type="button" id="previewTemplate" class="preview-template-btn">
            👁️ Preview Template
        </button>
    </div>

@endsection