@extends('layouts.app')

@section('title', 'Dividend Rate Management')


@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>Set Dividend Rate</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">
            <div class="card">
                <div class="card-body">


<form method="POST" action="{{ route('dividend_rate.update') }}" id="dividend-rate-form">
    @csrf
    <div class="row">
        <div class="col-12">
            <label class="form-label">Fiscal Year</label>
            <input type="text" class="form-control" readonly
                value="{{ $currentFiscalYear->fiscal_year_title_name ?? 'No Active Fiscal Year' }}"
        </div>
    </div>

    <br><br><br><br>

    <div class="row">
        <div class="col-6">
            <label class="form-label">Dividend Rate</label>
            <div class="input-group mb-3">
                <input type="number" name="rate" step="0.01" min="0" max="100"
                    class="form-control" placeholder="Dividend Rate Percentage" required>
                <span class="input-group-text" id="basic-addon1">%</span>
            </div>
        </div>

        <div class="col-6">
            <label class="form-label">Current Dividend Rate</label>
            <div class="input-group mb-3">
                <input type="number" name="rateold" step="0.01" min="0" max="100"
                    value="{{ $currentRate->dividend_rate_amount ?? '' }}"
                    class="form-control" placeholder="" disabled>
                <span class="input-group-text" id="basic-addon1">%</span>
            </div>
        </div>
    </div>
    
    <div class="form-group mt-4 col-12 d-flex flex-row-reverse gap-2">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-light">Reset</button>
    </div>
</form>



                </div>
            </div>


            <div class="card">
                <div class="card-body">


                    <div class="table-responsive">
                        <table id="datatable" class="table table-striped" data-toggle="data-table">
                            <thead>
                                <tr>
                                    <th>Fiscal Year</th>
                                    <th>Dividend Rate</th>

                                </tr>
                            </thead>
                            <tbody>
    @foreach ($fiscalYears as $year)
        @php
            $rate = $year->dividendRate->dividend_rate_amount ?? null;
        @endphp
        <tr>
            <td>{{ $year->fiscal_year_title_name }}</td>
            <td>{{ $rate ? $rate . '%' : '-' }}</td>
        </tr>
    @endforeach
</tbody>


                        </table>
                    </div>


                </div>
            </div>



        </div>
@endsection



@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('dividend-rate-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const form = this;
        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if(data.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Updated',
                    text: data.message,
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.message,
                });
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Unexpected Error',
                text: 'Something went wrong!',
            });
        });
    });
</script>
@endsection