@extends('adminlte::page')

@section('title', 'Fee Calculator')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Fee Calculator</h1>
@stop

<!--  -->
@section('content')
    <div class="card shadow rounded-lg  mb-3 p-2">
        <div class="card-header">
            <div class="row mt-3">
                <div class="col-md-6 float-left ">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white">
                            <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page">Fee </li>
                        </ol>
                    </nav>
                </div>
            </div>

           
        </div>
        @php
    $fee = $data[0] ?? null;
@endphp




        <div class="form-group col-md-6">
            <label>Country</label>
            <select class="form-control" id="country" name="countryselect">
                <option value="21" {{ $fee && $fee->country_id == 21 ? 'selected' : '' }}>USA</option>
                <option value="22" {{ $fee && $fee->country_id == 22 ? 'selected' : '' }}>UK</option>
            </select>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered w-100" id="dataTable"  cellspacing="0">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Fee Name</th>
                            <th>Sections</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php
                            $i= 1;
                        @endphp

                        @foreach ($data as $fee)
							
                            <tr>
                                <td style="width:7%">{{$i}}.</td>
                                <td style="width:12%">{{@$fee->fee_content_name}}</td>
                               
                           
                                <td style="width:15%">
                                <a href="@if(isset($fee->id)) {{ route('admin.fee.calculator.category', ['id' => $fee->id, 'country_id' => $fee->country_id]) }} @else javascript:void(0) @endif" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit Faq Section">Fee Category</a>
                                <a href="@if(isset($fee->id)) {{ route('admin.fee.calculator.content.index',$fee->id ) }} @else javascript:void(0) @endif" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit Faq Section">Content List</a>
                                </td>
                                @php
                                    $i++;
                                @endphp
                            </tr>
                        @endforeach
                    </tbody>
                </table>
              
            </div>
        </div>
    </div>
@stop

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

@stop

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let baseUrl = '{{ url("admin/fee/calculator") }}';

    $('#country').on('change', function () {
        var selectedCountry = $(this).val();

        if (selectedCountry !== '') {
            $.ajax({
                url: baseUrl + '/' + selectedCountry,
                method: 'Post',
                success: function (response) {
                    // Assuming 'response' is an array of fee items
                    updateFeeTable(response);

                    console.log(response);
                },
                error: function (xhr) {
                    console.error('AJAX Error:', xhr);
                }
            });
        }
    });

    function updateFeeTable(data) {
        let tbody = $('tbody');
        tbody.empty(); // Clear existing rows
        let counter = 1;

        data.forEach(fee => {
            let row = `
                <tr>
                    <td style="width:7%">${counter}.</td>
                    <td style="width:12%">${fee.fee_content_name ?? ''}</td>
                    <td style="width:15%">
                        <a href="/admin/fee/calculator/add/${fee.id}/${fee.country_id}" 
                           class="badge bg-info" 
                           data-toggle="tooltip" 
                           data-placement="top" 
                           title="Edit Faq Section">
                           Fee Category
                        </a>

                        <a href="/admin/fee/calculator/category/${fee.id}" 
                           class="badge bg-info" 
                           data-toggle="tooltip" 
                           data-placement="top" 
                           title="Edit Faq Section">
                           Content List
                        </a>
                    </td>
                </tr>
            `;
            tbody.append(row);
            counter++;
        });
    }
</script>



@stop