package templates

import (
	"arbeitszeitmessung/helper"
	"arbeitszeitmessung/models"
	"fmt"
	"time"
)

templ PDFForm(teamMembers []models.User) {
	@Base()
	@headerComponent()
	<div class="grid-main divide-y-1">
		<div class="grid-cell col-span-full bg-neutral-300">
			<h1 class="text-xl uppercase font-bold">PDF Abrechnung erstellen</h1>
		</div>
		<div class="grid-sub divide-x-1 responsive">
			<div class="grid-cell">Zeitraum wählen</div>
			<div class="grid-cell col-span-3">
				<label class="block mb-1 text-sm text-neutral-700">Abrechnungsmonat</label>
				<input name="start_date" type="date" value="" class="btn bg-neutral-100"/>
			</div>
			<div></div>
		</div>
		<div class="grid-sub divide-x-1 responsive">
			<div class="grid-cell">Mitarbeiter wählen</div>
			<div class="grid-cell col-span-3 flex flex-col gap-2">
				<div class="flex flex-row gap-2">
					<button class="btn" type="button" onclick={ templ.JSFuncCall("checkAll", "pdf-", templ.JSExpression("true")) }>Alle</button>
					<button class="btn" type="button" onclick={ templ.JSFuncCall("checkAll", "pdf-", templ.JSExpression("false")) }>Keine</button>
				</div>
				for _, member := range teamMembers {
					@CheckboxComponent(fmt.Sprintf("pdf-%d", member.PersonalNummer), fmt.Sprintf("%s %s", member.Vorname, member.Name))
				}
			</div>
			<div></div>
		</div>
		<div class="grid-sub divide-x-1 responsive">
			<div class="grid-cell">PDFs Bündeln</div>
			<div class="grid-cell col-span-3 flex gap-2 flex-col md:flex-row">
				<button class="btn" type="button" name="action" value="download">Einzeln</button>
				<button class="btn" type="button" name="action" value="preview" onclick="">Bündel</button>
			</div>
		</div>
	</div>
}

templ CheckboxComponent(id, label string) {
	<div class="inline-flex items-center">
		<label class="flex items-center cursor-pointer relative" for={ id }>
			<input type="checkbox" class="peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-slate-800 checked:bg-slate-800 checked:border-slate-800" id={ id }/>
			<span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
				<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
					<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
				</svg>
			</span>
		</label> <label class="cursor-pointer ml-2 text-slate-600 select-none" for={ id }>{ label }</label>
	</div>
}

// templ PDFReportEmploye(e models.User, overtime, worktime time.Duration, workDays []models.IWorkDay, tsStart time.Time, tsEnd time.Time) {
// 	{{
// 		_, kw := tsStart.ISOWeek()
// 		noBorder := ""
// 	}}
// 	@Base()
// 	<content class="p-8 relative flex flex-col gap-4 break-after-page">
// 		<div>
// 			<h1 class="text-2xl font-bold">{ e.Vorname } { e.Name }</h1>
// 			<p>Zeitraum: <span>{ tsStart.Format("02.01.2006") }</span> - <span>{ tsEnd.Format("02.01.2006") }</span></p>
// 			<p>Arbeitszeit: <span>{ helper.FormatDuration(worktime) }</span></p>
// 			<p>Überstunden: <span>{ helper.FormatDuration(overtime) }</span></p>
// 		</div>
// 		<div class="grid grid-rows-6 grid-cols-[3fr_2fr_2fr_2fr_3fr_3fr_3fr] *:not-print:p-2 *:text-center auto-rows-min divide-neutral-300 divide-x-1 divide-y-1">
// 			<p class="bg-neutral-300 border-neutral-600">{ kw }</p>
// 			<p class="bg-neutral-300 border-neutral-600">Kommen</p>
// 			<p class="bg-neutral-300 border-neutral-600">Gehen</p>
// 			<p class="bg-neutral-300 border-neutral-600">Arbeitsart</p>
// 			<p class="bg-neutral-300 border-neutral-600">Stunden</p>
// 			<p class="bg-neutral-300 border-neutral-600">Pause</p>
// 			<p class="bg-neutral-300 border-neutral-600 border-r-0">Überstunden</p>
// 			for index, day := range workDays {
// 				{{
// 					if index == len(workDays)-1 {
// 						noBorder = "border-b-0"
// 					}
// 				}}
// 				<p class={ noBorder }>{ day.Date().Format("02.01.2006") }</p>
// 				<div class={ "grid grid-cols-subgrid col-span-3 " + noBorder }>
// 					if day.IsWorkDay() {
// 						{{
// 						workDay, _ := day.(*models.WorkDay)
// 						}}
// 						for bookingI := 0; bookingI < len(workDay.Bookings); bookingI+= 2 {
// 							<p>{ workDay.Bookings[bookingI].Timestamp.Format("15:04") }</p>
// 							<p>{ workDay.Bookings[bookingI+1].Timestamp.Format("15:04") }</p>
// 							<p>{ workDay.Bookings[bookingI].BookingType.Name } </p>
// 						}
// 						if workDay.IsKurzArbeit() {
// 							{{
// 								timeFrom, timeTo := workDay.GenerateKurzArbeitBookings(e)
// 							}}
// 							<p>{ timeFrom.Format("15:04") }</p>
// 							<p>{ timeTo.Format("15:04") }</p>
// 							<p>Kurzarbeit</p>
// 						}
// 					} else {
// 						{{
// 						absentDay, _ := day.(*models.Absence)
// 						}}
// 						<p class="col-span-full">{ absentDay.AbwesenheitTyp.Name }</p>
// 					}
// 				</div>
// 				{{ work, pause, overtime := day.GetTimesVirtual(e) }}
// 				@ColorDuration(work, noBorder)
// 				@ColorDuration(pause, noBorder)
// 				@ColorDuration(overtime, noBorder+" border-r-0")
// 				if day.Date().Weekday() == time.Friday {
// 					<p class="col-span-full bg-neutral-300">Wochenende</p>
// 				}
// 			}
// 		</div>
// 	</content>
// }
templ ColorDuration(d time.Duration, classes string) {
	{{
	color := ""
	if d.Abs() < time.Minute {
		color = "text-neutral-300"
	}
	}}
	<p class={ color + " " + classes }>{ helper.FormatDurationFill(d, true) }</p>
}