{% extends 'base.html.twig' %}
{% block title %}Mes tickets{% endblock %}
{% block body %}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left',
    allowInputToggle: false,
    container: undefined,
    dateRange: true,
    debug: false,
    defaultDate: undefined,
    display: {
        icons: {
            type: 'icons',
            time: 'fa-solid fa-clock',
            date: 'fa-solid fa-calendar',
            up: 'fa-solid fa-arrow-up',
            down: 'fa-solid fa-arrow-down',
            previous: 'fa-solid fa-chevron-left',
            next: 'fa-solid fa-chevron-right',
            today: 'fa-solid fa-calendar-check',
            clear: 'fa-solid fa-trash',
            close: 'fa-solid fa-xmark'
        },
        sideBySide: false,
        calendarWeeks: true,
        viewMode: 'calendar',
        toolbarPlacement: 'top',
        keepOpen: false,
        buttons: {
            today: false,
            clear: false,
            close: false
        },
        components: {
            calendar: true,
            date: true,
            month: true,
            year: true,
            decades: true,
            clock: false,
            hours: false,
            minutes: false,
            seconds: false,
            useTwentyfourHour: true
        },
        inline: false,
        theme: 'auto'
    },
    keepInvalid: false,
    localization: {
        locale: "fr",
        startOfTheWeek: 1,
        format: "dd/MM/yyyy",
        clear: 'Clear selection',
        close: 'Close the picker',
        dayViewHeaderFormat: { month: 'long', year: '2-digit' },
        decrementHour: 'Decrement Hour',
        decrementMinute: 'Decrement Minute',
        decrementSecond: 'Decrement Second',
        incrementHour: 'Increment Hour',
        incrementMinute: 'Increment Minute',
        incrementSecond: 'Increment Second',
        nextCentury: 'Next Century',
        nextDecade: 'Next Decade',
        nextMonth: 'Next Month',
        nextYear: 'Next Year',
        pickHour: 'Pick Hour',
        pickMinute: 'Pick Minute',
        pickSecond: 'Pick Second',
        previousCentury: 'Previous Century',
        previousDecade: 'Previous Decade',
        previousMonth: 'Previous Month',
        previousYear: 'Previous Year',
        selectDate: 'Select Date',
        selectDecade: 'Select Decade',
        selectMonth: 'Select Month',
        selectTime: 'Select Time',
        selectYear: 'Select Year',
        startOfTheWeek: 1,
        today: 'Aller à auj',
        toggleMeridiem: 'Toggle Meridiem'
    },
    meta: {},
    multipleDates: false,
    multipleDatesSeparator: '; ',
    promptTimeOnDateChange: false,
    promptTimeOnDateChangeTransitionDelay: 200,
    restrictions: {
        minDate: undefined,
        maxDate: undefined,
        disabledDates: [],
        enabledDates: [],
        daysOfWeekDisabled: [],
        disabledTimeIntervals: [],
        disabledHours: [],
        enabledHours: []
    },
    stepping: 1,
    useCurrent: true,
    viewDate: new DateTime()
    }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        
    });
});
</script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Mon compte-rendu d'activité");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        var filter = '';

        /* Datatable de clients */
        var timesTable = $('#timesTable').DataTable({
            "columnDefs": [
                { "width": "8%", "targets": 0 }
            ],
            "search": {
                return: true
            },
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/pointage-user/ajax-list/{{ user_id }}',
                data: {
                    filter : filter,
                },
                dataSrc: 'pointage',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Enter Last Name"
            },
            columns: [
                { data: 'id' },
                { data: 'typeActivity' },
                { data: 'activity' },
                { data: 'taskID' },
                { data: 'comments' },
                { data: 'pointage' },
                { data: 'createdBy' },
                { data: 'createdAt' }
            ]
        });


        ///pointage-user/ajax-list-filtered/{id}

        $('#btn-ticket-creator').click(function(){
            filter = 'creator';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-ticket-assignee').click(function(){
            filter = 'assignee';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-ticket-responsable').click(function(){
            filter = 'responsable';
            $('#TicketsTable').DataTable().ajax.reload();
        })

        $('#btn-search-pointages').click(function (){

            timesTable.destroy();
            
            var from = $('#fromDate').val();
            var to = $('#toDate').val();

            console.log("from = " + from + ", to = " + to);

            /* Datatable de clients */
            timesTable = $('#timesTable').DataTable({
                "columnDefs": [
                    { "width": "8%", "targets": 0 }
                ],
                "search": {
                    return: true
                },
                responsive: true,
                ajax: {
                    type: 'GET',
                    url: '/pointage-user/ajax-list-filtered/{{ user_id }}',
                    data: {
                        from : from,
                        to: to
                    },
                    dataSrc: 'pointage',
                    dataType: 'json',
                },
                ordering: true,
                paging: false,
                
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Enter Last Name"
                },
                columns: [
                    { data: 'id' },
                    { data: 'typeActivity' },
                    { data: 'activity' },
                    { data: 'taskID' },
                    { data: 'comments' },
                    { data: 'pointage' },
                    { data: 'createdBy' },
                    { data: 'createdAt' }
                ]
            });
        })

    })
</script>

<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Compte-rendu d'activité                                 
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
                <div class="digi-card card-flush">
                    <div class="card-header align-items-center py-2 gap-2 gap-md-5">
                        
                        <!--div style="text-align: right;" class="from-label">A :</div-->
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" style="display: flex; justify-content: space-between !important;">
                            
                            <!--begin::Add user-->
                            <a style="height: 40px;" href="/tickets-part1/0/add" class="btn btn-digi"><i class="fa-solid fa-plus" style="color: #ffffff;"></i>&nbsp;Pointer une activité</a>
                            <!--end::Add user-->
                            
                            <div class="digi-table-toolbar">
                                <!--div class="row">
                                    <div class="col-sm-6">
                                        <div class="input-group log-event" id="kt_td_picker_linked_1" data-td-target-input="nearest" data-td-target-toggle="nearest">
                                            <input id="kt_td_picker_linked_1_input" placeholder="Date de début" type="text" class="form-control" data-td-target="#kt_td_picker_linked_1"/>
                                            <span class="input-group-text" style="background-color: #06668C; color: #fff;" data-td-target="#kt_td_picker_linked_1" data-td-toggle="datetimepicker">
                                                <i class="fa-solid fa-calendar"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="input-group log-event" id="kt_td_picker_linked_2" data-td-target-input="nearest" data-td-target-toggle="nearest">
                                            <input id="kt_td_picker_linked_2_input" type="text" placeholder="Date de fin" class="form-control" data-td-target="#kt_td_picker_linked_2"/>
                                            <span style="background-color: #06668C; color: #fff;" class="input-group-text" data-td-target="#kt_td_picker_linked_2" data-td-toggle="datetimepicker">
                                                <i class="fa-solid fa-calendar"></i>
                                            </span>
                                        </div>
                                            <label for="exampleFormControlInput1" class="form-label">Email address</label>
                                            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                                    </div>
                                </div-->
                                <div class="digi-inline" style="display: flex; gap: 10px;">
                                    <input id="fromDate" style="border: solid 1px #06668C; border-radius: 10px;" placeholder="Date de début" type="date" class="form-control" />
                                    <input id="toDate" style="border: solid 1px #06668C; border-radius: 10px;" placeholder="Date de fin" type="date" class="form-control" />
                                    <div class="btn btn-digi" id="btn-search-pointages"><i class="fa-solid fa-search" style="color: #ffffff;"></i></div>
                                </div>
                            </div>

                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <div class="card-body pt-0">
                        <!-- Datatable du temps passé -->
                        <table id="timesTable" class="dataTable hover striped" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Type d'activité</th>
                                    <th>Activité</th>
                                    <th>Tache</th>
                                    <th>Commentaire</th>
                                    <th>Temps passé</th>
                                    <th>par</th>
                                    <th>Le</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            </table>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>
<script>
    const linkedPicker1Element = document.getElementById("kt_td_picker_linked_1");
    const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);
    const linked2 = new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_linked_2"), {
        useCurrent: false,
    });

    //using event listeners
    linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {
        linked2.updateOptions({
            restrictions: {
            minDate: e.detail.date,
            },
        });
    });

    //using subscribe method
    const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {
        linked1.updateOptions({
            restrictions: {
            maxDate: e.date,
            },
        });
    });
</script>
<!--end::Row-->  
{% endblock %}