@extends('layouts.app')

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

@push('styles')

<style>

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

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

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-bottom: 22px;

    flex-wrap: wrap;
}

.detail-header h1 {
    margin: 0;

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

    color: var(--ungu);
}

.detail-header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.detail-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

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

    gap: 7px;

    min-height: 42px;

    padding: 0 15px;

    border-radius: 10px;

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

    text-decoration: none;

    cursor: pointer;
}

.btn-secondary {
    color: var(--ungu);

    background: white;

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

.btn-edit {
    color: white;

    border: 0;

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

.btn svg {
    width: 17px;
    height: 17px;

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

.profile-card {
    background: white;

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

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 18px;
}

.profile-top {
    padding: 24px;

    background:
        linear-gradient(
            135deg,
            #76196B,
            #B52293
        );

    color: white;

    display: flex;
    align-items: center;

    gap: 17px;
}

.profile-avatar {
    width: 62px;
    height: 62px;

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

    border-radius: 18px;

    background:
        rgba(255,255,255,.15);

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

.profile-name {
    font-size: 22px;
    font-weight: 900;
}

.profile-nisn {
    margin-top: 5px;

    font-size: 12px;

    color:
        rgba(255,255,255,.75);
}

.status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-top: 9px;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 800;
}

.status-active {
    color: #285C22;

    background: #EAF7E6;
}

.status-off {
    color: #A52936;

    background: #FDE7EA;
}

.detail-grid {
    display: grid;

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

    gap: 18px;

    padding: 22px;
}

.info-card {
    border:
        1px solid
        var(--border);

    border-radius: 14px;

    overflow: hidden;
}

.info-title {
    padding: 13px 15px;

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

    color: var(--ungu);

    background: #FFF9FD;

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

.info-row {
    display: grid;

    grid-template-columns:
        170px 1fr;

    gap: 12px;

    padding: 11px 15px;

    border-bottom:
        1px solid
        #F4EDF3;

    font-size: 13px;
}

.info-row:last-child {
    border-bottom: 0;
}

.info-label {
    color: var(--muted);

    font-weight: 700;
}

.info-value {
    color: var(--text);

    font-weight: 700;

    word-break: break-word;
}

.status-form {
    margin-top: 18px;

    display: flex;
    justify-content: flex-end;
}

.btn-status {
    border: 0;

    padding: 11px 16px;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 800;
}

.btn-disable {
    color: #A52936;

    background: #FDE7EA;
}

.btn-enable {
    color: #285C22;

    background: #EAF7E6;
}

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

    padding: 13px 15px;

    border-radius: 11px;

    color: #285C22;

    background: #EAF7E6;

    font-size: 13px;
    font-weight: 700;
}

@media(max-width:850px) {

    .detail-grid {
        grid-template-columns: 1fr;
    }

}

@media(max-width:520px) {

    .info-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .detail-actions {
        width: 100%;
    }

    .detail-actions .btn {
        flex: 1;
    }

}

</style>

@endpush


@section('content')

<div class="detail-page">

    @if(session('success'))

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

    @endif


    <div class="detail-header">

        <div>

            <h1>
                Detail Siswa
            </h1>

            <p>
                Informasi lengkap peserta didik
            </p>

        </div>


        <div class="detail-actions">

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

                <svg viewBox="0 0 24 24">
                    <path d="m15 18-6-6 6-6"></path>
                </svg>

                Kembali

            </a>


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

                <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>

                Edit Data

            </a>

        </div>

    </div>


    <div class="profile-card">

        <div class="profile-top">

            <div class="profile-avatar">
                {{ strtoupper(substr($siswa->nama, 0, 1)) }}
            </div>

            <div>

                <div class="profile-name">
                    {{ $siswa->nama }}
                </div>

                <div class="profile-nisn">
                    NISN {{ $siswa->nisn }}
                </div>

                @if($siswa->is_active)

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

                @else

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

                @endif

            </div>

        </div>


        <div class="detail-grid">

            <div class="info-card">

                <div class="info-title">
                    Identitas Peserta Didik
                </div>

                <div class="info-row">

                    <div class="info-label">
                        NISN
                    </div>

                    <div class="info-value">
                        {{ $siswa->nisn }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Nomor Induk
                    </div>

                    <div class="info-value">
                        {{ $siswa->no_induk ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Nama Lengkap
                    </div>

                    <div class="info-value">
                        {{ $siswa->nama }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Jenis Kelamin
                    </div>

                    <div class="info-value">
                        {{
                            $siswa->jenis_kelamin === 'L'
                                ? 'Laki-laki'
                                : 'Perempuan'
                        }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Kelas
                    </div>

                    <div class="info-value">
                        {{ $siswa->kelas ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Tempat Lahir
                    </div>

                    <div class="info-value">
                        {{ $siswa->tempat_lahir ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Tanggal Lahir
                    </div>

                    <div class="info-value">

                        @if($siswa->tanggal_lahir)

                            {{
                                $siswa->tanggal_lahir
                                    ->format('d-m-Y')
                            }}

                        @else

                            -

                        @endif

                    </div>

                </div>

            </div>


            <div class="info-card">

                <div class="info-title">
                    Orang Tua / Wali
                </div>

                <div class="info-row">

                    <div class="info-label">
                        Nama Ayah
                    </div>

                    <div class="info-value">
                        {{ $siswa->nama_ayah ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Nama Ibu
                    </div>

                    <div class="info-value">
                        {{ $siswa->nama_ibu ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        No. HP / WhatsApp Wali
                    </div>

                    <div class="info-value">
                        {{ $siswa->no_hp_wali ?: '-' }}
                    </div>

                </div>

                <div class="info-row">

                    <div class="info-label">
                        Alamat
                    </div>

                    <div class="info-value">
                        {{ $siswa->alamat ?: '-' }}
                    </div>

                </div>

            </div>

        </div>

    </div>


    <form
        method="POST"
        action="{{ route('siswa.status', $siswa) }}"
        class="status-form"
        onsubmit="return confirm('Yakin ingin mengubah status siswa ini?')"
    >

        @csrf
        @method('PATCH')

        @if($siswa->is_active)

            <button
                type="submit"
                class="btn-status btn-disable"
            >
                Nonaktifkan Siswa
            </button>

        @else

            <button
                type="submit"
                class="btn-status btn-enable"
            >
                Aktifkan Kembali
            </button>

        @endif

    </form>

</div>

@endsection