@extends('layouts.app')

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

@push('styles')

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

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

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

    gap: 16px;
    flex-wrap: wrap;

    margin-bottom: 22px;
}

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

.import-header-icon {
    width: 46px;
    height: 46px;

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

    border-radius: 14px;

    color: var(--ungu);
    background: #F7EAF4;
}

.import-header-icon svg {
    width: 24px;
    height: 24px;

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

.import-header h1 {
    margin: 0;

    color: var(--ungu);

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

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

    color: var(--muted);

    font-size: 13px;
}

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

    gap: 7px;

    text-decoration: none;

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

    background: white;
    color: var(--ungu);

    padding: 11px 16px;

    border-radius: 11px;

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

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

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


/* =========================================================
   TEMPLATE DOWNLOAD
========================================================= */

.template-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;

    padding: 16px 18px;

    border: 1px solid #E7DCE5;
    border-radius: 15px;

    background:
        linear-gradient(
            90deg,
            #FFF9FD 0%,
            #FFFFFF 100%
        );
}

.template-info {
    display: flex;
    align-items: center;

    gap: 13px;
}

.template-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    color: #218838;

    background: #EAF7E6;
}

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

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

.template-title {
    color: var(--text);

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

.template-description {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}

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

    gap: 8px;

    flex-shrink: 0;

    text-decoration: none;

    padding: 11px 16px;

    border: 1px solid #CFE8C9;
    border-radius: 10px;

    color: #317D28;

    background: #F1FAEE;

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

    transition: .18s ease;
}

.btn-template:hover {
    color: white;
    background: #67B646;
    border-color: #67B646;
}

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

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


/* =========================================================
   GRID
========================================================= */

.import-grid {
    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    gap: 18px;
}

.import-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 21px;

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

    background:
        linear-gradient(
            90deg,
            #FFF9FD,
            #FFFFFF
        );
}

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

    color: var(--ungu);

    font-size: 18px;
}

.card-header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.card-body {
    padding: 21px;
}


/* =========================================================
   UPLOAD
========================================================= */

.upload-box {
    position: relative;

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

    min-height: 250px;

    padding: 28px;

    text-align: center;

    border: 2px dashed #DFCEDC;
    border-radius: 16px;

    background: #FFFCFE;

    transition: .2s ease;
}

.upload-box:hover {
    border-color: var(--magenta);

    background: #FFF8FD;
}

.upload-icon {
    width: 68px;
    height: 68px;

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

    margin-bottom: 15px;

    border-radius: 20px;

    color: var(--ungu);

    background: #F6E7F2;
}

.upload-icon svg {
    width: 32px;
    height: 32px;

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

.upload-title {
    margin-bottom: 6px;

    color: var(--text);

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

.upload-text {
    margin-bottom: 17px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}

.file-input {
    width: 100%;
    max-width: 450px;

    padding: 11px;

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

    background: white;
}

.file-note {
    margin-top: 9px;

    color: var(--muted);

    font-size: 11px;
}

.action-area {
    margin-top: 18px;

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

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

    gap: 8px;

    border: 0;

    padding: 12px 20px;

    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,.17);
}

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

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


/* =========================================================
   GUIDE
========================================================= */

.guide-list {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.guide-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 12px;

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

    background: #FFFCFE;
}

.guide-number {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border-radius: 9px;

    color: white;

    background: var(--ungu);

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

.guide-content strong {
    display: block;

    margin-bottom: 3px;

    color: var(--text);

    font-size: 12px;
}

.guide-content span {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}

.column-card {
    margin-top: 18px;

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

    overflow: hidden;
}

.column-title {
    padding: 11px 13px;

    color: var(--ungu);

    background: #FFF9FD;

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

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

.column-list {
    padding: 13px;

    display: grid;

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

    gap: 7px;
}

.column-item {
    padding: 7px 9px;

    border-radius: 8px;

    background: #F9F6F8;

    color: #624F60;

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

.required {
    color: var(--merah);
}


/* =========================================================
   ALERTS
========================================================= */

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

    padding: 13px 15px;

    border-radius: 11px;

    color: #A61E31;

    background: #FDE7EA;

    border: 1px solid #F5CDD2;

    font-size: 13px;
}

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

    padding: 13px 15px;

    border-radius: 11px;

    color: #2F7725;

    background: #EAF7E6;

    border: 1px solid #D4ECCF;

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


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

@media(max-width: 900px) {

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

    .template-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn-template {
        width: 100%;
    }
}

@media(max-width: 520px) {

    .import-header h1 {
        font-size: 21px;
    }

    .btn-back {
        width: 100%;
    }

    .column-list {
        grid-template-columns: 1fr;
    }

    .action-area {
        display: block;
    }

    .btn-preview {
        width: 100%;
    }
}

</style>

@endpush


@section('content')

<div class="import-page">


    <!-- HEADER -->

    <div class="import-header">

        <div class="import-header-left">

            <div class="import-header-icon">

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

            </div>

            <div>

                <h1>
                    Import Data Siswa
                </h1>

                <p>
                    Import peserta didik PELANGI BERSINAR dari file Excel.
                </p>

            </div>

        </div>


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

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

            Kembali

        </a>

    </div>


    @if(session('success'))

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

    @endif


    @if($errors->any())

        <div class="alert-error">

            <strong>
                File belum dapat diproses.
            </strong>

            <ul>

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif


    <!-- =========================================================
         DOWNLOAD TEMPLATE
    ========================================================== -->

    <div class="template-box">

        <div class="template-info">

            <div class="template-icon">

                <svg viewBox="0 0 24 24">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path>
                    <path d="M14 2v6h6"></path>
                    <path d="M12 18V11"></path>
                    <path d="m9 15 3 3 3-3"></path>
                </svg>

            </div>


            <div>

                <div class="template-title">
                    Belum punya format Excel?
                </div>

                <div class="template-description">
                    Download template resmi PELANGI BERSINAR,
                    isi data siswa, kemudian upload kembali pada form di bawah.
                </div>

            </div>

        </div>


        <a
            href="{{ asset('templates/Template_Import_Siswa_PELANGI_BERSINAR.xlsx') }}"
            class="btn-template"
            download
        >

            <svg viewBox="0 0 24 24">
                <path d="M12 3v12"></path>
                <path d="m7 10 5 5 5-5"></path>
                <path d="M5 21h14"></path>
            </svg>

            Download Template Excel

        </a>

    </div>


    <!-- =========================================================
         MAIN
    ========================================================== -->

    <div class="import-grid">


        <!-- UPLOAD -->

        <div class="import-card">

            <div class="card-header">

                <h2>
                    Upload Excel
                </h2>

                <p>
                    Pilih file data siswa yang akan diperiksa sebelum diimport.
                </p>

            </div>


            <div class="card-body">

                <form
                    method="POST"
                    action="{{ route('siswa.import.preview') }}"
                    enctype="multipart/form-data"
                >

                    @csrf


                    <div class="upload-box">


                        <div class="upload-icon">

                            <svg viewBox="0 0 24 24">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path>
                                <path d="M14 2v6h6"></path>
                                <path d="M8 13h8"></path>
                                <path d="M8 17h8"></path>
                                <path d="M10 9H8"></path>
                            </svg>

                        </div>


                        <div class="upload-title">
                            Pilih File Excel
                        </div>


                        <div class="upload-text">
                            Gunakan template PELANGI BERSINAR.<br>
                            Data tidak langsung masuk database.<br>
                            Sistem akan melakukan preview dan validasi terlebih dahulu.
                        </div>


                        <input
                            type="file"
                            name="file_siswa"
                            class="file-input"
                            accept=".xlsx,.xls,.csv"
                            required
                        >


                        <div class="file-note">
                            Format: XLSX, XLS atau CSV • Maksimal 10 MB
                        </div>

                    </div>


                    <div class="action-area">

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

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

                            Preview Data

                        </button>

                    </div>

                </form>

            </div>

        </div>


        <!-- GUIDE -->

        <div class="import-card">

            <div class="card-header">

                <h2>
                    Panduan Import
                </h2>

                <p>
                    Pastikan file Excel mengikuti struktur PELANGI BERSINAR.
                </p>

            </div>


            <div class="card-body">


                <div class="guide-list">


                    <div class="guide-item">

                        <div class="guide-number">
                            1
                        </div>

                        <div class="guide-content">

                            <strong>
                                Download Template
                            </strong>

                            <span>
                                Gunakan template Excel resmi yang tersedia di halaman ini.
                            </span>

                        </div>

                    </div>


                    <div class="guide-item">

                        <div class="guide-number">
                            2
                        </div>

                        <div class="guide-content">

                            <strong>
                                Isi Data Siswa
                            </strong>

                            <span>
                                Isi data sesuai kolom dan jangan mengubah nama kolom template.
                            </span>

                        </div>

                    </div>


                    <div class="guide-item">

                        <div class="guide-number">
                            3
                        </div>

                        <div class="guide-content">

                            <strong>
                                Preview & Validasi
                            </strong>

                            <span>
                                Sistem akan memeriksa NISN, data wajib dan duplikasi.
                            </span>

                        </div>

                    </div>


                    <div class="guide-item">

                        <div class="guide-number">
                            4
                        </div>

                        <div class="guide-content">

                            <strong>
                                Konfirmasi Import
                            </strong>

                            <span>
                                Hanya data yang lolos pemeriksaan yang akan disimpan.
                            </span>

                        </div>

                    </div>


                </div>


                <div class="column-card">

                    <div class="column-title">
                        Struktur Kolom Excel
                    </div>


                    <div class="column-list">

                        <div class="column-item">
                            nisn
                            <span class="required">*</span>
                        </div>

                        <div class="column-item">
                            no_induk
                        </div>

                        <div class="column-item">
                            nama
                            <span class="required">*</span>
                        </div>

                        <div class="column-item">
                            jenis_kelamin
                            <span class="required">*</span>
                        </div>

                        <div class="column-item">
                            kelas
                            <span class="required">*</span>
                        </div>

                        <div class="column-item">
                            tempat_lahir
                        </div>

                        <div class="column-item">
                            tanggal_lahir
                        </div>

                        <div class="column-item">
                            nama_ayah
                        </div>

                        <div class="column-item">
                            nama_ibu
                        </div>

                        <div class="column-item">
                            no_hp_wali
                        </div>

                        <div class="column-item">
                            alamat
                        </div>

                    </div>

                </div>


            </div>

        </div>


    </div>

</div>

@endsection