@extends('layouts.app')
@section('title', 'RMBs')

@section('content')
<div class="content-wrapper">
    <!-- Realtime Exchange Rate Card -->
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="mb-0"><i class="mdi mdi-currency-cny"></i> Realtime Exchange Rate (RMB to IDR)</h6>
                        </div>
                        <div class="col-md-4 text-right">
                            <button class="btn btn-light btn-sm" onclick="refreshExchangeRate()">
                                <i class="mdi mdi-refresh"></i> Refresh Rate
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h3 class="text-success" id="current-rate">Rp {{ $realtimeRate['formatted_rate'] ?? 'Loading...' }}</h3>
                                <small class="text-muted">1 RMB = ? IDR</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="mb-1"><strong>Last Updated:</strong></p>
                                <small class="text-muted" id="last-updated">{{ $realtimeRate['last_updated'] ?? 'Unknown' }}</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <p class="mb-1"><strong>Source:</strong></p>
                                <small class="text-info">{{ $realtimeRate['source'] ?? 'API' }}</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <button class="btn btn-success btn-sm" onclick="autoUpdateFromApi()">
                                    <i class="mdi mdi-download"></i> Auto Update Master
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-8 text-center mt-4">
                            <a href="{{ route('rmbs.create') }}" class="btn btn-outline-primary btn-sm mb-0"><i class="mdi mdi-plus"></i> Add Data</a>
                            <button class="btn btn-outline-success btn-sm mb-0" data-toggle="modal" data-target="#importModal"><i class="mdi mdi-cloud-upload"></i> Import Data</button>
                            <a href="{{ route('rmbs.export') }}" target="_blank" class="btn btn-outline-warning btn-sm mb-0" id="exportBtn"><i class="mdi mdi-cloud-download"></i> Export Data</a>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="card-title">RMB Master Data</h4>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table" id="data-table">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th class="text-center">IDR</th>
                                    <th class="text-center">RMB</th>
                                    <th class="text-center">Rate (1 RMB = ? IDR)</th>
                                    <th class="text-center">Active</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importModalLabel">Import RMB Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="file">Select Excel File</label>
          <input type="file" class="form-control-file" id="file" name="file">
        </div>
        <div class="form-group">
          <label for="format">Excel Import Format</label>
          <br>
          <a href="{{ asset('storage/docs/Format Import RMB.xlsx') }}" class="form-control" download>Download Import Format</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="importBtn">Import</button>
      </div>
    </div>
  </div>
</div>

@stop

@section('footer')
<script type="text/javascript">
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    var dtTableOption = {
        "paging": true,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "stateSave": true
    };

    var Notif = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
        })

    $('#data-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("rmbs.index") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', class: 'text-center' },
            { data: 'idr', name: 'idr', class: 'text-center', render: function(data) {
                return 'Rp ' + new Intl.NumberFormat('id-ID').format(data);
            }},
            { data: 'rmb', name: 'rmb', class: 'text-center' },
            { data: null, name: 'rate', class: 'text-center', render: function(data) {
                var rate = data.idr / data.rmb;
                return 'Rp ' + new Intl.NumberFormat('id-ID', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(rate);
            }},
            { data: 'is_active', name: 'is_active', class: 'text-center', render: function(data) {
                return data ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-secondary">Inactive</span>';
            }},
            { data: 'action', name: 'action', orderable: false, searchable: false, class: 'text-center' }
        ],
        paging: true,
        searching: true,
        ordering: true,
        responsive: true,
        stateSave: true
    });

    function deleteData(id) {
        var urlRedirect = "{{ route('rmbs.index') }}"
        var _url = "{{ route('rmbs.destroy', ':id') }}"
        _url = _url.replace(':id', id),
        Swal.fire({
                title: "Are you sure you want to delete this data?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, Delete!",
                cancelButtonText: "No",
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var _token = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: _url,
                        type: 'DELETE',
                        data: {
                            _token: _token
                        },
                        success: function(res) {
                            if(res.code == 200){
                                Notif.fire({
                                    icon: 'success',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }else{
                                Notif.fire({
                                    icon: 'error',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }
                        },
                        error: function(err) {
                            console.log(err);
                        }
                    })
                }
            });
    }

    $('#importBtn').click(function() {
        var fileInput = $('#file')[0].files[0];

        if (!fileInput) {
            Swal.fire(
                'Failed!',
                'Please select an Excel file first!',
                'error'
            );
            return;
        }

        var formData = new FormData();
        formData.append('file', fileInput);

        $.ajax({
            url: '{{ route("rmbs.import") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if(response.code == 200){
                    Swal.fire(
                        'Success!',
                        response.message,
                        'success'
                    );
                    $('#data-table').DataTable().ajax.reload();
                }else{
                    Swal.fire(
                        'Failed!',
                        response.message,
                        'error'
                    );
                }
            },
            error: function(xhr, status, error) {
                Swal.fire(
                    'Failed!',
                    'An error occurred in the program!',
                    'error'
                );
                console.error(xhr.responseText);
            }
        });
    });

    // Realtime Exchange Rate Functions
    function refreshExchangeRate() {
        $.ajax({
            url: '/api/exchange-rate/refresh',
            type: 'POST',
            beforeSend: function() {
                $('#current-rate').html('<i class="mdi mdi-loading mdi-spin"></i> Loading...');
            },
            success: function(response) {
                if (response.success) {
                    $('#current-rate').text('Rp ' + response.data.formatted_rate);
                    $('#last-updated').text(new Date().toLocaleString());

                    Notif.fire({
                        icon: 'success',
                        title: 'Exchange rate refreshed successfully'
                    });
                } else {
                    Notif.fire({
                        icon: 'error',
                        title: response.message
                    });
                }
            },
            error: function(xhr) {
                $('#current-rate').text('Error loading rate');
                Notif.fire({
                    icon: 'error',
                    title: 'Failed to refresh exchange rate'
                });
            }
        });
    }

    function autoUpdateFromApi() {
        Swal.fire({
            title: 'Auto Update Master Data?',
            text: 'This will update the RMB master data with current realtime exchange rate',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, Update!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/api/exchange-rate/auto-update',
                    type: 'POST',
                    headers: {
                        'Authorization': 'Bearer ' + $('meta[name="api-token"]').attr('content')
                    },
                    beforeSend: function() {
                        Swal.fire({
                            title: 'Updating...',
                            text: 'Please wait while we update the master data',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            willOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: 'Success!',
                                text: response.message,
                                icon: 'success'
                            }).then(() => {
                                // Reload the DataTable
                                $('#data-table').DataTable().ajax.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Failed!',
                                text: response.message,
                                icon: 'error'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Failed to update master data',
                            icon: 'error'
                        });
                    }
                });
            }
        });
    }

    // Auto refresh exchange rate every 5 minutes
    setInterval(function() {
        $.ajax({
            url: '/api/exchange-rate/rmb-to-idr',
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    $('#current-rate').text('Rp ' + response.data.formatted_rate);
                    $('#last-updated').text(new Date(response.data.last_updated).toLocaleString());
                }
            }
        });
    }, 300000); // 5 minutes
</script>
@stop