@extends('selva.layout')

@section('title', 'Dashboard')

@section('content')
  <div class="min-h-screen transition-colors duration-300">
    <div class="max-w-full p-6 lg:p-8">

      <div
        x-data="tanggalRange()"
        x-init="init()"
      >
        <div class="mb-4 flex flex-wrap items-center gap-3">

          <select
            class="rounded-lg border px-3 py-2"
            x-model="tipe"
          >
            <option value="tanggal">Tanggal</option>
            <option value="bulan">Bulan</option>
          </select>

          <template x-if="tipe === 'tanggal'">
            <input
              class="w-64 rounded-lg border px-3 py-2"
              type="text"
              x-ref="rangeInput"
              placeholder="Pilih rentang"
              readonly
            >
          </template>

          <template x-if="tipe === 'bulan'">
            <div class="flex gap-2">
              <select
                class="rounded-lg border px-3 py-2"
                x-model="selectedBulan"
              >
                @foreach ($bulanList as $b)
                  <option value="{{ $b['value'] }}">{{ $b['label'] }}</option>
                @endforeach
              </select>

              <select
                class="rounded-lg border px-3 py-2"
                x-model="selectedTahun"
              >
                @foreach ($tahunList as $t)
                  <option value="{{ $t['value'] }}">{{ $t['label'] }}</option>
                @endforeach
              </select>
            </div>
          </template>

          <button
            class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
            @click="applyFilter"
          >
            Filter
          </button>
        </div>
      </div>

      <div class="mb-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        @php
          $statsCards = [
              [
                  'title' => 'Total Pegawai',
                  'value' => '1,234',
                  'change' => '+12%',
                  'icon' => 'fas fa-users',
                  'iconBg' => 'bg-blue-100 dark:bg-blue-900',
                  'iconColor' => 'text-blue-600 dark:text-blue-400',
                  'hoverBorder' => 'hover:border-blue-300 dark:hover:border-blue-500',
              ],
              [
                  'title' => 'Total Pelatihan',
                  'value' => '567',
                  'change' => '+8%',
                  'icon' => 'fas fa-chalkboard-teacher',
                  'iconBg' => 'bg-green-100 dark:bg-green-900',
                  'iconColor' => 'text-green-600 dark:text-green-400',
                  'hoverBorder' => 'hover:border-green-300 dark:hover:border-green-500',
              ],
              [
                  'title' => 'Total Narasumber',
                  'value' => '12.5K',
                  'change' => '+24%',
                  'icon' => 'fas fa-user-tie',
                  'iconBg' => 'bg-purple-100 dark:bg-purple-900',
                  'iconColor' => 'text-purple-600 dark:text-purple-400',
                  'hoverBorder' => 'hover:border-purple-300 dark:hover:border-purple-500',
              ],
              [
                  'title' => 'Total Pangkat',
                  'value' => '$89.2K',
                  'change' => '+18%',
                  'icon' => 'fas fa-medal',
                  'iconBg' => 'bg-orange-100 dark:bg-orange-900',
                  'iconColor' => 'text-orange-600 dark:text-orange-400',
                  'hoverBorder' => 'hover:border-orange-300 dark:hover:border-orange-500',
              ],
          ];
        @endphp

        @foreach ($statsCards as $card)
          <div class="group">
            <div
              class="{{ $card['hoverBorder'] }} h-full rounded-2xl border-2 p-6 shadow-md transition-all duration-200 hover:scale-105 hover:shadow-xl"
              :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
            >
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <p
                    class="mb-2 text-sm font-medium uppercase tracking-wide"
                    :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                  >{{ $card['title'] }}</p>
                  <p
                    class="text-3xl font-bold"
                    :class="darkMode ? 'text-white' : 'text-gray-900'"
                  >
                    {{ $card['value'] }}</p>
                  <div class="mt-3 flex items-center">
                    <span
                      class="rounded-full bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-600 dark:bg-emerald-900 dark:text-emerald-400">{{ $card['change'] }}</span>
                  </div>
                </div>
                <div class="{{ $card['iconBg'] }} rounded-xl p-3">
                  <i class="{{ $card['icon'] }} {{ $card['iconColor'] }} text-xl"></i>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>

      <div
        class="mb-10 rounded-2xl border-2 shadow-md transition-shadow duration-200 hover:shadow-xl"
        :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
      >
        <div
          class="border-b p-6"
          :class="darkMode ? 'border-slate-700' : 'border-gray-100'"
        >
          <div class="flex items-center justify-between">
            <h3
              class="text-lg font-semibold"
              :class="darkMode ? 'text-white' : 'text-gray-900'"
            >Recent Activity
            </h3>
            <button class="text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
              all</button>
          </div>
        </div>
        <div class="p-6">
          <div class="space-y-6">
            @php
              $activities = [
                  [
                      'title' => 'New user registered',
                      'desc' => 'john@example.com joined the platform',
                      'time' => '2h ago',
                      'color' => 'bg-blue-500',
                  ],
                  [
                      'title' => 'New post published',
                      'desc' => '"Getting Started with Laravel" is now live',
                      'time' => '4h ago',
                      'color' => 'bg-green-500',
                  ],
                  [
                      'title' => 'System backup completed',
                      'desc' => 'All data successfully backed up',
                      'time' => '6h ago',
                      'color' => 'bg-purple-500',
                  ],
              ];
            @endphp

            @foreach ($activities as $activity)
              <div class="flex items-start space-x-4">
                <div class="{{ $activity['color'] }} mt-2 h-2 w-2 flex-shrink-0 rounded-full"></div>
                <div class="min-w-0 flex-1">
                  <p
                    class="text-sm font-medium"
                    :class="darkMode ? 'text-white' : 'text-gray-900'"
                  >
                    {{ $activity['title'] }}</p>
                  <p
                    class="mt-1 text-sm"
                    :class="darkMode ? 'text-gray-400' : 'text-gray-500'"
                  >
                    {{ $activity['desc'] }}</p>
                </div>
                <span
                  class="flex-shrink-0 text-xs font-medium"
                  :class="darkMode ? 'text-gray-500' : 'text-gray-400'"
                >{{ $activity['time'] }}</span>
              </div>
            @endforeach
          </div>
        </div>
      </div>

      <div
        class="mb-10 rounded-2xl border-2 p-6 shadow-md transition-shadow duration-200 hover:shadow-xl"
        :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
      >
        <h3
          class="mb-6 text-lg font-semibold"
          :class="darkMode ? 'text-white' : 'text-gray-900'"
        >Pelatihan
          Teknis</h3>
        <div
          class="h-[320px] w-full"
          id="chartPelatihanTeknis"
        ></div>
      </div>

      <div class="mb-10 grid grid-cols-1 gap-8 lg:grid-cols-2">
        <div
          class="rounded-2xl border-2 p-6 shadow-md transition-shadow duration-200 hover:shadow-xl"
          :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
        >
          <h3
            class="mb-6 text-lg font-semibold"
            :class="darkMode ? 'text-white' : 'text-gray-900'"
          >Jumlah
            Peserta</h3>
          <div
            class="h-[320px] w-full"
            id="chartJumlahPeserta"
          ></div>
        </div>
        <div
          class="rounded-2xl border-2 p-6 shadow-md transition-shadow duration-200 hover:shadow-xl"
          :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
        >
          <h3
            class="mb-6 text-lg font-semibold"
            :class="darkMode ? 'text-white' : 'text-gray-900'"
          >Jumlah Diklat
          </h3>
          <div
            class="h-[320px] w-full"
            id="chartJumlahPelatihan"
          ></div>
        </div>
      </div>

      <div
        class="rounded-2xl border-2 p-6 shadow-md transition-shadow duration-200 hover:shadow-xl"
        :class="darkMode ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200'"
      >
        <h3
          class="mb-6 text-lg font-semibold"
          :class="darkMode ? 'text-white' : 'text-gray-900'"
        >Satuan Kerja</h3>
        <div
          class="h-[450px] w-full"
          id="chartSatuanKerja"
        ></div>
      </div>
    </div>
  </div>

  <div
    x-data="roleSelector"
    x-init="fetchRoles()"
  >
    <div
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
      x-show="showRoleModal"
      x-transition.opacity
    >
      <div
        class="w-full max-w-lg transform rounded-2xl bg-white p-6 shadow-xl transition-all dark:bg-slate-800"
        @click.away="closeModal"
      >
        <div class="flex items-center justify-between border-b pb-3 dark:border-slate-700">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Pilih Role</h3>
          <button
            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
            @click="closeModal"
          >
            ✕
          </button>
        </div>

        <div class="mt-4">
          <table class="min-w-full rounded-lg border border-gray-200 text-sm dark:border-slate-700">
            <thead class="bg-gray-50 dark:bg-slate-700">
              <tr>
                <th class="px-3 py-2 text-left">No</th>
                <th class="px-3 py-2 text-left">Unit</th>
                <th class="px-3 py-2 text-left">Role</th>
                <th class="px-3 py-2 text-left">Aksi</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-slate-700">
              <template
                x-for="(role, index) in roles"
                :key="role.role_id"
              >
                <tr>
                  <td
                    class="px-3 py-2"
                    x-text="index + 1"
                  ></td>
                  <td
                    class="px-3 py-2"
                    x-text="role.unit_name"
                  ></td>
                  <td
                    class="px-3 py-2"
                    x-text="role.role_name"
                  ></td>
                  <td class="px-3 py-2">
                    <button
                      class="rounded bg-blue-100 px-3 py-1 text-xs text-blue-700 hover:bg-blue-200"
                      @click="selectRole(role)"
                    >
                      Pilih
                    </button>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('style')
  @vite(['resources/js/selva/dashboard/import.js'])
@endpush

@push('script')
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      let chartPelatihanTeknis;

      const optionsPelatihan = {
        chart: {
          type: 'area',
          height: 350,
          toolbar: {
            show: false
          }
        },
        series: [{
          name: "Jumlah",
          data: []
        }],
        xaxis: {
          categories: [],
          labels: {
            rotate: -45
          }
        },
        stroke: {
          curve: 'smooth',
          width: 3
        },
        dataLabels: {
          enabled: false
        },
        colors: ['#2563EB'],
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 0.4,
            opacityFrom: 0.5,
            opacityTo: 0.1
          }
        }
      };

      chartPelatihanTeknis = new ApexCharts(document.querySelector("#chartPelatihanTeknis"), optionsPelatihan);
      chartPelatihanTeknis.render();

      function getDefaultDates() {
        const now = new Date();
        const start = new Date(now.getFullYear(), 0, 1).toISOString().split('T')[0];
        const end = new Date(now.getFullYear(), 11, 31).toISOString().split('T')[0];
        return {
          start,
          end
        };
      }

      window.fetchPelatihanTeknis = async function(start, end, jenisId, year) {
        try {

          const jenisId = document.getElementById('jenisDiklat')?.value || "";
          const year = document.getElementById('year')?.value || "";

          const params = new URLSearchParams({
            start,
            end,
            ...(jenisId && {
              "jenis-diklat-id": jenisId
            }),
            ...(year && {
              year
            }),
          });

          const url = "{{ route('selva.dashboard.get.data.pelatihan.teknis') }}?" + params.toString();

          const response = await fetch(url);
          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

          const json = await response.json();

          const labels = json.data.map(item => item.nama);
          const values = json.data.map(item => item.total_diklat);

          chartPelatihanTeknis.updateOptions({
            xaxis: {
              categories: labels
            }
          });

          chartPelatihanTeknis.updateSeries([{
            name: "Jumlah",
            data: values
          }]);
        } catch (error) {
          console.error("❌ Gagal ambil data pelatihan teknis:", error);
        }
      }

      const {
        start,
        end
      } = getDefaultDates();
      fetchPelatihanTeknis(start, end);
      fetchJumlahPeserta(start, end);
      fetchJumlahPelatihan(start, end);

      document.getElementById('filterBtn').addEventListener('click', () => {
        const startInput = document.getElementById('startDate')?.value || start;
        const endInput = document.getElementById('endDate')?.value || end;

        fetchPelatihanTeknis(startInput, endInput);
        fetchJumlahPeserta(startInput, endInput);
        fetchJumlahPelatihan(startInput, endInput);
      });
    });

    document.addEventListener('DOMContentLoaded', () => {
      let chartJumlahPeserta;

      const optionsJumlahPeserta = {
        chart: {
          type: 'area',
          height: 350,
          toolbar: {
            show: false
          }
        },
        series: [{
          name: "Jumlah",
          data: []
        }],
        xaxis: {
          categories: [],
          labels: {
            rotate: -45
          }
        },
        stroke: {
          curve: 'smooth',
          width: 3
        },
        dataLabels: {
          enabled: false
        },
        colors: ['#2563EB'],
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 0.4,
            opacityFrom: 0.5,
            opacityTo: 0.1
          }
        }
      };

      chartJumlahPeserta = new ApexCharts(
        document.querySelector("#chartJumlahPeserta"),
        optionsJumlahPeserta
      );
      chartJumlahPeserta.render();

      function getDefaultDates() {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth(), 2)
          .toISOString()
          .split('T')[0];
        const end = new Date()
          .toISOString()
          .split('T')[0];
        return {
          start,
          end
        };
      }

      window.fetchJumlahPesertaPerTanggal = async function(start, end) {
        try {

          const jenisId = document.getElementById('jenisDiklat')?.value || "";
          const year = document.getElementById('year')?.value || "";

          const params = new URLSearchParams({
            start,
            end,
            ...(jenisId && {
              "jenis-diklat-id": jenisId
            }),
            ...(year && {
              year
            })
          });

          const url = "{{ route('selva.dashboard.get.data.jumlah.peserta') }}?" + params.toString();

          const response = await fetch(url);
          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

          const json = await response.json();

          const labels = json.data.map(item => item.nama);
          const values = json.data.map(item => item.total_peserta);

          chartJumlahPeserta.updateOptions({
            xaxis: {
              categories: labels
            }
          });
          chartJumlahPeserta.updateSeries([{
            name: "Jumlah",
            data: values
          }]);

        } catch (error) {
          console.error("❌ Gagal ambil data jumlah peserta:", error);
        }
      }

      const {
        start,
        end
      } = getDefaultDates();
      fetchJumlahPesertaPerTanggal(start, end);

      document.getElementById('filterBtn').addEventListener('click', () => {
        const startInput = document.getElementById('startDate')?.value || start;
        const endInput = document.getElementById('endDate')?.value || end;
        fetchJumlahPesertaPerTanggal(startInput, endInput);
      });
    });

    document.addEventListener('DOMContentLoaded', () => {
      let chartJumlahPelatihan;

      const optionsJumlahPeserta = {
        chart: {
          type: 'area',
          height: 350,
          toolbar: {
            show: false
          }
        },
        series: [{
          name: "Jumlah",
          data: []
        }],
        xaxis: {
          categories: [],
          labels: {
            rotate: -45
          }
        },
        stroke: {
          curve: 'smooth',
          width: 3
        },
        dataLabels: {
          enabled: false
        },
        colors: ['#2563EB'],
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 0.4,
            opacityFrom: 0.5,
            opacityTo: 0.1
          }
        }
      };

      chartJumlahPelatihan = new ApexCharts(
        document.querySelector("#chartJumlahPelatihan"),
        optionsJumlahPeserta
      );
      chartJumlahPelatihan.render();

      function getDefaultDates() {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth(), 2)
          .toISOString()
          .split('T')[0];
        const end = new Date()
          .toISOString()
          .split('T')[0];
        return {
          start,
          end
        };
      }

      window.fetchJumlahPelatihanPerTanggal = async function(start, end) {
        try {

          const jenisId = document.getElementById('jenisDiklat')?.value || "";
          const year = document.getElementById('year')?.value || "";

          const params = new URLSearchParams({
            start,
            end,
            ...(jenisId && {
              "jenis-diklat-id": jenisId
            }),
            ...(year && {
              year
            })
          });

          const url = "{{ route('selva.dashboard.get.data.jumlah.pelatihan') }}?" + params.toString();

          const response = await fetch(url);
          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

          const json = await response.json();

          const labels = json.data.map(item => item.nama);
          const values = json.data.map(item => item.total_pelatihan);

          chartJumlahPelatihan.updateOptions({
            xaxis: {
              categories: labels
            }
          });
          chartJumlahPelatihan.updateSeries([{
            name: "Jumlah",
            data: values
          }]);

        } catch (error) {
          console.error("❌ Gagal ambil data jumlah peserta:", error);
        }
      }

      const {
        start,
        end
      } = getDefaultDates();
      fetchJumlahPelatihanPerTanggal(start, end);

      document.getElementById('filterBtn').addEventListener('click', () => {
        const startInput = document.getElementById('startDate')?.value || start;
        const endInput = document.getElementById('endDate')?.value || end;
        fetchJumlahPelatihanPerTanggal(startInput, endInput);
      });
    });

    document.addEventListener('DOMContentLoaded', () => {
      let chartSatuanKerja;

      const optionsSatuanKerja = {
        chart: {
          type: 'bar',
          height: 400,
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: true,
            borderRadius: 6,
            columnWidth: '60%',
            dataLabels: {
              position: 'top'
            }
          }
        },
        dataLabels: {
          enabled: true,
          offsetY: -15,
          style: {
            fontSize: '12px',
            colors: ['#374151']
          }
        },
        series: [{
          name: "Jumlah Peserta",
          data: []
        }],
        xaxis: {
          categories: [],
          labels: {
            rotate: -45,
            style: {
              fontSize: '11px'
            }
          }
        },
        yaxis: {
          labels: {
            style: {
              fontSize: '11px'
            }
          }
        },
        colors: ['#8B5CF6'],
        tooltip: {
          theme: 'dark',
          y: {
            formatter: (val) => `${val} Peserta`
          }
        }
      };

      chartSatuanKerja = new ApexCharts(
        document.querySelector("#chartSatuanKerja"),
        optionsSatuanKerja
      );
      chartSatuanKerja.render();

      function getDefaultDates() {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth(), 2)
          .toISOString()
          .split('T')[0];
        const end = new Date()
          .toISOString()
          .split('T')[0];
        return {
          start,
          end
        };
      }

      window.fetchSatuanKerjaPerTanggal = async function(start, end) {
        try {
          const jenisId = document.getElementById('jenisDiklat')?.value || "";
          const year = document.getElementById('year')?.value || "";

          const params = new URLSearchParams({
            start,
            end,
            ...(jenisId && {
              "jenis-diklat-id": jenisId
            }),
            ...(year && {
              year
            })
          });

          const url = "{{ route('selva.dashboard.get.data.satuan.kerja') }}?" + params.toString();

          const response = await fetch(url);
          if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

          const json = await response.json();

          const labels = json.data.map(item => item.tempat_penyelenggara_nama);
          const values = json.data.map(item => item.total_peserta);

          chartSatuanKerja.updateOptions({
            xaxis: {
              categories: labels
            }
          });
          chartSatuanKerja.updateSeries([{
            name: "Jumlah Peserta",
            data: values
          }]);

        } catch (error) {
          console.error("❌ Gagal ambil data jumlah peserta:", error);
        }
      }

      const {
        start,
        end
      } = getDefaultDates();
      fetchSatuanKerjaPerTanggal(start, end);

      document.getElementById('filterBtn').addEventListener('click', () => {
        const startInput = document.getElementById('startDate')?.value || start;
        const endInput = document.getElementById('endDate')?.value || end;
        fetchSatuanKerjaPerTanggal(startInput, endInput);
      });
    });

    document.addEventListener("alpine:init", () => {
      Alpine.data("roleSelector", () => ({
        showRoleModal: false,
        roles: [],
        selectedRoleId: @json(session('selected_role_id')),
        hasRoleInSession: @json(session()->has('selected_role_id')),

        async fetchRoles() {
          try {
            const response = await axios.get("{{ route('selva.user.get.user.role') }}");
            this.roles = response.data.user.roles || [];

            if (this.hasRoleInSession) {
              return;
            }

            if (!this.selectedRoleId && this.roles.length > 0) {
              this.showRoleModal = true;
            }
          } catch (error) {
            console.error("Gagal memuat role:", error);
          }
        },

        selectRole(role) {
          this.selectedRoleId = role.role_id;
          axios.post("{{ route('selva.user.set.role.session') }}", {
              role_id: role.role_id,
            })
            .then(() => {
              window.location.reload();
            })
            .catch(err => console.error("Gagal set session role:", err));

          this.showRoleModal = false;
        },

        closeModal() {
          this.showRoleModal = false;
        },
      }));
    });
  </script>
@endpush