@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <style>
        .splash-image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 10px;
          position: relative;
        }
        .modal-backdrop {
          background-color: rgba(0, 0, 0, 0.7) !important;  /*Transparent black background */
        }
        .modal-content {
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          padding:20px;
        }
        .btn-close {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1055; /* Ensure it is above the image */
          color: white;
          background-color: #fff; /* Add a semi-transparent background for better visibility */
          border-radius: 50%;
          padding: 5px;
          opacity: 0.8;
        }
        .btn-close:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
      </style>
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('coursesPage')}}">Courses</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{ route('editCoursesProgram', ['id' => $course->id]) }}">{{$course->short_name}}</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>Course Fees </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                   
                        <div class="portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <div class="row mb-3">
                                        <div class="col">
                                            <i class="fa fa-money"></i> <strong>Update Course fees</strong>
                                        </div>
                                        <div class="col">
                                            <a href="{{ route('courseStudents', ['id' => $course->id]) }}" target="_blank" class="btn btn-primary pull-right"><i class="fa fa-user"></i> Course Students</a>
                                        </div>
                                    
                                    </div>
                                </div>
                            </div>
                            <div class="portlet-body">
                                @include('admin.includesV2.backendAlert')
                                
<div class="row">
    <div>
        <span id="addElementBtn" class="btn btn-success" style="float: right"> Add new Payment</span>
    </div>
</div>

<div class="container my-5">
    <div class="modal fade" id="pageModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="custom form needs-validation" id="pageForm" method="POST">
                    @csrf
                    <input type="hidden" name="_method" id="formMethod">
                    <input type="hidden" name="id" id="course_fees_id">
                    <input type="hidden" name="course_id" id="course_id" value="{{$course->id}}">



                    <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add Course Fee</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label class="form-label">Type: <span class="required">*</span></label>
                                <select class="form-control form-select" id="type"
                                            data-placeholder="Type..." name="type" required>
                                        <option value="">Select Type</option>
                                        @foreach($courseFeesTypes as $index => $courseFeeType)
                                        <option value="{{$index}}">{{$courseFeeType}}</option>
                                        @endforeach
                                    </select>
                            </div>
                            <div class="col form-group">
                                <label class="form-label">Name<span class="required"> *</span></label>
                                <input type="text" name="name" id="name"  class="form-control" placeholder="Payment head" autocomplete="off" required>
                            </div>
                            <div class="col form-group">
                                <label class="form-label">Amount<span class="required"> *</span></label>
                                <input type="text" name="amount" id="amount"  class="form-control" placeholder="Payment head" autocomplete="off" required>
                            </div>
                            <div class="col form-group">
                                <label class="form-label">Due Date<span class="required"> *</span></label>
                                <input type="date" name="due_date" id="due_date" class="form-control" data-date-format="YYYY-MM-DD"
                                            placeholder="dd-mm-yyyy" max="2050-12-31" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col form-group">
                                <label class="form-label">Description:</label>
                                <textarea class="form-control" style="height: 130px" name="description" id="description" autocomplete="off"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                        Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Type</th>
                <th scope="col">Name</th>
                <th scope="col">Amount</th>
                <th scope="col">Due Date</th>
                <th scope="col">Action</th>
                <th scope="col">Apply</th>
            </tr>
            </thead>
            <tbody>
                @foreach($courseFees as $courseFee)
                <tr>
                    <td>{{$courseFee->id}}</td>
                    <td>{{$courseFee->type}}</td>
                    <td>{{$courseFee->name}}
                        <p>
                            {!! nl2br(e($courseFee->description)) !!}
                        </p>
                    </td>
                    <td>{{$courseFee->amount}}</td>
                    <td>{{$courseFee->due_date}}</td>
                    <td>
                        <button
                            class="btn btn-primary edit-btn"
                            data-id="{{ $courseFee->id }}"
                            data-type="{{ $courseFee->type }}"
                            data-name="{{ $courseFee->name }}"
                            data-amount="{{ $courseFee->amount }}"
                            data-due_date="{{ $courseFee->due_date }}"
                            data-description="{{ $courseFee->description }}"
                            data-apply="{{ $courseFee->apply }}"
                        >
                            Edit
                        </button>
                        
                    </td>
                    <td>
                        
                        @if($courseFee->type!=1)
                            <button  
                                class="applyCourseFeesBtn btn btn-warning"
                                data-id="{{ $courseFee->id }}"
                                data-type="{{ $courseFee->type }}"
                                data-name="{{ $courseFee->name }}"
                                data-amount="{{ $courseFee->amount }}"
                            >
                                Apply
                            </button>
                            @if($courseFee->apply_date!=null)
                            Applied on {{ $courseFee->apply_date }}
                            @endif
                        @endif
                    </td>
                </tr>
                @endforeach
                <div class="modal fade" id="applyCourseFeesModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <form class="custom form needs-validation" id="applyCourseFeesForm" method="POST" action="{{ route('applyCourseFeesToStudents') }}">
                                @csrf
                                {{-- <input type="hidden" name="_method" id="formMethod"> --}}
                                <input type="hidden" name="id" id="apply_course_fees_course_fees_id">
                                <input type="hidden" name="course_id" id="course_id" value="{{$course->id}}">
            
            
            
                                <div class="modal-header">
                                <h5 class="modal-title" id="modalTitle">Apply/Implement Course Fees</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
            
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col">
                                            <h4>Do you want to apply the fees to all the students under this course?</h4>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="container">
                                    <div class="row">
                                        <div class="col">
                                            <button type="button" class="btn btn-danger float-start" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn btn-primary float-end applyCourseFeesSubmitBtn" id="applyCourseFeesSubmitBtn">
                                                Apply fees to all students
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </tbody>
        </table>
    </div>
</div>

                            </div><!-- END Portlet -->
                        </div>
                    
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs') 
<script>
$(document).ready(function () {



    function initPageFormValidation(isAdd = true) {
    const $form = $('#pageForm');

    // Destroy any previous validator instance
    if (isAdd && $form.data('validator')) {
        $form.removeData('validator');
        $form.off('.validate');
    }

    // Initialize validator
    $form.validate({
        rules: {
            name: {
                required: true,
                minlength: 6,
            },
            amount: {
                required: true,
                digits: true
            },
            type: {
                required: true,
            },
            description: {
                minlength: 6,
            },
        },
        messages: {
            name: { required: "required", minlength: "Minimum 6 chracters" },
            amount: { required: "Phone number required", digits:"Only digits" },
            type: { required: "Type is required" },
            description: { minlength: "Minimum 6 chracters" },
        },
        ignore: [], // validate hidden fields in modal
        errorClass: "is-invalid",
        validClass: "is-valid",
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        highlight: function (element) { $(element).addClass("is-invalid").removeClass("is-valid"); },
        unhighlight: function (element) { $(element).addClass("is-valid").removeClass("is-invalid"); },
        submitHandler: function (form) { form.submit(); }
    });

    // Reset form validation and field states
    if (isAdd) {
        $form[0].reset();
        $form.validate().resetForm();
        $form.find('.form-control').removeClass("is-valid is-invalid");
    }
}


        const modal = new bootstrap.Modal($('#pageModal')[0]);
        const form = $('#pageForm');
        const formMethod = $('#formMethod');
        const modalTitle = $('#modalTitle');
        const submitBtn = $('#submitBtn');
    
        // INPUTS
        const idInput = $('#course_fees_id');
        //const course_id = $('#course_id');
        const type = $('#type');
        // const bn_name = $('#bn_name');
        const name = $('#name');
        const amount = $('#amount');
        const due_date = $('#due_date');
        const description = $('#description');
        const apply = $('#apply');
    
        // ---------- ADD ----------
        $('#addElementBtn').on('click', function () {
            form.attr('action', "{{ route('addCourseFees') }}");
            formMethod.val('POST');
    
            modalTitle.text('Add Course Fees');
            submitBtn.text('Create');
    
            //form[0].reset();
            idInput.val('');
    

    
            $("#pageForm").validate().resetForm();
            $("#pageForm .form-control").removeClass("is-valid is-invalid");
            
            initPageFormValidation(true);   // ✅ initialize validator
            form[0].reset();               // reset values
            //setNationality();              // ✅ update nationality & NID/Passport
            $('#pageModal').modal('show');
           // modal.show();
        });
    
        // ---------- EDIT ----------
        $('.edit-btn').on('click', function () {
            //initEmployeeFormValidation();
            const btn = $(this);
    
            form.attr(
                'action',
                "{{ route('updateCourseFees', ':id') }}".replace(':id', btn.data('id'))
            );
    
            formMethod.val('POST');
    
            modalTitle.text('Edit Employee');
            submitBtn.text('Update');
    
            idInput.val(btn.data('id'));
            //course_id.val(btn.data('course_id'));
            //type.val(btn.data('type'));
            //type.val(String(btn.data('type'))).trigger('change');
            type.val(String(btn.data('type')));
            name.val(btn.data('name'));
            amount.val(btn.data('amount'));
            due_date.val(btn.data('due_date'));
            description.val(btn.data('description'));
            apply.val(btn.data('apply'));

            

    
         
    
            $("#pageForm").validate().resetForm();
            $("#pageForm .form-control").removeClass("is-valid is-invalid");
            initPageFormValidation(false); // ✅ reinitialize validator after populating form
            $('#pageModal').modal('show');
        });

        
       // const applyCourseFeesModal = new bootstrap.Modal($('#applyCourseFeesModal')[0]);
        const applyCourseFeesform = $('#applyFeesform');
        // const formMethod = $('#formMethod');
        // const modalTitle = $('#modalTitle');
        const applyCourseFeesSubmitBtn = $('#applyCourseFeesSubmitBtn');
    
        // // INPUTS
         const apply_course_fees_course_fees_id = $('#apply_course_fees_course_fees_id');
        // //const course_id = $('#course_id');
        // const type = $('#type');
        // // const bn_name = $('#bn_name');
        // const name = $('#name');
        // const amount = $('#amount');
        // const due_date = $('#due_date');
        // const description = $('#description');
        // const apply = $('#apply');
        const applyCourseFeesModal = new bootstrap.Modal($('#applyCourseFeesModal')[0]);
        // const applyCourseFeesModal = new bootstrap.Modal(
        //     document.getElementById('applyCourseFeesModal')
        // );
        $('.applyCourseFeesBtn').on('click', function () {
            const btn = $(this);
            apply_course_fees_course_fees_id.val(btn.data('id'))
            $('#applyCourseFeesModal').modal('show');
            //applyCourseFeesModal.show();
        });
        

    });
</script>

   
{{-- <script>
$(document).ready(function() {
    $('#addNewPayment').click(function() {
        $('#newPaymentBlock').toggle(); // toggles show/hide
    });

    $("#newPaymentBlock").validate({
        rules: {
            name: {
                required: true,
                minlength: 6,
            },
            amount: {
                required: true,
                digits: true
            },
            type: {
                required: true,
            },
            description: {
                minlength: 6,
            }
        },
        messages: {
            name: {
                required: "Payment Name required",
                minlength: "at least 6 characters long"
            },
            amount: {
                required: "Payment amount required",
                digits: "Only accept digits"
            },
            type: {
                required: "Payment type required",
            }
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            form.submit(); // Perform the default form submission
        }
    });

});

</script> --}}

@endsection

@section('documentJquery')

@endsection