@extends('layouts.admin.master')

@section('title')
    {{ __('Edit University Program') }}
@endsection

@push('css')
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3></h3>
        @endslot

        <li class="breadcrumb-item"><a href="{{ route('universities.index') }}">{{ __('University') }}</a></li>
        <li class="breadcrumb-item active">{{ __('Edit University Program') }}</li>
    @endcomponent
    <div class="row justify-content-center mt-3">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h5>{{ __('Data') }}</h5>
                </div>
                <div class="card-body">
                    <form class="needs-validation" id="addProgramForm" novalidate="" method="POST"
                          action="{{ route('universities.updateProgram') }}">
                        @csrf

                        <input type="hidden" name="yearsList" id="yearsListInput" value="">
                        <input type="hidden" value="{{$universityProgram->id}}" name="universityProgram_id">
                        <div class="form-group" id="duplicatePriceGroup">
                            <label for="f1-year_number">{{ __('Years Number') }}</label>
                            <input class="form-control" id="f1-year_number"   type="number"
                                   value="{{ $universityProgram->year_number ?? old('year_number') }}"
                                   name="year_number" placeholder="{{ __('Years Number') }}">
                            <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                            <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                        </div>


                        <div id="rowContainer">
                            @foreach ($universityProgram->universityProgramPrices()->get() as $index => $universityProgramPrice)
                                <!-- Initial row, which is always present and required -->
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group">
                                            <label for="f1-type">{{ __('Type') }}</label>
                                            <select name="type" class="form-select" id="f1-type">
                                                <option selected="" value="">{{__('Select')}}</option>
                                                <option value="percentage"
                                                    {{ old('type') ? (old('type') == 'percentage' ? 'selected' : '') : '' }}>
                                                    {{ __('percentage') }}</option>
                                                <option value="amount"
                                                    {{ old('type') ? (old('type') == 'amount' ? 'selected' : '') : '' }}>
                                                    {{ __('amount') }}</option>
                                            </select>
                                            <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                            <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                        </div>
                                    </div>

                                    <div class="col-2">
                                    <div class="form-group discount-group">
                                        <label for="f1-discount">{{ __('Discount') }}</label>
                                        <input class="form-control" id="f1-discount" type="number"
{{--                                               value="{{ old('discount') }}"--}}
                                               value="{{ old('discount') ? old('discount') : $universityProgramPrice->discount }}"
                                               name="discount" placeholder="{{ __('Discount') }}">
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                                    </div>



                                    <div class="col-2">
                                        <div class="form-group">
                                            <label for="f1-price_year">{{ __('Price') }}</label>
                                            <input class="form-control" id="f1-price_year" type="number"
                                                   value="{{ old('price_year') ? old('price_year') : $universityProgramPrice->price }}"
                                                   name="price_year" placeholder="{{ __('Price') }}">
                                            <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                            <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                        </div>
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                                    <!-- No minus button for the first row -->
                                    <div class="col-2">
                                        @if ($index > 0)
                                            <label for="f1-btn-">btn-</label><br>
                                            <a class="btn btn-danger buttonMin">-</a>
                                        @endif
                                    </div>
                                    <div class="col-2">
                                        <label for="f1-btn+">btn+</label><br>
                                        <a class="btn btn-primary buttonPlus">+</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="degree_id">{{ __('Degrees') }}</label>
                                <select class="form-select" required id="degree_id" required=""
                                        name="degree_id">
                                    @foreach ($degrees as $degree)
                                        <option value="{{ $degree->id }}"
                                            {{ old('degree_id') ? (old('degree_id') == $degree->id ? 'selected' : '') : ($degree->id == $universityProgram->collegeTable->degreeTable->degree_id ? 'selected' : '') }}>
                                            {{ $degree->name }}</option>
                                    @endforeach

                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>


                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="college_id">{{ __('Colleges') }}</label>
                                <select  id="college_id" class="form-select" required=""
                                        name="college_id" onchange="getAcademicSpecializations()">
                                    @foreach ($colleges as $college)
                                        <option value="{{ $college->id }}"
                                            {{ old('college_id') ? (old('college_id') == $college->id ? 'selected' : '') : ($college->id == $universityProgram->collegeTable->college->id ? 'selected' : '') }}>
                                            {{ $college->name }}</option>
                                    @endforeach

                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>






                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="academic_specialization_id">{{ __('Academic Specializations') }}</label>
                                <select  id="academic_specialization_id" class="form-select" required=""
                                        name="academic_specialization_id">
                                    @foreach ($universityProgram->collegeTable->college->academicSpecialization()->get() as $academic_specialization)
                                        <option value="{{ $academic_specialization->id }}"
                                            {{ old('academic_specialization_id') ? (old('academic_specialization_id') == $academic_specialization->id ? 'selected' : '') : ($academic_specialization->id == $universityProgram->academic_specialization_id ? 'selected' : '') }}>
                                            {{ $academic_specialization->name }}</option>
                                    @endforeach

                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>




                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="academic_language_id">{{ __('Academic Languages') }}</label>
                                <select class="form-select" required id="academic_language_id" required=""
                                        name="academic_language_id">
                                    @foreach ($academicLanguages as $academic_language)
                                        <option value="{{ $academic_language->id }}"
                                            {{ old('academic_language_id') ? (old('academic_language_id') == $academic_language->id ? 'selected' : '') : ($academic_language->id == $universityProgram->academic_language_id ? 'selected' : '') }}>
                                            {{ $academic_language->name }}</option>
                                    @endforeach

                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>


                        <button class="btn btn-primary btn-submit" type="submit">Submit</button>
                    </form>
                </div>
            </div>

        </div>

    </div>

@endsection

@push('scripts')
    <script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2-custom.js') }}"></script>
    <script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/contacts/custom.js') }}"></script>
    <script>
        'use strict';
        var elements = $('.elements');


        $(document).on('click', '.edit', function () {
            const modal = $('#translate')
            modal.find('.modal-title').text()
            modal.find('input[name=key]').val($(this).data('key'))
            modal.find('textarea[name=value]').val($(this).data('value'))
            modal.find('form').attr('action', $(this).data('route'))
            modal.modal('show')
        })

        $(document).on('click', '.remove', function () {
            const modal = $('#remove')
            modal.find('input[name=key]').val($(this).data('key'))
            modal.modal('show')
        })
        $('.add').on('click', function () {
            $('#translate').find('form')[0].reset();
            $('#translate').find('.modal-title').text('')
        })
    </script>

    {{--        staet add program --}}
    <script>
        $(document).ready(function () {
            let yearsList = [];

            // Function to create a new row
            function createNewRow() {
                return `
                <div class="row">
                    <div class="col-3">
                                                            <div class="form-group">
                                        <label for="f1-type">{{ __('Type') }}</label>
                                        <select name="type" class="form-select" id="f1-type">
                                            <option selected="" value="">{{__('Select')}}</option>
                                            <option value="percentage"
                                                {{ old('type') ? (old('type') == 'percentage' ? 'selected' : '') : '' }}>
                                                {{ __('percentage') }}</option>
                                            <option value="amount"
                                                {{ old('type') ? (old('type') == 'amount' ? 'selected' : '') : '' }}>
                                                {{ __('amount') }}</option>
                                        </select>
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>

                    </div>
                    <div class="col-2">
                        <div class="form-group discount-group">
                                        <label for="f1-discount">{{ __('Discount') }}</label>
                                        <input class="form-control" id="f1-discount" type="number"
                                               value="{{ old('discount') }}" name="discount" placeholder="{{ __('Discount') }}">
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>

                    </div>
                    <div class="col-2">
                        <div class="form-group">
                                        <label for="f1-price_year">{{ __('Price') }}</label>
                                        <input class="form-control" required id="f1-price_year" type="number"
                                               value="{{ old('price_year') }}" name="price_year" placeholder="{{ __('Price') }}">
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                    </div>
                    <div class="col-2">
                        <!-- Minus button for all rows except the first -->
                        <label for="f1-btn-">btn-</label><br>
                        <a class="btn btn-danger buttonMin">-</a>
                    </div>
                    <div class="col-2">
                        <label for="f1-btn+">btn+</label><br>
                        <a class="btn btn-primary buttonPlus">+</a>
                    </div>
                </div>
            `;
            }

            // Function to update the yearsList array
            function updateYearsList() {
                yearsList = [];
                $('#rowContainer .row').each(function () {
                    const type = $(this).find('#f1-type').val();
                    const discount = $(this).find('#f1-discount').val();
                    const priceYear = $(this).find('#f1-price_year').val();
                    if (type || discount || priceYear) {
                        yearsList.push({
                            type: type,
                            discount: parseFloat(discount),
                            priceYear: parseFloat(priceYear)
                        });
                    }
                });
                // console.log(yearsList); // Debug: Print the array to console
            }


            // Initial update of yearsList for existing rows (should be just one initially)
            updateYearsList();

            // Add new row when + button is clicked
            $(document).on('click', '.buttonPlus', function () {
                $('#rowContainer').append(createNewRow());
                updateYearsList();
            });

            // Remove row when - button is clicked
            $(document).on('click', '.buttonMin', function () {
                $(this).closest('.row').remove();
                updateYearsList();
            });

            // Function to create a discount select element for percentage type
            function createDiscountSelect() {
                let options = '';
                for (let i = 0; i <= 100; i++) {
                    options += `<option value="${i}">${i}</option>`;
                }
                return `
                <label for="f1-discount">{{ __('Discount') }}</label>
                <select id="f1-discount" class="form-control"  name="discount">
                    ${options}
                </select>
            `;
            }

            // Update discount input based on type selection
            $(document).on('change', '#f1-type', function () {
                const discountGroup = $(this).closest('.row').find('.discount-group');
                if ($(this).val() === 'percentage') {
                    discountGroup.html(createDiscountSelect());
                } else {
                    discountGroup.html('<label for="f1-discount">{{ __('Discount') }}</label>' +
                        '<input id="f1-discount" class="form-control" type="number" name="discount" placeholder="{{ __('Discount') }}">'
                    );
                }
                updateYearsList();
            });

            // Update yearsList when input values change
            $(document).on('change', '#f1-type, #f1-discount, #f1-price_year', function() {
                updateYearsList();
            });

            // Update hidden input field before form submission
            $('#addProgramForm').submit(function(event) {
                updateYearsList(); // Ensure yearsList is up-to-date
                $('#yearsListInput').val(JSON.stringify(yearsList));
            });
        });
    </script>

    <script>
        function getAcademicSpecializations() {
            var college_id = $('#college_id').val();
            $.ajax({
                url: '/dashboard/get-academic-specialization/' + college_id,
                method: 'GET',
                success: function (data) {
                    $('#academic_specialization_id').empty();
                    $.each(data, function (key, value) {
                        $('#academic_specialization_id').append('<option value="' + value.id + '">' +
                            value.name + '</option>');
                    });
                }
            });
        }
    </script>
    {{--        end add program --}}

@endpush