<?xml version="1.0" encoding="utf-8"?>
<odoo>
    
    <template id="portal_my_maitenance" name="Mis Tickets">
        <t t-call="portal.portal_layout">
            <t t-set="breadcrumbs_searchbar" t-value="True" />
            
            <t t-call="portal.portal_searchbar">
                <t t-set="title">Mantenimiento</t>
            </t>
        
            <input type="hidden" name="mdl_shw" id="mdl_shw" t-att-value="created"/>

            <div id="createticketModalMaintenance" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content" style="max-height:650px;">
                        <div class="modal-body">
                            <div class="row">
                                
                                <div class="col-sm-12 col-md-6 col-lg-6 border-right">
                                    <h4>Crear Ticket</h4>
                                    <form action="/portal-create-ticket-maintenance" method="POST" id="form_id" class="form-horizontal mt32" enctype="multipart/form-data">
                                        <input type="hidden" name="sh_file_size" id="sh_file_size" t-att-value="request.env.company.sh_file_size"/>
                                        <input type="hidden" name="tck_type" id="tck_type" value="mantenimiento"/>
                                        <div class="form-group">

                                            <t t-if="request.env.user.has_group('base.group_portal') and request.env.user.sh_portal_user_access or not request.env.user.has_group('base.group_portal')">
                                                <label class="control-label" for="partner">Usuario:</label>
                                                <input class="form-control " list="partner_ids" name="partner" id="partner" />
                                                <input type="hidden" name="partner_id" id="partner_id" />
                                                <datalist id="partner_ids"> </datalist>
                                            </t>
                                        </div>
                                        
                                        <t t-if="request.env.user.has_group('base.group_portal') and not request.env.user.sh_portal_user_access">
                                            <div t-attf-class="form-group #{error and 'portal_contact_name' in error and 'has-error' or ''}">
                                                <label class="control-label" for="portal_contact_name">Nombre:</label>
                                                <input type="text" class="form-control" id="portal_contact_name" name="portal_contact_name" t-att-value="request.env.user.partner_id.name" readonly="True" />
                                            </div>
                                            <div name="portal_email_from_container" t-attf-class="form-group #{error and 'portal_email' in error and 'has-error' or ''}">
                                                <label class="control-label" for="portal_email">Correo:</label>
                                                <input type="email" class="form-control" id="portal_email" name="portal_email" t-att-value="request.env.user.partner_id.email" readonly="True" />
                                            </div>
                                        </t>

                                        <t t-else="">
                                            <div t-attf-class="form-group #{error and 'portal_contact_name' in error and 'has-error' or ''}">
                                                <label class="control-label" for="portal_contact_name">Nombre:</label>
                                                <input type="text" class="form-control" id="portal_contact_name" name="portal_contact_name" required="True" />
                                            </div>
                                            <div name="portal_email_from_container" t-attf-class="form-group #{error and 'portal_email' in error and 'has-error' or ''}">
                                                <label class="control-label" for="portal_email">Correo:</label>
                                                <input type="email" class="form-control" id="portal_email" name="portal_email" required="True" />
                                            </div>
                                        </t>

                                        <div t-attf-class="form-group s_website_form_required">
                                            <label class="control-label s_website_form_required" for="portal_phone">Teléfono:</label>
                                            <input type="text" class="form-control  form-field s_website_form_required" id="portal_phone" name="portal_phone" required="" />
                                        </div>
                                        <!--Tipo de mantenimiento-->
                                        <div t-attf-class="form-group o_website_form_required_custom #{error and 'portal_main_type' in error and 'has-error' or ''}">
                                            <label class="control-label" for="portal_main_type">Tipo de Mantenimiento:</label>
                                            <select class="form-control form-field o_website_form_required_custom" id="portal_main_type" name="portal_main_type" required="">
                                                <option></option>
                                                <t t-foreach="request.env['maintenance.type'].sudo().search([])" t-as="type">
                                                    <option t-att-value="type.id"><t t-esc="type.name" /></option>
                                                </t>
                                            </select>
                                        </div>
                                        <!--fecha de decteción de falla-->
                                        <div t-attf-class="form-group o_website_form_required_custom #{error and 'portal_date_fail' in error and 'has-error' or ''}">
                                            <label class="control-label" for="portal_date_fail">¿Cuando detecto la falla?</label>
                                            <input type="text" class="form-control  form-field s_website_form_required" id="portal_date_fail" name="portal_date_fail" required="" />
                                        </div>
                                        <!--Tipo de gravedad-->
                                        <div t-attf-class="form-group o_website_form_required_custom #{error and 'portal_severity' in error and 'has-error' or ''}">
                                            <strong><span class="control-label" >Selecciona el tipo de Gravedad;</span></strong><br/><br/>

                                            <input class="mr5" type="radio" name="portal_severity" id="portal_severity" value="1">Leve</input>
                                            
                                            <input class="mr5" type="radio" name="portal_severity" id="portal_severity" value="2">Medio</input>
                                            
                                            <input class="mr5" type="radio" name="portal_severity" id="portal_severity" value="3">Grave</input>
                                            
                                        </div>
                                        <!--Descripción detallada de falla-->
                                        <div t-attf-class="form-group o_website_form_required_custom #{error and 'portal_description' in error and 'has-error' or ''}">
                                            <label class="control-label" for="portal_description">Descripción</label>
                                            <textarea id="description" name="portal_description" class="form-control form-field o_website_form_required_custom" placeholder="Description" required=""/>
                                        </div>
                                        <!--Tipo de falla-->
                                        <div t-attf-class="form-group o_website_form_required_custom #{error and 'portal_fail_type' in error and 'has-error' or ''}">
                                            <strong><span class="control-label" >Selecciona el tipo de falla:</span></strong><br/><br/>
                                            <input type="radio" class="mr5" name="portal_fail_type" id="portal_fail_type" value="fail">Falla</input>
                                            <input type="radio" class="mr5" name="portal_fail_type" id="portal_fail_type" value="warranty">Garantía</input>
                                        </div>

                                        <div name="portal_file_container" t-attf-class="form-group #{error and 'portal_file' in error and 'has-error' or ''}">
                                            <label class="control-label" for="portal_file">Evidencias:</label>
                                            <label class="custom-file">
                                                <input name="portal_file" id="portal_file" type="file" multiple="true" />
                                                <span class="custom-file-control" />
                                            </label>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-12 text-center border-top ">
                                                <button type="submit" id="create_helpdesk_ticket" class="btn btn-primary mt-2 rounded">Crear Ticket</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6 o_center_object mt-2">
                                    <button type="button" class="btn btn-secondary rounded" data-dismiss="modal">Acceder</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                 
            <t t-if="not tickets">
                <p>No hay tickets relacionados.</p>
            </t>
           
            <t t-if="grouped_tickets" t-call="portal.portal_table">
                <t t-foreach="grouped_tickets" t-as="ticket">
                    <thead>
                        <tr t-attf-class="{{'thead-light' if not groupby == 'none' else ''}}">
                            <th t-if="groupby == 'create_by'">
                                <em class="font-weight-normal text-muted">Creado por:</em>
                                <span t-field="ticket[0].create_uid.name" />
                            </th>
                            <th t-if="groupby == 'ticket_type'">
                                <em class="font-weight-normal text-muted">Tipo de Ticket:</em>
                                <span t-field="ticket[0].ticket_type.name" />
                            </th>
                            <th t-if="groupby == 'status'">
                                <em class="font-weight-normal text-muted">Estado:</em>
                                <span t-esc="ticket[0].stage_id.name" />
                            </th>
                            
                            <th t-if="groupby == 'priority'">
                                <em class="font-weight-normal text-muted">Prioridad:</em>
                                <span t-esc="ticket[0].priority.name" />
                            </th>
                            <th t-if="groupby == 'state'">
                                <em class="font-weight-normal text-muted">Estatus de Respuesta:</em>
                                <span t-esc="ticket[0].state" />
                            </th>
                            <th t-if="groupby == 'maintenance_type'">
                                <em class="font-weight-normal text-muted">Tipo de mantenimiento:</em>
                                <span t-esc="ticket[0].maintenance_type_id.name" />
                            </th>
                            <th t-if="groupby == 'severity_type'">
                                <em class="font-weight-normal text-muted">Gravedad:</em>
                                <span t-esc="ticket[0].severity_type" />
                            </th>
                            <th>Fecha de creación</th>
                            <th>Tipo de mantenimiento</th>
                            <th>Gravedad</th>
                            <th>Tipo de falla</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <t t-foreach="ticket" t-as="t">
                            <tr>
                                <td>
                                    <a t-att-href="t.get_portal_url()" t-att-title="t.name">
                                        <t t-esc="t.name" t-if="t.name" />
                                        <em t-else="">Ticket</em>
                                    </a>
                                </td>
                                <td><span t-field="t.create_date" t-options='{"widget": "date"}' /></td>
                                <td><span t-field="t.maintenance_type_id"/></td>
                                <td><span t-field="t.severity_type" /></td>
                                <td><span t-field="t.fail_type" /></td>
                                <td><span t-field="t.stage_id" /></td>
                            </tr>
                        </t>
                    </tbody>
                </t>
            </t>
        </t>
    </template>

    <template id="portal_ticket_page_maintenance" name="Ticket Portal Template" inherit_id="portal.portal_sidebar" primary="True">
        <xpath expr="//div[hasclass('o_portal_sidebar')]" position="inside">
            <div class="row mt16 o_portal_ticket_sidebar">
                <!-- Sidebar -->
                <t t-call="portal.portal_record_sidebar">
                    <t t-set="classes" t-value="'col-12 col-lg flex-lg-grow-0 d-print-none'" />
                    <t t-set="title">
                        <h2 class="mb-0">
                            <b t-if="maintenance" t-field="maintenance.name" />
                            <b t-else="" >TICKET</b>
                        </h2>
                    </t>

                    <t t-set="entries">
                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
                            <li class="list-group-item flex-grow-1">
                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
                                    <div class="btn-group flex-grow-1 mr-1 mb-1">
                                        <a class="btn btn-secondary btn-block o_download_btn" t-att-href="maintenance.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download" /> Descargar</a>
                                    </div>
                                </div>
                            </li>
                            <li t-if="maintenance.user_id" class="list-group-item flex-grow-1">
                                <div class="small mb-1"><strong class="text-muted">Contacto:</strong></div>
                                <div class="row">
                                    <div class="col flex-grow-0 pr-2">
                                        <img t-if="maintenance.user_id.image_128" class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(maintenance.user_id.image_128)" alt="Contact" />
                                        <img t-else="" class="rounded-circle mt-1 o_portal_contact_img" src="/web/static/src/img/user_menu_avatar.png" alt="Contact" />
                                    </div>
                                    <div class="col pl-0" style="min-width: 150px;">
                                        <span t-field="maintenance.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}' />
                                        <a href="#discussion" class="small"><i class="fa fa-comment"></i> Mandar Mensaje</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </t>
                </t>

                <!-- Page Content -->
                <div id="ticket_content" class="col-12 col-lg justify-content-end">
                    <div t-attf-class="card #{'pb-5' if report_type == 'html' else ''}">
                        <div t-call="helpdesk_maintenance.helpdesk_ticket_portal_content_maintenance" />
                    </div>

                    <!-- chatter -->
                    <div id="ticket_communication" class="mt-4">
                        <h2>Historia</h2>
                        <t t-call="portal.message_thread">
                            <t t-set="object" t-value="maintenance" />
                        </t>
                    </div>
                </div>
            </div>
        </xpath>
    </template>


    <template id="helpdesk_ticket_portal_content_maintenance" name="Helpdesk Ticket Portal Content">
        <div id="introduction" t-attf-class="pb-2 pt-3 #{'card-header bg-white' if report_type == 'html' else ''}">
            <h2 class="my-0">
                <strong><em t-esc="maintenance.name" /></strong>
            </h2>
        </div>
        <div t-attf-class="#{'card-body' if report_type == 'html' else ''}">
            <div id="informations">
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Tipo de Ticket: </strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.ticket_type" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Fecha de creación:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.create_date" />
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Última actualización:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.write_date" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Nombre:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.person_name" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Correo electrónico:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.email" />
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Fecha de replica:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.replied_date" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Fecha de cierre</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.close_date" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Tipo de mantenimiento:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.maintenance_type_id.name"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <strong>Tipo de gravedad</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.severity_type" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Fecha de falla:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.date_fail" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <strong>Tipo de Falla:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.fail_type" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Prioridad:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.priority" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Cerrado por: </strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.close_by" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Fecha de cancelación:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.cancel_date" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Cancelado por:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.cancel_by" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Estado:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.stage_id" />
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 col-6">
                        <div class="row">
                            <div class="col-6">
                                <strong>Razón de cancelación:</strong>
                            </div>
                            <div class="col-6">
                                <span t-field="maintenance.cancel_reason" />
                            </div>
                        </div>
                    </div>
                </div>
                <t t-if="maintenance.comment">
                    <div class="row">
                        <div class="mb-3 col-12">
                            <strong>Comentario de cierre:</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <span t-field="maintenance.comment" />
                        </div>
                    </div>
                </t>
                <t t-if="maintenance.description">
                    <div class="row">
                        <div class="mb-3 col-12">
                            <strong>Descripción:</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-12">
                            <span t-field="maintenance.description" />
                        </div>
                    </div>
                </t>
                <t t-if="maintenance.priority_new and maintenance.customer_comment">
                    <div class="row">
                        <div class="mb-3 col-6">
                            <div class="row">
                                <div class="col-6">
                                    <strong>Calificación del cliente:</strong>
                                </div>
                                <div class="col-6">
                                    <span class="float-right" title="Rating" role="img" t-attf-aria-label="Rating: #{maintenance.priority_new} on 3">
                                        <t t-foreach="range(2, 7)" t-as="i">
                                            <span t-attf-class="fa fa-lg fa-star#{'' if i &lt;= int(maintenance.priority_new) else '-o'}" />
                                        </t>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 col-6">
                            <div class="row">
                                <div class="col-6">
                                    <strong>Comentario del cliente:</strong>
                                </div>
                                <div class="col-6">
                                    <span t-field="maintenance.customer_comment" />
                                </div>
                            </div>
                        </div>
                    </div>
                </t>
            </div>
        </div>
    </template>

</odoo>