@extends('layouts.main')

@section('css')
<!-- Mengimpor Font Poppins untuk Tipografi Modern -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
    /* Menerapkan Font Secara Global untuk Halaman Ini */
    body, .content, h1, h2, h3, h4, h5, h6, p, span, th, td, button, a {
        font-family: 'Poppins', sans-serif !important;
    }

    /* Kustomisasi Card Utama (Gaya Melayang / Soft Shadow) */
    .card-custom {
        border-radius: 16px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    /* Kustomisasi Header Tabel (Gradasi Modern Biru-Indigo) */
    .table-header-custom {
        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    }
    
    /* Memaksa semua teks di dalam Header Tabel menjadi putih terang */
    .table-header-custom th,
    .table-header-custom th span,
    .table-header-custom th a {
        border-top: none !important;
        font-weight: 700 !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 0.85rem;
        padding: 16px 15px !important;
        vertical-align: middle;
        color: #ffffff !important; 
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Ikon Khusus Header Tabel (Warna Ice Blue) */
    .th-icon {
        color: #e0e7ff !important; 
        margin-right: 8px;
        font-size: 1.05rem;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    }

    /* Styling Isi Tabel */
    .table > tbody > tr > td {
        vertical-align: middle;
        padding: 12px 15px;
        color: #475569;
        font-size: 0.9rem;
        font-weight: 500;
        border-bottom: 1px solid #f1f5f9;
        transition: background-color 0.2s ease;
    }
    .table > tbody > tr:hover > td {
        background-color: #f8fafc;
        color: #1e293b;
    }

    /* Tombol Navigasi Atas (Pill / Kapsul) */
    .btn-rounded {
        border-radius: 50px;
        padding: 8px 18px;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
    }
    .btn-rounded:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

    /* Badge Jurusan Header (TBSM, TKJ, Farmasi) */
    .jurusan-badge-container {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    .jurusan-pill {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #334155;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 6px 16px;
        border-radius: 50px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }
    .jurusan-pill i {
        font-size: 1rem;
    }
    .jurusan-pill:hover {
        transform: translateY(-3px);
        border-color: #3b82f6;
        color: #3b82f6;
        box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15);
    }

    /* ========================================================
        DESAIN TOMBOL AKSI MODERN DATATABLES (PASTEL & BAYANGAN)
        ======================================================== */
    .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        cursor: pointer;
    }
    .btn-action i {
        margin-right: 5px;
        font-size: 0.9rem;
    }
    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    .btn-detail { background-color: #e0f8f1 !important; color: #059669 !important; }
    .btn-detail:hover { background-color: #10b981 !important; color: #ffffff !important; }
    .btn-edit { background-color: #fffbeb !important; color: #d97706 !important; }
    .btn-edit:hover { background-color: #f59e0b !important; color: #ffffff !important; }
    .btn-delete { background-color: #fef2f2 !important; color: #dc2626 !important; }
    .btn-delete:hover { background-color: #ef4444 !important; color: #ffffff !important; }

    @media (max-width: 768px) {
        .btn-action .btn-text { display: none; }
        .btn-action i { margin-right: 0; }
        .btn-action { padding: 6px 10px; }
    }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header pt-4 pb-2">
  <div class="container-fluid">
    <div class="row mb-3 align-items-center">
      <div class="col-sm-12">
        @can('admin')
          <h3 class="m-0 fw-bold text-gray-800 d-flex align-items-center gap-2" style="letter-spacing: -0.5px;">
            <i class="fas fa-users text-primary"></i> Data Peserta Didik SMK IN 1
          </h3>
        @else
          <h3 class="m-0 fw-bold text-gray-800 d-flex align-items-center gap-2">
            <a href="{{ route('kelas.index') }}" class="float-xs-start mr-3 btn btn-light shadow-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height:40px;" onclick="history.back()">
              <i class="fas fa-arrow-left text-primary"></i>
            </a>
            <i class="fas fa-user-graduate text-primary me-2"></i> Peserta Didik
          </h3>
        @endcan

        <!-- Logo / Badge Tiga Jurusan -->
        <div class="jurusan-badge-container">
          <span class="jurusan-pill"><i class="fas fa-motorcycle text-danger"></i> TBSM</span>
          <span class="jurusan-pill"><i class="fas fa-network-wired text-primary"></i> TKJ</span>
          <span class="jurusan-pill"><i class="fas fa-pills text-success"></i> Farmasi</span>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card card-custom">
          
          <div class="card-header bg-white py-4 border-bottom-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                
                {{-- Aksi Kiri --}}
                <div class="mb-2 mb-md-0 d-flex gap-2">
                  <a href="{{ route('siswa.create') }}" class="btn btn-primary shadow-sm btn-rounded d-flex align-items-center" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border:none;">
                    <i class="fa fa-plus-circle mr-2"></i> Tambah <span class="d-none d-sm-inline ml-1">Siswa</span>
                  </a>
                  <button class="btn btn-outline-danger shadow-sm btn-rounded d-flex align-items-center" data-toggle="modal" data-target="#modal-delete-siswa">
                    <i class="fa fa-trash-alt mr-2"></i> <span class="d-none d-sm-inline">Hapus Terpilih</span> <span class="d-sm-none">Tandai</span>
                  </button>
                </div>

                {{-- Aksi Kanan --}}
                <div class="d-flex gap-2">
                  <button class="btn btn-outline-info shadow-sm btn-rounded d-flex align-items-center" data-toggle="modal" data-target="#modal-filter">
                    <i class="fa fa-filter mr-2"></i> Filter <span class="d-none d-sm-inline ml-1">Data</span>
                  </button>

                  @can('admin')
                    <button class="btn shadow-sm btn-rounded d-flex align-items-center text-white" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border:none;" data-toggle="modal" data-target="#modal-import">
                      <i class="fas fa-cloud-upload-alt mr-2"></i>
                      Import <span class="d-none d-sm-inline ml-1">Siswa</span>
                    </button>
                  @endcan
                </div>

            </div>
          </div>

          <div class="card-body p-0 pb-3"> 
              <div class="table-responsive px-3">
                <table id="myTable" class="table table-hover mb-0 align-middle w-100" style="border: 1px solid #e2e8f0; border-radius: 12px; border-collapse: separate; overflow: hidden;">
                  <thead>
                  <tr class="{{ Auth::user()->dark_mode == '1' ? 'bg-dark text-white' : 'table-header-custom' }}">
                    <th scope="col" class="pl-4 text-center" width="5%"><i class="fas fa-hashtag th-icon"></i> No</th>
                    <th scope="col" style="min-width: 180px"><i class="fas fa-user-graduate th-icon"></i> Peserta Didik</th>
                    <th scope="col"><i class="fas fa-chalkboard th-icon"></i> Rombel</th>
                    <th scope="col"><i class="fas fa-id-card th-icon"></i> NIS/NISN</th>
                    <th scope="col" class="text-center"><i class="fas fa-venus-mars th-icon"></i> Gender</th>
                    <th scope="col" class="text-center"><i class="fas fa-user-check th-icon"></i> Keaktifan</th>
                    <th scope="col" class="pr-4 text-center" width="15%"><i class="fas fa-cogs th-icon"></i> Proses</th>
                  </tr>
                  </thead>
                </table>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@include('pages.siswa._destroymany')
@include('pages.siswa._import')
@include('pages.siswa._filter')
@include('pages.siswa._show')
@include('pages.siswa._delete')

@endsection

@section('js')
<script>
$(document).ready(() => {
    // SETUP CSRF
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // INDEX TABLE
    const tableIndex = $('#myTable').DataTable({
        processing: true,
        serverSide: true, 
        ordering: false,
        ajax: {
            url: "{{ route('siswa.index') }}",
            data: d => {
                d.jk = $('#jk_select').val();
                d.kelas_id = $('#kelas_id_select').val();
                d.is_aktif = $('#is_aktif_select').val();
            },
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: true, searchable: false, className: 'text-center' },
            { data: 'name', name: 'name', className: 'fw-bold text-dark' },
            { data: 'kelas.name', name: 'kelas.name' },
            { data: 'nis-nisn', name: 'nis-nisn' },
            { data: 'jk', name: 'jk', className: 'text-center' },
            { data: 'user.is_aktif', name: 'user.is_aktif', className: 'text-center' },
            { data: 'aksi', name: 'aksi', className: 'text-center' },
        ],
        drawCallback: function() {
            $('[data-toggle="tooltip"]').tooltip();
        }
    });

    // DESTROY TABLE
    const tableDelete = $('#myTableDelete').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        ajax: {
            url: '/siswa/getdestroymany',
            data: d => {
                d.kelas_id = $('#kelas_id_select').val();
            },
        },
        columns: [
            { data: 'hapus', name: 'hapus' },
            { data: 'name', name: 'name' },
            { data: 'kelas.name', name: 'kelas.name' },
            { data: 'nis-nisn', name: 'nis-nisn' },
            { data: 'jk', name: 'jk' },
        ],
    });

    // FILTER
    $('body').on('click', '#filter-button', () => {
        tableIndex.ajax.reload();
        tableDelete.ajax.reload();
        $('#modal-filter').modal('hide');
    });

    // EDIT
    $('body').on('click', '.edit-button', function() {
        showLoader();
        window.location.href = `/siswa/${$(this).data('id')}/edit`;
    });

    // SHOW
    $('body').on('click', '.show-button', function() {
        showLoader();
        const id = $(this).data('id');$.ajax({
            url: `siswa/${id}`,
            type: 'GET',
            success: response => {
                hideLoader();
                $('#modal-show').modal('show');

                $.each(response.result, (field, value) => {
                    let finalValue = value;

                    if (field === 'diterimaditanggal' && value) { 
                        const dateParts = value.split('-');
                        if (dateParts.length === 3) finalValue = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
                    }

                    if (field === 'statusdalamkeluarga' && value) { 
                        const statusMap = { 'AK': 'ANAK KANDUNG', 'AT': 'ANAK TIRI', 'AA': 'ANAK ANGKAT' };
                        finalValue = statusMap[value] || value;
                    }

                    if (field === 'jk') finalValue = (value === 'L') ? 'LAKI-LAKI' : 'PEREMPUAN'; 
                    
                    $(`#show-${field}`).html(finalValue); 
                });

                $('#show-edit-route').data('id', response.result.id);
                if (response.result.kelas) $('#show-kelas-name').html(response.result.kelas.name);
                
                $('#show-user-foto').attr('src', `/img/${response.result.user.foto}`);
                
                const isActive = response.result.user.is_aktif == 1;
                $('#show-user-is_aktif')
                    .removeClass('bg-success bg-danger')
                    .addClass(isActive ? 'bg-success' : 'bg-danger')
                    .html(isActive ? 'AKTIF' : 'NON-AKTIF');

                if(response.result.tanggallahir) {
                   const tglLahirParts = response.result.tanggallahir.split('-');
                   $('#show-ttl').html(`${response.result.tempatlahir}, ${tglLahirParts[2]}-${tglLahirParts[1]}-${tglLahirParts[0]}`);
                }
            }
        });
    });

    // DELETE
    $('body').on('click', '.delete-button', function() {
        showLoader();
        const id = $(this).data('id');

        $.ajax({
            url: `/siswa/${id}/get-name`,
            type: 'GET',
            success: response => {
                hideLoader();
                $('#modal-delete').modal('show');
                $('#delete-siswa-name').html(response.name);

                $('#confirm-delete-button').off('click').on('click', () => {
                    $('#modal-delete').modal('hide');
                    showLoader();
                    $.ajax({
                        url: `/siswa/${id}`,
                        type: 'DELETE',
                        success: delResponse => {
                            hideLoader();
                            toast(delResponse.success);
                            tableIndex.ajax.reload();
                        }
                    });
                });
            }
        });
    });

    // DELETE MANY
    $('#form-delete-many').on('submit', function(e) {
        e.preventDefault();
        showLoaderAtShow();
        
        $.ajax({
            url: '/siswa/postdestroymany',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: response => {
                hideLoaderAtShow();
                if (response.success) {
                    tableIndex.ajax.reload();
                    tableDelete.ajax.reload();
                    toast(response.success);
                } else {
                    failedToast(response.failed);
                }
            }
        });
    });

    $('#confirm-import-button').on('click', () => {
        if ($('#import-confirm').prop('checked') && $('#file').val()) {
            showLoader();
            $('#modal-import').modal('hide');
        }
    });

    $('#modal-show').on('hidden.bs.modal', () => {
        $('.show_value').html('');$('#show-user-is_aktif').removeClass('bg-danger bg-success');
    });

    $('#modal-import').on('hidden.bs.modal', () => {
        $('#create-file').val('');
        $('.is-invalid').removeClass('is-invalid');$('.is-valid').removeClass('is-valid');
    });
});

// Toast Functions
const showToast = (type, title, message) => {
    $(document).Toasts('create', {
        class: type === 'success' ? 'bg-success' : 'bg-danger',
        title: title,
        body: message
    });
    setTimeout(() => {
        $(".toast").fadeOut(500, function() {
            $(this).remove();
        });
    }, 4000);
};

const toast = (successMsg) => showToast('success', 'BERHASIL', successMsg);
const failedToast = (failedMsg) => showToast('error', 'GAGAL', failedMsg);
</script>
@endsection