@extends('layouts.app')

@section('title', 'Data Siswa | PELANGI BERSINAR')
@section('page-title', 'Data Siswa')

@push('styles')

<style>

.siswa-page {
    --ungu: #8D1878;
    --ungu-gelap: #6F1767;
    --magenta: #B52293;
    --kuning: #FFE72C;
    --biru: #19A9D2;
    --hijau: #67B646;
    --merah: #EF233C;

    --text: #351D34;
    --muted: #857783;
    --border: #EEE4EC;
    --soft: #FBF8FB;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 18px;

    margin-bottom: 22px;

    flex-wrap: wrap;
}

.heading-left {
    display: flex;
    align-items: center;
    gap: 13px;
}

.heading-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: var(--ungu);

    background:
        linear-gradient(
            135deg,
            rgba(141,24,120,.10),
            rgba(181,34,147,.05)
        );
}

.heading-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-heading h1 {
    margin: 0;

    font-size: 25px;
    font-weight: 900;

    color: var(--ungu);
}

.page-heading p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}


/* =========================================================
   BUTTON IMPORT
========================================================= */

.btn-import {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 11px 17px;

    border:
        1px solid
        #E4D7E1;

    border-radius: 11px;

    background: #FFFFFF;

    color: var(--ungu);

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.btn-import:hover {
    background: #FFF8FD;

    border-color: #CFAFC8;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(141,24,120,.08);
}

.btn-import svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   BUTTON ADD
========================================================= */

.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    text-decoration: none;

    border: 0;

    padding: 12px 18px;

    border-radius: 11px;

    cursor: pointer;

    color: white;

    font-weight: 800;
    font-size: 13px;

    background:
        linear-gradient(
            135deg,
            var(--ungu),
            var(--magenta)
        );

    box-shadow:
        0 8px 20px rgba(141,24,120,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.btn-add:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(141,24,120,.23);
}

.btn-add svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;

    margin-bottom: 20px;
}

.summary-card {
    position: relative;

    overflow: hidden;

    background: white;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    padding: 18px;

    min-height: 116px;
}

.summary-card::after {
    content: "";

    position: absolute;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    top: -28px;
    right: -24px;

    background: var(--card-color);

    opacity: .08;
}

.summary-card.purple {
    --card-color: var(--ungu);
}

.summary-card.blue {
    --card-color: var(--biru);
}

.summary-card.pink {
    --card-color: var(--magenta);
}

.summary-card.green {
    --card-color: var(--hijau);
}

.summary-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: var(--card-color);

    margin-bottom: 10px;
}

.summary-card.purple .summary-icon {
    background: #F6E9F3;
}

.summary-card.blue .summary-icon {
    background: #E8F7FB;
}

.summary-card.pink .summary-icon {
    background: #F9EAF5;
}

.summary-card.green .summary-icon {
    background: #EDF7E9;
}

.summary-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-number {
    font-size: 26px;
    font-weight: 900;

    color: var(--text);
}

.summary-label {
    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.main-card {
    background: white;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 6px 22px rgba(46,31,47,.04);
}

.card-header {
    padding: 19px 20px;

    border-bottom:
        1px solid
        var(--border);
}

.card-header h2 {
    margin: 0 0 4px;

    color: var(--ungu);

    font-size: 18px;
}

.card-header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   FILTER
========================================================= */

.filter-form {
    display: grid;

    grid-template-columns:
        1fr 190px 160px auto;

    gap: 10px;

    padding: 15px 20px;

    background: #FFF9FD;

    border-bottom:
        1px solid
        var(--border);
}

.form-control {
    width: 100%;

    height: 43px;

    border:
        1px solid
        #E6DCE5;

    border-radius: 10px;

    padding: 0 13px;

    outline: none;

    background: white;

    color: var(--text);

    font-size: 13px;

    transition: .18s ease;
}

.form-control:focus {
    border-color:
        var(--magenta);

    box-shadow:
        0 0 0 3px rgba(181,34,147,.07);
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;

    border-radius: 10px;

    padding: 0 18px;

    cursor: pointer;

    color: white;

    font-weight: 800;

    background:
        var(--ungu);
}

.btn-filter svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   TABLE
========================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.siswa-table {
    width: 100%;

    min-width: 1150px;

    border-collapse: collapse;
}

.siswa-table th {
    padding: 13px 14px;

    text-align: left;

    background: #FAF7FA;

    color: #715D6E;

    font-size: 10px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .3px;

    border-bottom:
        1px solid
        var(--border);
}

.siswa-table td {
    padding: 13px 14px;

    border-bottom:
        1px solid
        #F1EAF0;

    font-size: 13px;

    vertical-align: middle;
}

.siswa-table tbody tr {
    transition: background .15s ease;
}

.siswa-table tbody tr:hover {
    background: #FFFBFE;
}

.nama {
    font-weight: 800;

    color: var(--text);
}

.nisn {
    font-family:
        "Courier New",
        monospace;

    font-weight: 800;

    color: var(--ungu);

    letter-spacing: .2px;
}

.no-induk {
    color: #675565;
}


/* =========================================================
   BADGES
========================================================= */

.badge-kelas {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 34px;

    padding: 5px 9px;

    border-radius: 20px;

    background: #F5E7F2;

    color: var(--ungu);

    font-weight: 800;

    font-size: 11px;
}

.badge-jk {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 27px;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;
}

.badge-l {
    background: #E6F6FB;

    color: #087FA2;
}

.badge-p {
    background: #F9E7F4;

    color: #A32387;
}

.status {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 800;
}

.status::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;
}

.status-active {
    background: #EAF7E6;

    color: #428A2E;
}

.status-active::before {
    background: #67B646;
}

.status-off {
    background: #FDE7EA;

    color: #BB2434;
}

.status-off::before {
    background: #EF233C;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.action-buttons {
    display: flex;
    align-items: center;

    gap: 6px;
}

.btn-action {
    width: 32px;
    height: 32px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        #E7DCE5;

    border-radius: 8px;

    background: white;

    cursor: pointer;

    color: #675565;

    text-decoration: none;

    transition:
        .18s ease;
}

.btn-action svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-view:hover {
    color: var(--biru);

    border-color:
        rgba(25,169,210,.35);

    background:
        rgba(25,169,210,.06);
}

.btn-edit:hover {
    color: var(--ungu);

    border-color:
        rgba(141,24,120,.30);

    background:
        rgba(141,24,120,.06);
}


/* =========================================================
   ALERT
========================================================= */

.alert-success {
    margin-bottom: 18px;

    padding: 13px 15px;

    border-radius: 11px;

    background: #EAF7E6;

    color: #2F7725;

    font-size: 13px;

    font-weight: 700;

    border:
        1px solid #D4ECCF;
}


/* =========================================================
   EMPTY
========================================================= */

.empty {
    padding: 55px 20px;

    text-align: center;
}

.empty-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    color: var(--ungu);

    background:
        #F8EAF5;
}

.empty-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.empty h3 {
    margin: 0 0 5px;

    color: var(--ungu);

    font-size: 17px;
}

.empty p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   PAGINATION
========================================================= */

.pagination-area {
    padding: 16px 20px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:950px) {

    .summary-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .filter-form {
        grid-template-columns:
            1fr;
    }

    .btn-filter {
        height: 43px;
    }
}

@media(max-width:520px) {

    .summary-grid {
        gap: 10px;
    }

    .summary-card {
        padding: 14px;
    }

    .summary-number {
        font-size: 21px;
    }

    .page-heading h1 {
        font-size: 21px;
    }

    .header-actions {
        width: 100%;
    }

    .btn-import,
    .btn-add {
        flex: 1;

        min-width: 0;
    }

    .heading-left {
        align-items: flex-start;
    }

}

</style>

@endpush


@section('content')

<div class="siswa-page">


    @if(session('success'))

        <div class="alert-success">
            {{ session('success') }}
        </div>

    @endif


    <!-- =========================================================
         HEADER
    ========================================================== -->

    <div class="page-heading">

        <div class="heading-left">

            <div class="heading-icon">

                <svg viewBox="0 0 24 24">
                    <path d="m2 10 10-5 10 5-10 5Z"></path>
                    <path d="M6 12.5V17c3.5 2.2 8.5 2.2 12 0v-4.5"></path>
                    <path d="M22 10v6"></path>
                </svg>

            </div>

            <div>

                <h1>
                    Data Siswa
                </h1>

                <p>
                    Master data peserta didik SMP Negeri 1 Asembagus
                </p>

            </div>

        </div>


        <!-- =========================================================
             HEADER ACTIONS
        ========================================================== -->

        <div class="header-actions">


            <a
                href="{{ route('siswa.import') }}"
                class="btn-import"
            >

                <svg viewBox="0 0 24 24">
                    <path d="M12 3v12"></path>
                    <path d="m7 8 5-5 5 5"></path>
                    <path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"></path>
                </svg>

                Import Excel

            </a>


            <a
                href="{{ route('siswa.create') }}"
                class="btn-add"
            >

                <svg viewBox="0 0 24 24">
                    <path d="M12 5v14"></path>
                    <path d="M5 12h14"></path>
                </svg>

                Tambah Siswa

            </a>


        </div>

    </div>


    <!-- =========================================================
         SUMMARY
    ========================================================== -->

    <div class="summary-grid">


        <div class="summary-card purple">

            <div class="summary-icon">

                <svg viewBox="0 0 24 24">
                    <path d="m2 10 10-5 10 5-10 5Z"></path>
                    <path d="M6 12.5V17c3.5 2.2 8.5 2.2 12 0v-4.5"></path>
                    <path d="M22 10v6"></path>
                </svg>

            </div>

            <div class="summary-number">
                {{ number_format($totalSiswa) }}
            </div>

            <div class="summary-label">
                Total Siswa Aktif
            </div>

        </div>


        <div class="summary-card blue">

            <div class="summary-icon">

                <svg viewBox="0 0 24 24">
                    <circle cx="12" cy="7" r="4"></circle>
                    <path d="M5 21v-2a7 7 0 0 1 14 0v2"></path>
                </svg>

            </div>

            <div class="summary-number">
                {{ number_format($totalLaki) }}
            </div>

            <div class="summary-label">
                Laki-laki
            </div>

        </div>


        <div class="summary-card pink">

            <div class="summary-icon">

                <svg viewBox="0 0 24 24">
                    <circle cx="12" cy="7" r="4"></circle>
                    <path d="M5 21v-2a7 7 0 0 1 14 0v2"></path>
                    <path d="M12 14v7"></path>
                    <path d="M9 18h6"></path>
                </svg>

            </div>

            <div class="summary-number">
                {{ number_format($totalPerempuan) }}
            </div>

            <div class="summary-label">
                Perempuan
            </div>

        </div>


        <div class="summary-card green">

            <div class="summary-icon">

                <svg viewBox="0 0 24 24">
                    <path d="M3 21V9l9-6 9 6v12"></path>
                    <path d="M8 21v-6h8v6"></path>
                    <path d="M8 10h.01"></path>
                    <path d="M12 10h.01"></path>
                    <path d="M16 10h.01"></path>
                </svg>

            </div>

            <div class="summary-number">
                {{ number_format($totalRombel) }}
            </div>

            <div class="summary-label">
                Rombongan Belajar
            </div>

        </div>


    </div>


    <!-- =========================================================
         DATA TABLE
    ========================================================== -->

    <div class="main-card">


        <div class="card-header">

            <h2>
                Daftar Peserta Didik
            </h2>

            <p>
                NISN, nomor induk, kelas dan data siswa PELANGI BERSINAR
            </p>

        </div>


        <!-- FILTER -->

        <form
            method="GET"
            action="{{ route('siswa.index') }}"
            class="filter-form"
        >


            <input
                type="text"
                name="q"
                class="form-control"
                value="{{ request('q') }}"
                placeholder="Cari Nama / NISN / No. Induk..."
            >


            <select
                name="kelas"
                class="form-control"
            >

                <option value="">
                    Semua Kelas
                </option>

                @foreach($daftarKelas as $kelas)

                    <option
                        value="{{ $kelas }}"
                        {{ request('kelas') == $kelas ? 'selected' : '' }}
                    >

                        {{ $kelas }}

                    </option>

                @endforeach

            </select>


            <select
                name="status"
                class="form-control"
            >

                <option value="">
                    Semua Status
                </option>

                <option
                    value="aktif"
                    {{ request('status') === 'aktif' ? 'selected' : '' }}
                >
                    Aktif
                </option>

                <option
                    value="nonaktif"
                    {{ request('status') === 'nonaktif' ? 'selected' : '' }}
                >
                    Tidak Aktif
                </option>

            </select>


            <button
                type="submit"
                class="btn-filter"
            >

                <svg viewBox="0 0 24 24">
                    <circle cx="11" cy="11" r="7"></circle>
                    <path d="m20 20-3.5-3.5"></path>
                </svg>

                Cari

            </button>


        </form>


        @if($siswa->count())


            <div class="table-responsive">


                <table class="siswa-table">


                    <thead>

                    <tr>

                        <th>No</th>

                        <th>NISN</th>

                        <th>No. Induk</th>

                        <th>Nama Siswa</th>

                        <th>Kelas</th>

                        <th>JK</th>

                        <th>Nama Ibu</th>

                        <th>No. HP Wali</th>

                        <th>Status</th>

                        <th>Aksi</th>

                    </tr>

                    </thead>


                    <tbody>


                    @foreach($siswa as $item)


                        <tr>


                            <td>
                                {{
                                    $siswa->firstItem()
                                    +
                                    $loop->index
                                }}
                            </td>


                            <td class="nisn">
                                {{ $item->nisn }}
                            </td>


                            <td class="no-induk">
                                {{ $item->no_induk ?: '-' }}
                            </td>


                            <td>
                                <div class="nama">
                                    {{ $item->nama }}
                                </div>
                            </td>


                            <td>

                                <span class="badge-kelas">
                                    {{ $item->kelas ?: '-' }}
                                </span>

                            </td>


                            <td>

                                @if($item->jenis_kelamin === 'L')

                                    <span class="badge-jk badge-l">
                                        L
                                    </span>

                                @else

                                    <span class="badge-jk badge-p">
                                        P
                                    </span>

                                @endif

                            </td>


                            <td>
                                {{ $item->nama_ibu ?: '-' }}
                            </td>


                            <td>
                                {{ $item->no_hp_wali ?: '-' }}
                            </td>


                            <td>

                                @if($item->is_active)

                                    <span class="status status-active">
                                        Aktif
                                    </span>

                                @else

                                    <span class="status status-off">
                                        Tidak Aktif
                                    </span>

                                @endif

                            </td>


                            <td>

                                <div class="action-buttons">


                                    <a
                                        href="{{ route('siswa.show', $item) }}"
                                        class="btn-action btn-view"
                                        title="Lihat Detail"
                                    >

                                        <svg viewBox="0 0 24 24">
                                            <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"></path>
                                            <circle cx="12" cy="12" r="2.5"></circle>
                                        </svg>

                                    </a>


                                    <a
                                        href="{{ route('siswa.edit', $item) }}"
                                        class="btn-action btn-edit"
                                        title="Edit Data"
                                    >

                                        <svg viewBox="0 0 24 24">
                                            <path d="M12 20h9"></path>
                                            <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z"></path>
                                        </svg>

                                    </a>


                                </div>

                            </td>


                        </tr>


                    @endforeach


                    </tbody>


                </table>


            </div>


            <div class="pagination-area">
                {{ $siswa->links() }}
            </div>


        @else


            <div class="empty">

                <div class="empty-icon">

                    <svg viewBox="0 0 24 24">
                        <path d="m2 10 10-5 10 5-10 5Z"></path>
                        <path d="M6 12.5V17c3.5 2.2 8.5 2.2 12 0v-4.5"></path>
                        <path d="M22 10v6"></path>
                    </svg>

                </div>

                <h3>
                    Belum ada data siswa
                </h3>

                <p>
                    Data siswa dapat ditambahkan secara manual
                    atau melalui fitur Import Excel.
                </p>

            </div>


        @endif


    </div>


</div>

@endsection