package dev_mdsamplestationview

import "cpone/models"
import "cpone/component/table"
import "strconv"

templ TableSampleStation(data []models.MDSampleStation, 
    tableID string,
	hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,    
) {
    <div id={ tableID } hx-swap-oob="true">
        @tablecomponent.TableV3([]string{"KODE", "NAMA STATION", "GROUP", "AKSI"},
            []string{"20%", "30%", "30%", "20%"},
            ItemRow(data,
                hxGetEdit,
                hxTargetEdit,
                hxSwapEdit,
                hxIncludeEdit,
                hxGetDelete,
                hxTargetDelete,
                hxSwapDelete,
                hxIncludeDelete,
            ))
    </div>
}

templ ItemRow(data []models.MDSampleStation,
    hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,
) {
    if len(data) == 0 {
        <tr>
            <td colspan="4" class="text-center">Data Tidak Ditemukan</td>
        </tr>
    }
    for _, v := range data {
        <tr>
            <td>{ v.T_SampleStationCode }</td>
            <td>{ v.T_SampleStationName }</td>
            <td>{ v.T_SampleStationIsNonLab }</td>
            <td>
                @ItemAction(v.T_SampleStationID,
                    hxGetEdit,
                    hxTargetEdit,
                    hxSwapEdit,
                    hxIncludeEdit,
                    hxGetDelete,
                    hxTargetDelete,
                    hxSwapDelete,
                    hxIncludeDelete,
                )
            </td>
        </tr>
    }
}

templ ItemAction(
    id int,
	hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,    
) {
    <div class="row px-5 d-flex justify-content-around">
        <a 
            type="button"
            class="btnactionmdss col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
            hx-get={ hxGetEdit +"?id=" + strconv.Itoa(id) }
            hx-target={ hxTargetEdit }
            hx-swap={ hxSwapEdit }
            hx-include={ hxIncludeEdit }
            hx-indicator={ "#spnredt" + strconv.Itoa(id) }
            hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
        >
            <span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            Edit
        </a>
        <a 
            type="button"
            class="btnactionmdss col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
            hx-get={ hxGetDelete +"?id=" + strconv.Itoa(id) }
            hx-target={ hxTargetDelete }
            hx-swap={ hxSwapDelete }
            hx-include={ hxIncludeDelete }
            hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
            hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
        >
            <span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            Hapus
        </a>
    </div>
}

script HandleBeforeRequestRow(id string) {
	var cusid_ele = document.getElementsByClassName('btnactionmdss');
	for (var i = 0; i < cusid_ele.length; ++i) {
		var item = cusid_ele[i];  
		item.classList.add('disabled');
	}
	console.log(id)
}

script HandleAfterRequestRow(id string) {
	var cusid_ele = document.getElementsByClassName('btnactionmdss');
	for (var i = 0; i < cusid_ele.length; ++i) {
		var item = cusid_ele[i];  
		item.classList.remove('disabled');
	}
	console.log(id)    
}