@extends('layouts.master')

@section('title', 'Application Portfolio Edit')

@section('style')

@endsection

@section('script')
    <script></script>

@endsection

@section('content')

    @include('layouts.header')
    @include('layouts.header-sub')
    @include('applications.applicationview_include', [
        'applications' => $applications,
        'school' => $school,
        'grade' => $grade,
        'gpax_score' => $gpax_score,
        'portfolio_score' => $portfolio_score,
        'grand_total' => $grand_total,
    ])



    <section class="wrapper bg-light mt-0 pt-0">
        <div class="container py-8 py-md-10 pb-0 mb-0" style="margin-top: -130px">
            <div class="row gx-lg-8 gx-xl-12">
                <div class="col-md-12">
                    <div class="blog single">

                        <div class="card summary-card mb-4 border-0">
                            <div class="card-body">
                                <h5 class="mb-4 fw-bold">📋 Edit Input your score or choose score from the box</h5>

                                <form action="{{ url('/application_portfolio_update') }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <br>
                                    <!-- Input Score -->
                                    <div class="d-flex justify-content-center my-5">
                                        <div class="w-50"> <!-- ปรับขนาดความกว้างได้ เช่น w-50 หรือกำหนดเอง -->
                                            <label for="scoreInput" class="form-label fs-20 fw-bold text-center d-block">
                                                Input your score
                                            </label>
                                            <input type="number" id="scoreInput" name="score"
                                                class="form-control form-control-lg text-center" placeholder="Enter score"
                                                min="0" max="20">
                                        </div>
                                    </div>


                                    <!-- Score Buttons -->
                                    <div class="text-center mb-4">
                                        <button type="button" class="btn btn-primary score-btn" data-score="20">20
                                            Excellent</button>
                                        <button type="button" class="btn btn-aqua score-btn" data-score="15">15 Very
                                            Good</button>
                                        <button type="button" class="btn btn-green score-btn" data-score="10">10
                                            Good</button>
                                        <button type="button" class="btn btn-orange score-btn" data-score="5">5
                                            OK</button>
                                        <button type="button" class="btn btn-red score-btn" data-score="0">0 Bad</button>
                                    </div>

                                    <!-- Recommend Scholarship -->
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" value="1"
                                            id="recommendScholarship" name="scholarship">
                                        <label class="form-check-label" for="recommendScholarship">
                                            Recommend for Scholarship
                                        </label>
                                    </div>

                                    <!-- Grand Total -->
                                    <div class="mb-3">
                                        <label class="form-label">Grand Total</label>
                                        <input type="text" class="form-control text-danger fw-bold"
                                            value="{{ $grand_total ?? '0' }}%" readonly>
                                    </div>

                                    <!-- Evaluator Name -->
                                    <div class="mb-3">
                                        <label for="evaluatorName" class="form-label">By</label>
                                        <input type="text" id="evaluatorName" name="evaluator" class="form-control"
                                            value="{{ Auth::user()->name ?? '' }}">
                                    </div>

                                    <!-- Buttons -->
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary rounded-pill">Save</button>
                                        {{-- <a href="{{ url('/next_page') }}" class="btn btn-warning">Next</a> --}}
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- JS for score buttons -->
                        <script>
                            document.querySelectorAll('.score-btn').forEach(button => {
                                button.addEventListener('click', function() {
                                    document.getElementById('scoreInput').value = this.dataset.score;
                                });
                            });
                        </script>



                    </div>
                </div>
            </div>
        </div>
    </section>


    @include('layouts.footer')

@endsection