{{--<div class="container-fluid">
    <x-action-loader action="proceed" type="fullbody" />
    <div class="d-flex justify-content-between align-items-center mb-2">
        <x-breadcrumb :title="'TSTP of Commencement of Provision of Services'" :breadcrumb="$breadcrumb" />
        <x-back-button />
    </div>
    <x-validation-errors />

    @if($showForm)
        <livewire:compliance.tstp.tstp-form
            :license="$licenses[$selectedLicense]"
            :application-id="$currentApplicationId"
            :key="'tstp-form-'.$selectedLicense"
        />
    @else
        <div class="card mt-3">
            <div class="card-body p-4">
                <livewire:common.common-license-selector />
                <button type="button" wire:click="proceed" class="btn btn-success" @disabled($selectedLicense === null)>
                    Proceed
                </button>
            </div>
            <div></div>
        </div>
    @endif
</div>--}}

<div class="container-fluid">

    <x-action-loader action="selectedLicense,proceed" type="fullbody"
    />
    <div class="d-flex justify-content-between align-items-center mb-2">
        <x-breadcrumb
            :title="'Compliance Report for Trusted Sources and Trusted Products'"
            :breadcrumb="$breadcrumb"
        />
    </div>

    <x-validation-errors />

    <div class="card mt-3">
        <div class="card-body p-4">
            <livewire:common.common-license-selector :licenses="$licenses" />

            <div class="row align-items-center mt-3">
                <div class="col-md-6">
                    <div class="row align-items-center">

                        <label
                            class="col-md-3 col-form-label fw-semibold"
                            for="selectedPeriod">
                            Period
                            <span class="text-danger">*</span>
                        </label>

                        <div class="col-md-4">
                            <div wire:ignore>
                                <select
                                    id="selectedPeriod"
                                    class="form-select"
                                    wire:model="selectedPeriod">
                                    
                                    <option value="">Select Period</option>

                                    @foreach($periods as $item)
                                        <option value="{{ $item->d_date_period->format('Y-m-d') }}">
                                            {{ $item->c_rpt_period_desc }} - {{ $item->d_date_period->format('Y') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            @error('selectedPeriod')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                    </div>
                </div>
            </div>


            {{--<div class="col-sm-3 col-md-3 col-lg-3 mt-3">
                <label for="period" class="form-label">
                    Period <span class="text-danger">*</span>
                </label>

                <select
                    wire:model="period"
                    id="period"
                    class="form-select"
                >
                    <option value="">-- Select Period --</option>

                    @foreach($periods as $item)
                        <option value="{{ $item->d_date_period->format('Y-m-d') }}">
                            {{ $item->c_rpt_period_desc }} - {{ $item->d_date_period->format('Y') }}
                        </option>
                    @endforeach
                </select>

                @error('period')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>--}}
            <div class="d-flex justify-content-between mt-4">
                <button type="button" class="btn btn-outline-success" wire:click="proceed" wire:loading.attr="disabled" wire:target="proceed" @disabled($isProceeding || blank($selectedLicense))>
                   <span
                        wire:loading.remove
                        wire:target="proceed">
                        <i class="fas fa-save me-2"></i>
                        Proceed
                    </span>

                    <span
                        wire:loading
                        wire:target="proceed">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Saving...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>