@extends('layouts.master')

@section('page-css')
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datagrid/datatables/datatables.bundle.css')}}">
<style type="text/css">
    .listItem{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .listItem > li{
        display: inline-block;
        margin: 10px;
    }
    .listItem > li:hover{
        cursor: pointer;
    }
    .listItem > li .number{
        font-size: 14px;
        color: #fff;
        background: #0ba360 !important;
        padding: 10px;
        border-radius: 10%;
    }
    .level{
        float: right;
        color: #fff;
        text-align: center;
        width: 100px;
    }
    .nav-link{
        border-radius: 0px!important;
    }
    .pageNumber{ list-style:none; padding:0px; margin: 0px;}
    .pageNumber > li{ display: inline-block; padding: 12px; background: rgba(255, 255, 255, 0.5); margin: 5px 1px;}
    .pageNumber > li:hover{cursor: pointer;}
    .page.active {
        background-color: #007bff; /* Warna biru */
        color: white;
        font-weight: bold;
    }
</style>
@endsection
@section('content')
<div class="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-edit'></i> {{$title}}
    </h1>
</div>
<div class="row">
    <div class="col-lg-12">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form method="POST" action="{{route($route.'.store')}}" id="form">
        {{csrf_field()}}
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 p-3">
                            <table class="" border="0" style="width:100%">
                                <tr>
                                    <td rowspan="5" width="5" style="vertical-align: middle; padding-right: 10px;">
                                        <i class="fal fa-building fa-5x"></i>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><h5 class="text-success">NPSN: {{session('npsn')}}</h5></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><h4><b>{{session('name')}}</b></h4></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><span class="badge badge-primary">{{session('tingkat_sekolah')}}</span> <span class="badge badge-success">{{session('status_sekolah')}}</span></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><p>{{session('alamat_sekolah')}}</p></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-12" style="background: rgba(23, 162, 184, 0.2) !important;">
                            <ul class="pageNumber">
                                @foreach($page as $hal)
                                <li class="page" data-number={{$hal}}>{{$hal}}</li>
                                @endforeach
                                <li class="resume">Resume</li>
                                <li><a href="{{url('usulan/kriteria/progress')}}">Progress Usulan</a></li>
                            </ul>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="alert alert-primary mb-2 p-2">
                                <h6 class="mb-0"><b class="changeTitle">I. Perencanaan Gerakan PBLHS</b></h6>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div id="loading-spinner" style="display: none; text-align: center;">
                                    <img src="{{ asset('assets/spinner.gif') }}" alt="Loading..." width="20">
                                </div>
                            <div class="changeForm">
                                {!! formKriteria(1) !!}
                            </div>
                            <div class="card mb-2">
                                <div class="card-body">
                                    <h6><b>Link Google Drive (folder/File penyimpanan bukti)</b></h6>
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="link_grdive" placeholder="Link Google Drive (folder penyimpanan bukti)">
                                        <small><i>Contoh link : https://example.com</i></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-success"><i class="fal fa-save"></i>&nbsp;Simpan Data</button>
                </div>
                
            </div>
        </form>
    </div>
</div>
@endsection
@section('page-js')
<script type="text/javascript">
   $('.page').on('click',function(e){
        e.preventDefault();
        let number = $(this).data('number');
        let base_url = "{{url('/')}}";
        // Tambahkan kelas active dan hapus dari yang lain
        $('.page').removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: base_url+'/getForm', // Ganti dengan URL API-mu
            type: 'POST', // Bisa juga 'POST' kalau perlu
            data: { 
                _token:'{{csrf_token()}}',
                page: number 
            }, // Kirim number sebagai parameter
            dataType: 'json', // Format respons JSON
            beforeSend: function () {
                $('#loading-spinner').show(); // Menampilkan spinner
                $('.removeFormKriteria').remove();
            },
            success: function (response) {
                console.log('Response:', response);
                $('.changeForm').append(response.data);
                $('.changeTitle').html(response.title);

                $('.numberInput').on('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
                });
            },
            error: function (xhr, status, error) {
                console.error('AJAX Error:', status, error);
                alert('Failed to fetch data!');
            },
            complete: function () {
                $('#loading-spinner').hide(); // Sembunyikan spinner setelah request selesai
            }
        });        
   });
</script>
@endsection