@extends('layouts.app')

@section('title')
    Fee Setup
@endsection

@section('content')
<div class="page-content-wrapper">
    <div class="page-content">
     <x-page-bar title="Fee Setup"/>
        <div class="row">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                    <strong>{{ session('success') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    <strong>{{ session('error') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-head">
                        <header>Fee Setup</header>
                        <button id="panel-button2"
                            class="mdl-button mdl-js-button mdl-button--icon pull-right"
                            data-upgraded=",MaterialButton">
                            <i class="material-icons">more_vert</i>
                        </button>
                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                            data-mdl-for="panel-button2">
                            <a id="fee">                                          
                                <li class="mdl-menu__item"><i class="material-icons">note_add</i>Setup Fees</li>
                            </a>             
                        </ul>
                    </div>
                    <!-- The Modal -->
                    <div id="myModal" class="modal">
                        <!-- Modal content -->
                        <div style="width:60%" class="modal-content">
                            <span class="close">X</span>
                            
                            <form method="post" action="{{ url('add-fee-setup') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                                <div style="margin:auto; height:auto" id="personalDet" class="row">                                    
                                    {{-- column1 --}}
                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Program</label>                                    
                                        
                                        <select class="form-select select2 form-control" name="product_id">                                        
                                            @foreach($programs as $program)
                                                <option value="{{ $program->id }}">{{ $program->program_name }}</option>
                                            @endforeach
                                        </select>
                                        
                                    </div>  
                                    
                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Session</label>                                    
                                        <select class="form-select select2 form-control" name="session_id" required>
                                            @foreach($sessions as $session)
                                                <option value="{{ $session->id }}">{{ $session->academic_session_name }}</option>
                                            @endforeach
                                        </select><br>                                        
                                    </div> 

                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Intake Year</label>                                    
                                        <select class="form-select select2 form-control" name="intake">                                        
                                            @foreach($years as $year)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                            @endforeach
                                        </select><br>
                                    </div>

                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Minimum Type</label>  
                                        <select class="form-select select2 form-control" name="minimum_type">                                                                                    
                                           <option value="actual">Actual</option>
                                           <option value="percentage">Percentage</option>                                            
                                        </select><br>                                  
                                    </div>   

                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Minimum Amount Value</label>
                                        <input class="form-select select2 form-control" name="minimum_amount"><br>                                  
                                    </div> 

                                    <div style="" class="col-md-3 col-sm-6">
                                        <label>Description</label>  
                                        <input class="form-select select2 form-control" name="description">
                                    </div>                             
                                    
                                </div>
                                <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">
                                    <div style="" class="col-md-3 col-sm-6">                                    
                                        <div style="display: flex;justify-content: center;" class="col-md-12 col-sm-6">
                                            <button type="submit" class="btn btn-info m-r-20">ADD</button>
                                            <span onclick="clsFee()" class="btn btn-grey m-r-20">CANCEL</span>
                                        </div>
                                    </div> 
                                </div> 
                            </form>
                        </div>
                    </div>

                    <div class="card-body ">
                        <div class="table-scrollable">
                            <table class="table">
                                <thead>
                                    <tr>                                        
                                        <th>Program</th>
                                        <th>Session</th>
                                        <th>Intake</th>                                        
                                        <th>Fee Category</th>
                                        <th>Minimum Type</th>
                                        <th>Minimum Amount Value</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($fee_setup as $fee)                        
                                        <tr>
                                            <td>{{$fee->program_name}}</td>
                                            <td>{{$fee->academic_session_name}}</td>
                                            <td>{{$fee->entry_year}}</td>
                                            <td>{{$fee->fee_category}}</td>
                                            <td>{{$fee->minimum_amount_type}}</td>
                                            <td>{{$fee->minimum_amount}}</td>
                                            <td>
                                                <a href="{{ route('course-fees', $fee->id) }}"  title="Course Fees" data-bs-toggle="tooltip">
                                                    <i class="fa fa-list"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");
// When the user clicks the button, open the modal 
fee.onclick = function() {
    // $(document).find('#myModal').select2();
    modal.style.display = "block";
    $('.select2').select2({
        dropdownParent: $('#myModal') // Ensure dropdown renders inside the modal
    });
}

function clsFee()
{    
    modal.style.display = "none";
}

</script>

@endsection