@extends('layouts.app')

@section('title')
{{ __('Tính toán lợi nhuận') }}
@endsection

@section('gate')
active
@endsection

@section('section.header')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ __('Tính toán lợi nhuận') }}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('app.gate.index') }}">{{ __('Quản lí cổng') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ __('Tính toán lợi nhuận') }}</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
@endsection

@section('section.content')
<!-- Main content -->
<section class="content">
    <!-- Default box -->
    <div class="card">
        <div id="loading-overlay" class="overlay d-none">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class="loading-text">Hệ thống đang xử lí, vui lòng chờ...</div>
        </div>
        @if (Session::has('success'))
        <div id="message-alert" class="alert alert-success">
            {{ Session::get('success') }}
        </div>
        @endif
        @if (Session::has('error'))
        <div id="message-alert" class="alert alert-danger">
            {{ Session::get('error') }}
        </div>
        @endif
        <div class="card-body">
            <div class="card-body">
                <form class="row mb-2" id="report-summary">
                    @csrf
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('from_date') }}</span>
                                </div>
                                <input type="date" class="form-control" name="from_date" value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('to_date') }}</span>
                                </div>
                                <input type="date" class="form-control" name="to_date" value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <button type="button" class="btn btn-primary" id="calculateProfit">{{ __('Tính toán lợi nhuận') }}</button>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped mx-auto" style="width:60%">
                        <thead style="text-align: center; background-color: rgb(223, 195, 195)">
                            <tr>
                                <th>{{ __('Tên cổng') }}</th>
                                <th>{{ __('Loại giao dịch') }}</th>
                                <th>{{ __('Danh thu cashin') }}</th>
                                <th>{{ __('Chiết khấu') }}</th>
                                <th>{{ __('Lãi') }}</th>
                            </tr>
                        </thead>
                        <tbody id="profit-table-body">
                        </tbody>
                    </table>
                </div>
                <p id="total-profit" class="text-center fw-bold mt-3"></p>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
<script>
    $('#calculateProfit').on('click', function() {
        let from_date = $('input[name="from_date"]').val();
        let to_date = $('input[name="to_date"]').val();
        let gate_name = $('select[name="gate_name"]').val();

        $.ajax({
            url: "{{ route('app.gate.calculate-profit.calculate') }}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                from_date: from_date,
                to_date: to_date,
                gate_name: gate_name
            },
            beforeSend: function() {
                $('#loading-overlay').removeClass('d-none');
                $('#calculateProfit').prop('disabled', true).text('Đang tính...');
            },
            success: function(response) {
                if (response.success) {
                    let rows = '';

                    response.data.forEach(function(item) {
                        rows += `
                            <tr style="text-align: center;">
                                <td>${item.gate_name}</td>
                                <td>${item.type}</td>
                                <td>${item.amount_transfer}</td>
                                <td>${item.fee}</td>
                                <td>${item.profit}</td>
                            </tr>
                        `;
                    });

                    $('#profit-table-body').html(rows);
                    $('#total-profit').text('Tổng lợi nhuận: ' + response.total_profit + ' VND');
                } else {
                    toastr.error(response.msg);
                }
            },
            complete: function() {
                $('#calculateProfit').prop('disabled', false).text('Tính toán lợi nhuận');
                $('#loading-overlay').addClass('d-none');
            }
        });
    });
</script>
@endsection
@section('styles')
<link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
<style>
    #loading-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    #loading-overlay .spinner-border {
        width: 4rem;
        height: 4rem;
        margin-bottom: 10px;
    }

    #loading-overlay .loading-text {
        font-size: 18px;
        color: #fff;
    }
</style>
@endsection