{% extends 'admin.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('business_card_calculator') }}
{% endblock %}
{% block title %}Calculators{% endblock %}
{% block body %}
<div class="row">
<div class="col">
{{ include('calculator/nav.html.twig') }}
<h1>{{ calculator.name }}</h1>
<form id="calculatorForm" method="post" action="{{ path('calculate', {'id':calculator.id }) }}">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<h5>Options</h5>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Printing Type</label>
<div class="col-sm-10">
<label for="printingTypeSelect" class="visually-hidden">Printing Type</label>
<select id="printingTypeSelect" class="form-select form-select-sm" name="printing_type[id]" >
<!-- Testing -->
<option value="4" >[SF] Sheet Fed</option>
</select>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Machine</label>
<div class="col-sm-10">
<label for="machineSelect" class="visually-hidden">Machine</label>
<select id="machineSelect" class="form-select form-select-sm" name="machine[id]">
<!-- Testing -->
<option value="2" >[rc] Richo</option>
</select>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Paper Size</label>
<div class="col-sm-10">
<label for="paperSizeSelect" class="visually-hidden">Paper Size</label>
<select id="paperSizeSelect" class="form-select form-select-sm" name="paper_size[id]">
<!-- Testing -->
<option value="1" data-select2-id="select2-data-41-4y1m">[SRA3] SRA3</option>
</select>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Finished Size</label>
<div class="col-sm-10">
<div class="row mb-1">
<div class="col">
<div class="input-group">
<label for="finishedSizeX" class="visually-hidden">X</label>
<input name="finished_size[x]" type="number" id="finishedSizeX" class="form-control form-control-sm text-end finishedSize" aria-describedby="finishedSizeX" value="90">
<span class="input-group-text" id="finishedSizeX-addon1">X</span>
</div>
</div>
<div class="col">
<div class="input-group">
<label for="finishedSizeY" class="visually-hidden">Y</label>
<input name="finished_size[y]" type="number" id="finishedSizeY" class="form-control form-control-sm text-end finishedSize" aria-describedby="finishedSizeY" value="55">
<span class="input-group-text" id="finishedSizeY-addon1">Y</span>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Imposition</label>
<div class="col-sm-10">
<label for="impositionSelect" class="visually-hidden">Paper Size</label>
<select type="text" name="imposition[id]" id="impositionSelect" class="form-select form-select-sm" >
<option value="1" >90x50 business card 21 up</option>
</select>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Paper Type</label>
<div class="col-sm-10">
<label for="paperTypeSelect" class="visually-hidden">Paper Type</label>
<select name="paper_type[id]" id="paperTypeSelect" class="form-select form-select-sm" >
<option value="4245" >350gsm COATED BOARD SILK MATT WHITE</option>
</select>
</div>
</div>
<div class="row mb-1">
<label class="col-sm-2 col-form-label">Side 1</label>
<div class="col-sm-4">
<label for="sidesSelect" class="visually-hidden">Sides</label>
<select name="sides[0]" id="sidesSelect" class="form-select form-select-sm" >
<option value="colour">Colour</option>
<option value="black_only">Black Only</option>
</select>
</div>
<label class="col-sm-2 col-form-label">Side 2</label>
<div class="col-sm-4">
<label for="sidesSelect" class="visually-hidden">Sides</label>
<select name="sides[1]" id="sidesSelect" class="form-select form-select-sm" >
<option value="none">None</option>
<option value="colour">Colour</option>
<option value="black_only">Black Only</option>
</select>
</div>
</div>
<div class="row mb-1">
</div>
</div>
<div class="col tasks">
<div class="row ">
<div class="col-auto align-middle">
<h5 class="">Tasks</h5>
</div>
</div>
<div class="row">
<div class="col">
<div class="row mb-1">
<label class="col-form-label visually-hidden">Select Task</label>
<div class="col">
<label for="taskSelect" class="visually-hidden">Search Code or Name</label>
<select type="text" id="taskSelect" class="form-select form-select-sm" ></select>
</div>
</div>
</div>
</div>
<div class="row mb-1 py-1">
<div class="col">
<div class="added-tasks" data-index="0">
<div class="task-panel panel-warning mb-2 border border-2 p-2 ">
<div class="task-panel-heading mb-2 p-2">
<div class="row">
<div class="col">Name</div>
<div class="col">Code</div>
<div class="col">Remove</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col d-grid">
<button class="btn btn-primary" type="submit">Calculate</button>
</div>
</div>
</form>
<div class="modal fade" data-bs-backdrop="static" id="calculatorModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Business Card</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="spinner d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="modal-calculate-btn" class="btn btn-primary">Calculate</button>
<button class="text-end btn-primary btn" id="modal-show-cost-btn">Show Cost</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('business_card_calculator') }}
{% endblock %}