@include('backend.alerts')
<div class="card">
    <div class="card-body">
        <!--begin::Accordion-->
        <div class="accordion accordion-icon-toggle" id="kt_accordion_2">
            <!--begin::Item-->
            <div class="mb-5">
                <!--begin::Header-->
                <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                    data-bs-target="#kt_accordion_2_item_1" aria-expanded="false">
                    <span class="svg-icon svg-icon-primary">
                        <svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                            viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                <path
                                    d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                    fill="#000000" fill-rule="nonzero"></path>
                                <path
                                    d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                    fill="#000000" fill-rule="nonzero" opacity="0.3"
                                    transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                </path>
                            </g>
                        </svg>
                    </span>
                    <h2 class="fw-semibold mb-0 ms-4">Connect Xero</h2>
                </div>
                <!--end::Header-->

                <!--begin::Body-->
                <div id="kt_accordion_2_item_1" class="fs-6 ps-4 collapse"
                    data-bs-parent="#kt_accordion_2" style="">
                    <div class="card-body pl-12">
                        <!--begin::Group-->
                        <div class="form-group row">
                            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12">
                                @if (isset($error))
                                    <h3>Your connection to Xero failed</h3>
                                    <p>{{ $error }}</p>
                                    <a href="{{ route('settings.xero.redirectUserToXero') }}"
                                        class="btn btn-primary btn-large mt-4">
                                        Reconnect to Xero
                                    </a>
                                @elseif(!empty($xero_oauth_user))
                                    <h3>You are connected to Xero</h3>
                                    <p></p>
                                    <a href="{{ route('settings.xero.disconnect') }}"
                                        class="btn btn-primary btn-large mt-4">
                                        Disconnect Xero
                                    </a>
                                    <a href="{{ route('settings.xero.redirectUserToXero') }}"
                                        class="btn btn-primary btn-large mt-4 d-none">
                                        Reconnect to Xero
                                    </a>

                                    @if (!empty($xeroConfigHtml))
                                        <div class="table-responsive mt-4">
                                            <table class="table table-bordered table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Tenant Id</th>
                                                        <th>Scope</th>
                                                        <th>Expires</th>
                                                        <th>XERO API Blocked</th>
                                                        <th>XERO API Blocked Until</th>
                                                        <th>XERO API Blocked Reason</th>
                                                        <th>XERO API Calls Enabled</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="xero_data_list">
                                                    {!! $xeroConfigHtml !!}
                                                </tbody>
                                            </table>
                                        </div>
                                    @endif
                                @else
                                    <h3>You are not connected to Xero</h3>
                                    <a href="{{ route('settings.xero.redirectUserToXero') }}"
                                        class="btn btn-primary btn-large mt-4">
                                        Connect to Xero
                                    </a>
                                @endif
                            </div>
                        </div>
                        <!--end::Group-->
                    </div>
                </div>
                <!--end::Body-->
            </div>
            <!--end::Item-->

            @if (!empty($xero_oauth_user))
                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_3" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px"
                                viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Refresh Token</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_3" class="fs-6 ps-4 collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <!-- Add the button for fetching calendars -->
                                    <a href="{{ route('settings.xero.refreshtoken') }}"
                                        class="btn btn-info btn-large mt-4">
                                        Refresh Token
                                    </a>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->

                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_4" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Fetch Pay Items</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_4" class="fs-6 ps-4 collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <!-- Add the button for fetching calendars -->
                                    <a href="{{ route('settings.xero.payitems') }}"
                                        class="btn btn-info btn-large mt-4">
                                        Fetch Pay Items
                                    </a>
                                </div>
                            </div>
                            @php $cmd = 'xero:pay_items'; @endphp
                            <div class="form-group row mt-4">
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">CRON Status</label>
                                    <select class="form-control form-select" name="cron_status[{{$cmd}}]">
                                        <option value="1" {{ (($data['cron_status'][$cmd] ?? '1') == '1') ? 'selected' : '' }}>Enabled</option>
                                        <option value="0" {{ (($data['cron_status'][$cmd] ?? '1') == '0') ? 'selected' : '' }}>Disabled</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Day</label>
                                    <select class="form-control form-select" name="cron_send_day[{{$cmd}}]">
                                        <option value="">— Select Day —</option>
                                        @foreach($sendDayOptions as $dayVal => $dayLabel)
                                        <option value="{{ $dayVal }}" {{ (($data['cron_send_day'][$cmd] ?? '') == $dayVal) ? 'selected' : '' }}>{{ $dayLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Time</label>
                                    <select class="form-control form-select" name="cron_send_time[{{$cmd}}]">
                                        <option value="">— Select Time —</option>
                                        @foreach($sendTimeOptions as $opt)
                                        <option value="{{ $opt }}" {{ (($data['cron_send_time'][$cmd] ?? '') == $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary mt-2 btn-save-cron-schedule" data-cmd="{{ $cmd }}"><i class="fa fa-save me-1"></i> Save </button>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->

                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_5" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Fetch Calendars</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_5" class="fs-6 ps-4 collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <!-- Add the button for fetching calendars -->
                                    <a href="{{ route('settings.xero.calendars') }}"
                                        class="btn btn-info btn-large mt-4">
                                        Fetch Calendars
                                    </a>
                                </div>
                            </div>
                            @php $cmd = 'xero:calendars'; @endphp
                            <div class="form-group row mt-4">
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">CRON Status</label>
                                    <select class="form-control form-select" name="cron_status[{{$cmd}}]">
                                        <option value="1" {{ (($data['cron_status'][$cmd] ?? '1') == '1') ? 'selected' : '' }}>Enabled</option>
                                        <option value="0" {{ (($data['cron_status'][$cmd] ?? '1') == '0') ? 'selected' : '' }}>Disabled</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Day</label>
                                    <select class="form-control form-select" name="cron_send_day[{{$cmd}}]">
                                        <option value="">— Select Day —</option>
                                        @foreach($sendDayOptions as $dayVal => $dayLabel)
                                        <option value="{{ $dayVal }}" {{ (($data['cron_send_day'][$cmd] ?? '') == $dayVal) ? 'selected' : '' }}>{{ $dayLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Time</label>
                                    <select class="form-control form-select" name="cron_send_time[{{$cmd}}]">
                                        <option value="">— Select Time —</option>
                                        @foreach($sendTimeOptions as $opt)
                                        <option value="{{ $opt }}" {{ (($data['cron_send_time'][$cmd] ?? '') == $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3 d-flex align-items-end">
                                    <button type="button"
                                        class="btn btn-primary mt-2 btn-save-cron-schedule"
                                        data-cmd="{{ $cmd }}">
                                        <i class="fa fa-save me-1"></i> Save
                                    </button>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->
                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_9" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Select Default Calendar</h2>
                    </div>
                    <!--end::Header-->
                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_9" class="fs-6 ps-4 collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <select class="form-control form-control-lg form-control-solid select2 xero_default_calendar">
                                            <option value="">No Default</option>
                                        @foreach($xero_calendars as $calendar)
                                            <option value="{{ $calendar['id'] }}" {{ $calendar['is_default'] === 1 ? 'selected' : '' }}>{{$calendar['calendar_type'] . " : " . (ucwords(strtolower($calendar['calendar_type'])) . ' ending ' . date('d M Y', strtotime($calendar['payment_date']))) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->

                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_6" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Update Pay Periods</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_6" class="fs-6 ps-4 collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <!--begin::Group-->
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <!-- Add the button for fetching calendars -->
                                    <a href="{{ route('settings.xero.payperiods') }}"
                                        class="btn btn-info btn-large mt-4">
                                        Update Pay Periods
                                    </a>
                                </div>
                            </div>
                            @php $cmd = 'xero:pay_periods'; @endphp
                            <div class="form-group row mt-4">
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">CRON Status</label>
                                    <select class="form-control form-select" name="cron_status[{{$cmd}}]">
                                        <option value="1" {{ (($data['cron_status'][$cmd] ?? '1') == '1') ? 'selected' : '' }}>Enabled</option>
                                        <option value="0" {{ (($data['cron_status'][$cmd] ?? '1') == '0') ? 'selected' : '' }}>Disabled</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Day</label>
                                    <select class="form-control form-select" name="cron_send_day[{{$cmd}}]">
                                        <option value="">— Select Day —</option>
                                        @foreach($sendDayOptions as $dayVal => $dayLabel)
                                        <option value="{{ $dayVal }}" {{ (($data['cron_send_day'][$cmd] ?? '') == $dayVal) ? 'selected' : '' }}>{{ $dayLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Time</label>
                                    <select class="form-control form-select" name="cron_send_time[{{$cmd}}]">
                                        <option value="">— Select Time —</option>
                                        @foreach($sendTimeOptions as $opt)
                                        <option value="{{ $opt }}" {{ (($data['cron_send_time'][$cmd] ?? '') == $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3 d-flex align-items-end">
                                    <button type="button"
                                        class="btn btn-primary mt-2 btn-save-cron-schedule"
                                        data-cmd="{{ $cmd }}">
                                        <i class="fa fa-save me-1"></i> Save
                                    </button>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->

                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_7" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Fetch Employee Details From Xero</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_7" class="fs-6 collapse"
                        data-bs-parent="#kt_accordion_2" style="white-space: nowrap;">
                        <div class="card-body pl-12">
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <a href="{{ route('settings.xero.fetchEmployeeDetails') }}" class="btn btn-info btn-large mt-4">
                                        Fetch Employee Details
                                    </a>
                                </div>
                            </div>
                            <!--begin::Group-->
                            @php $cmd = 'xero:refresh_users'; @endphp
                            <div class="form-group row mt-4">
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">CRON Status</label>
                                    <select class="form-control form-select" name="cron_status[{{$cmd}}]">
                                        <option value="1" {{ (($data['cron_status'][$cmd] ?? '1') == '1') ? 'selected' : '' }}>Enabled</option>
                                        <option value="0" {{ (($data['cron_status'][$cmd] ?? '1') == '0') ? 'selected' : '' }}>Disabled</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Day</label>
                                    <select class="form-control form-select" name="cron_send_day[{{$cmd}}]">
                                        <option value="">— Select Day —</option>
                                        @foreach($sendDayOptions as $dayVal => $dayLabel)
                                        <option value="{{ $dayVal }}" {{ (($data['cron_send_day'][$cmd] ?? '') == $dayVal) ? 'selected' : '' }}>{{ $dayLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Time</label>
                                    <select class="form-control form-select" name="cron_send_time[{{$cmd}}]">
                                        <option value="">— Select Time —</option>
                                        @foreach($sendTimeOptions as $opt)
                                        <option value="{{ $opt }}" {{ (($data['cron_send_time'][$cmd] ?? '') == $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3 d-flex align-items-end">
                                    <button type="button"
                                        class="btn btn-primary mt-2 btn-save-cron-schedule"
                                        data-cmd="{{ $cmd }}">
                                        <i class="fa fa-save me-1"></i> Save
                                    </button>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->

                <!--begin::Item-->
                <div class="mb-5">
                    <!--begin::Header-->
                    <div class="accordion-header py-3 d-flex collapsed" data-bs-toggle="collapse"
                        data-bs-target="#kt_accordion_2_item_8" aria-expanded="false">
                        <span class="svg-icon svg-icon-primary">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                                height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none"
                                    fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                    <path
                                        d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
                                        fill="#000000" fill-rule="nonzero"></path>
                                    <path
                                        d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3"
                                        transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) ">
                                    </path>
                                </g>
                            </svg>
                        </span>
                        <h2 class="fw-semibold mb-0 ms-4">Fetch Leave Balance From Xero</h2>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_accordion_2_item_8" class="fs-6  collapse"
                        data-bs-parent="#kt_accordion_2" style="">
                        <div class="card-body pl-12">
                            <div class="form-group row">
                                <div class="col-xl-8 col-lg-8 col-md-4 col-sm-12 col-xs-12">
                                    <a href="{{ route('settings.xero.fetchLeaveDetails') }}" class="btn btn-info btn-large mt-4">
                                        Fetch Leave Balance
                                    </a>
                                </div>
                            </div>
                            <!--begin::Group-->
                            @php $cmd = 'xero:refresh_leaves'; @endphp
                            <div class="form-group row mt-4">
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">CRON Status</label>
                                    <select class="form-control form-select" name="cron_status[{{$cmd}}]">
                                        <option value="1" {{ (($data['cron_status'][$cmd] ?? '1') == '1') ? 'selected' : '' }}>Enabled</option>
                                        <option value="0" {{ (($data['cron_status'][$cmd] ?? '1') == '0') ? 'selected' : '' }}>Disabled</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Day</label>
                                    <select class="form-control form-select" name="cron_send_day[{{$cmd}}]">
                                        <option value="">— Select Day —</option>
                                        @foreach($sendDayOptions as $dayVal => $dayLabel)
                                        <option value="{{ $dayVal }}" {{ (($data['cron_send_day'][$cmd] ?? '') == $dayVal) ? 'selected' : '' }}>{{ $dayLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3">
                                    <label class="col-form-label fw-bold">Select Time</label>
                                    <select class="form-control form-select" name="cron_send_time[{{$cmd}}]">
                                        <option value="">— Select Time —</option>
                                        @foreach($sendTimeOptions as $opt)
                                        <option value="{{ $opt }}" {{ (($data['cron_send_time'][$cmd] ?? '') == $opt) ? 'selected' : '' }}>{{ $opt }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-md-3 d-flex align-items-end">
                                    <button type="button"
                                        class="btn btn-primary mt-2 btn-save-cron-schedule"
                                        data-cmd="{{ $cmd }}">
                                        <i class="fa fa-save me-1"></i> Save
                                    </button>
                                </div>
                            </div>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::Item-->
            @endif

        </div>
        <!--end::Accordion-->
    </div>
</div>