<h2>{{ title }}</h2>

<style>
   .main{
      max-width: 800px;
   }
</style>

<h3>Designs</h3>

<div class="add-design-button">
   <button onclick="newDesign()" class="btn btn-primary">Add New Design</button>
</div>


<div class="tile-list-view">



   {{# each graphic_designs as |val key|}}

   <div class="product-tile" onclick="window.location.href='/clients/design/{{val.product_id}}/{{val.id}}'">
      <div class="product-tile-img"><img class="list-preview"
            src="/thumbs/graphic_designs/{{val.id}}.png" /></div>
      <div class="product-tile-title">
         <h4>{{ val.title }}</h4>
      </div>
      <div style="display:none" id="id_holder">{{val.id}}</div>
   </div>

   {{/each}}

</div>

<h3>Rosters</h3>

<div class="add-roster-button">
      <button onclick="newRoster()" class="btn btn-primary">Create Roster</button>
   <button onclick="uploadCSVRoster()" class="btn btn-primary">Upload Roster CSV</button>
   <span>The CSV file should have format: "number", "name", "size".</span>
   <a href="/csv/roster_example.csv" download>Example CSV</a>
</div>
<br>


{{# each rosters as |val key|}}
<div class="item-row">
   <div class="column-2">{{val.title}}</div>
   <div class="column-2"><button onclick="window.location.href='/projects/editroster/{{val.id}}'">View/Edit</button>
   </div>
</div>
{{/each}}

<h3>Print Files</h3>

<div>
<div class="print-selectors">
    <select id="design-select" class="form-control">
        <option value="">Select Design</option>
        {{#each graphic_designs}}
            <option value="{{this.id}}">{{this.title}}</option>
        {{/each}}
    </select>

    <select id="roster-select" class="form-control">
        <option value="">Select Roster</option>
        {{#each rosters}}
            <option value="{{this.id}}">{{this.title}}</option>
        {{/each}}
    </select>

    <button onclick="previewPrint()" class="btn btn-primary">Preview Print</button>
    <button onclick="clientShare()" class="btn btn-primary">Client Share</button>
    
</div>

{{# each print_jobs as |val key|}}
<div class="item-row">
   <div class="column-4"><img src="/thumbs/graphic_designs/{{val.design_id}}.png" /></div>
   <div class="column-4">{{getValueByID val.design_id ../graphic_designs 'title'}} / {{getValueByID val.roster_id ../rosters 'title'}}</div>
   <div class="column-4"><button onclick="window.location.href='/projects/editroster/{{val.roster_id}}'">View Roster</button></div>
   <div class="column-4"><button onclick="window.location.href='/print/{{val.id}}'">Print Files</button></div>
</div>
{{/each}}



<style>
.print-selectors {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
}

.print-selectors select {
    min-width: 200px;
}
</style>

<script>
function previewPrint() {
    const designId = document.getElementById('design-select').value;
    const rosterId = document.getElementById('roster-select').value;
    
    if (!designId || !rosterId) {
        alert('Please select both a design and a roster');
        return;
    }
    
    printPreview(designId, rosterId);
}

function clientShare() {
    const designId = document.getElementById('design-select').value;
    const rosterId = document.getElementById('roster-select').value;
    
    if (!designId || !rosterId) {
        alert('Please select both a design and a roster');
        return;
    }
    
    shareDesign(designId, rosterId);
}



function printPreview(designId, rosterId) {
    window.location.href = `/print/preview/${designId}/${rosterId}/${project_id}`;
}

function shareDesign(designId, rosterId) {
    window.location.href = `/print/share/${designId}/${rosterId}/${project_id}`;
}
function uploadCSVRoster() {
    // Remove any existing modal
    let oldModal = document.getElementById('csv-upload-modal');
    if (oldModal) oldModal.remove();

    // Modal overlay
    let modal = document.createElement('div');
    modal.id = 'csv-upload-modal';
    modal.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000;
    `;

    // Modal content
    let content = document.createElement('div');
    content.style.cssText = `
        background: #fff; padding: 2rem; border-radius: 8px; min-width: 320px; position: relative;
    `;

    // Close/cancel button
    let cancelBtn = document.createElement('button');
    cancelBtn.textContent = 'Cancel';
    cancelBtn.type = 'button';
    cancelBtn.style.cssText = 'position: absolute; top: 10px; right: 10px;';
    cancelBtn.onclick = () => modal.remove();

    // Form
    let form = document.createElement('form');
    form.enctype = 'multipart/form-data';

    // Title field
    let titleLabel = document.createElement('label');
    titleLabel.textContent = 'Roster Title: ';
    let titleInput = document.createElement('input');
    titleInput.type = 'text';
    titleInput.name = 'title';
    titleInput.required = true;
    titleInput.style.marginBottom = '1rem';

    // CSV file field
    let fileLabel = document.createElement('label');
    fileLabel.textContent = 'CSV File: ';
    let fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.name = 'csv';
    fileInput.accept = '.csv';
    fileInput.required = true;

    // Add button
    let addBtn = document.createElement('button');
    addBtn.type = 'submit';
    addBtn.textContent = 'Add';

    // Hidden project_id
    let projectIdInput = document.createElement('input');
    projectIdInput.type = 'hidden';
    projectIdInput.name = 'project_id';
    projectIdInput.value = project_id;

    // Message area
    let msg = document.createElement('div');
    msg.style = 'color: red; margin-top: 1rem;';

    // Form submit handler
    form.onsubmit = function(e) {
        e.preventDefault();
        let formData = new FormData(form);
        fetch('/projects/uploadRosterCSV', {
            method: 'POST',
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.status === 'success') {
                msg.style.color = 'green';
                msg.textContent = 'Roster uploaded!';
                setTimeout(() => location.reload(), 1000);
            } else {
                msg.style.color = 'red';
                msg.textContent = data.message || 'Upload failed';
            }
        })
        .catch(err => {
            msg.style.color = 'red';
            msg.textContent = 'Error uploading CSV';
        });
    };

    // Assemble form
    form.appendChild(titleLabel);
    form.appendChild(titleInput);
    form.appendChild(document.createElement('br'));
    form.appendChild(document.createElement('br'));
    form.appendChild(fileLabel);
    form.appendChild(fileInput);
    form.appendChild(projectIdInput);
    form.appendChild(document.createElement('br'));
    form.appendChild(document.createElement('br'));
    form.appendChild(addBtn);

    content.appendChild(cancelBtn);
    content.appendChild(form);
    content.appendChild(msg);
    modal.appendChild(content);
    document.body.appendChild(modal);
}
</script>
</div>




<script>

   const project_id = {{ project.id }};

   let allProducts = null;


   console.log(rosters);
   console.log(graphic_designs);



   function newDesign() {
      // Create popup overlay
      let popup = document.createElement('div');
      popup.style.cssText = `
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0,0,0,0.7);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 1000;
      `;

      // Create popup content
      let content = document.createElement('div');
      content.style.cssText = `
         background: white;
         padding: 20px;
         border-radius: 8px;
         width: 80%;
         height: 80%;
         overflow-y: auto;
         position: relative;
      `;

      // Add close button
      let closeBtn = document.createElement('button');
      closeBtn.innerHTML = '×';
      closeBtn.style.cssText = `
         position: absolute;
         right: 10px;
         top: 10px;
         border: none;
         background: none;
         font-size: 24px;
         cursor: pointer;
      `;
      closeBtn.onclick = () => popup.remove();

      // Create grid container
      let grid = document.createElement('div');
      grid.style.cssText = `
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         padding: 20px;
      `;

      // Add product tiles
      allProducts.forEach(product => {
         // if (!includedProducts.includes(product.id)) return;
         let tile = document.createElement('div');
         tile.classList.add('product-tile');

         tile.innerHTML = `
         <div class="product-tile-img"><img src="/thumbs/products/${product.id}.png" /></div>
            <h4>${product.title}</h4>
            <p>SKU: ${product.sku}</p>
         `;

         tile.onclick = () => {
            popup.remove();
            window.location.href = `/clients/projectdesign/${product.id}/${project_id}`;
         };

         grid.appendChild(tile);
      });

      content.appendChild(closeBtn);
      content.appendChild(grid);
      popup.appendChild(content);
      document.body.appendChild(popup);
   }

   function newRoster() {
      // Create popup overlay
      window.location.href = `/projects/newroster/${project_id}`;
   }
   function editRoster(id) {
      window.location.href = `/projects/editroster/${id}`;
   }
   function startup() {

   };
   fetch('/products/all')
   .then(response => response.json())
   .then(data => {
      allProducts = data;
   });
   
</script>