@extends('layouts.admin')
@section('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<style>
#map {
    height: 380px;
}

#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#loadingOverlay.show {
    display: flex;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
@endsection
@section('content')

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                {{ trans('global.show') }} {{ trans('cruds.feeder.title') }}
            </div>

            <div class="card-body">
                <div class="form-group">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.id') }}
                                </th>
                                <td>
                                    {{ $feeder->id }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.photo') }}
                                </th>
                                <td>
                                    @if($feeder->photo)
                                        <a href="{{ $feeder->photo->getUrl() }}" target="_blank" style="display: inline-block">
                                            <img src="{{ $feeder->photo->getUrl('thumb') }}">
                                        </a>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.name') }}
                                </th>
                                <td>
                                    {{ $feeder->name }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.weight_per_second') }}
                                </th>
                                <td>
                                    {{ $feeder->weight_per_second }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.default_feeding_weight') }}
                                </th>
                                <td>
                                    {{ $feeder->default_feeding_weight }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.pond') }}
                                </th>
                                <td>
                                    {{ $feeder->pond->name ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.category') }}
                                </th>
                                <td>
                                    {{ App\Models\Feeder::CATEGORY_SELECT[$feeder->category] ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.pond.fields.lat') }}
                                </th>
                                <td>
                                    {{ $feeder->pond->lat ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.pond.fields.lon') }}
                                </th>
                                <td>
                                    {{ $feeder->pond->lon ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.feeder.fields.status') }}
                                </th>
                                <td>
                                    {{ $feeder->status }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>Feeding Control</span>
                    <button type="button" class="btn btn-primary btn-sm" id="openFeedingModalBtn">Control</button>
                </div>
            </div>
        </div>
        <!-- Feeding Control Modal -->
        <div class="modal fade" id="feedingControlModal" tabindex="-1" aria-labelledby="feedingControlModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="feedingControlModalLabel">Feeding Control</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="weight">Weight (grams):</label>
                                <input class="form-control" type="text" name="weight" id="weight" value="{{ $feeder->default_feeding_weight }}"> 
                        </div>
                        <div class="form-group">
                                <label for="weight_per_second">Weight per Second (grams per second):</label>
                                <input class="form-control" type="text" name="weight_per_second" id="weight_per_second" value="5"> 
                        </div>
                        <div class="form-group">
                                <label for="duration">Calculated duration (second):</label>
                                <input class="form-control" type="text" name="duration" id="duration" value=""> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary btn-sm" id="startFeedingBtn" data-feeder-id="{{ $feeder->id }}">Start Feeding</button>
                        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Peta Lokasi Feeder
                </div>

                <div class="card-body">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <div class="p-1 bd-highlight">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar"></i>&nbsp;</span>
                    </div>
                    <input type="text" class="form-control" name="datefilter" value="" />
                    <button type="button" id="resetTimeseries" class="btn btn-secondary btn-sm rounded-0"><i class="fa fa-refresh"></i> Reset</button>
                </div>
            </div>
            <div class="p-1 bd-highlight">
                <h6>Realtime Chart - {{ now()->format('d M Y') }}</h6>
            </div>
            <div class="p-1 bd-highlight">
                <button type="button" id="csvDownload" class="btn btn-success text-white btn-sm rounded-0"><i class="fa fa-download"></i> Export CSV</button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        pH
                    </div>
                    <div class="card-body">
                        <iframe id="pHChart" width="100%" height="300px" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Turbidity
                    </div>
                    <div class="card-body">
                        <iframe id="turbidityChart" width="100%" height="300px" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Temp (°C)
                    </div>
                    <div class="card-body">
                        <iframe id="tempChart" width="100%" height="300px" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        Level (m)
                    </div>
                    <div class="card-body">
                        <iframe id="levelChart" width="100%" height="300px" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

<!-- Toast Container -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11; right: 0; bottom: 0;">
    <div id="feedingToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto" id="toastTitle">Notification</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" id="toastMessage">
            Message here
        </div>
    </div>
</div>

@endsection
@section('scripts')
@parent
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"
        integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async>
    </script>

    <script>
    var feeder = @json($feeder);
    var mymap = L.map('map').setView([-1.5049635052631984, 120.30966343207425], 5);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).addTo(mymap);

    var shipIcon = new L.Icon({
        iconUrl: 'https://nelayan.fusi.id/img/ship_icon.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var greenIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

    var redIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });
    
    var blueIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });       
        
    var marker = L.marker([feeder.pond.lat ?? 0, feeder.pond.lon ?? 0], { icon: shipIcon });

    marker.bindPopup(
        "<table>" +
        "<tbody>" +
        "<tr><td>Nama</td><td>: " + feeder.name + "</td></tr>" +
        "<tr><td>Lokasi</td><td>: <a target='_blank' href='https://www.google.com/maps/search/?api=1&query=" + feeder.pond.lat + "," + feeder.pond.lon + "'>Google Maps</a></td></tr>" +
        "</tbody>" +
        "</table>"
    )
    mymap.addLayer(marker);
</script>

<script>
    function showToast(title, message, isSuccess) {
        var toastEl = document.getElementById('feedingToast');
        var toastTitle = document.getElementById('toastTitle');
        var toastMessage = document.getElementById('toastMessage');
        var toastHeader = toastEl.querySelector('.toast-header');
        
        toastTitle.textContent = title;
        toastMessage.textContent = message;
        
        // Change color based on success/failure
        if (isSuccess) {
            toastHeader.classList.remove('bg-danger', 'text-white');
            toastHeader.classList.add('bg-success', 'text-white');
        } else {
            toastHeader.classList.remove('bg-success', 'text-white');
            toastHeader.classList.add('bg-danger', 'text-white');
        }
        
        // Initialize and show toast
        var toast = new bootstrap.Toast(toastEl, {
            autohide: true,
            delay: 5000
        });
        toast.show();
    }
    
    function showLoading() {
        document.getElementById('loadingOverlay').classList.add('show');
    }
    
    function hideLoading() {
        document.getElementById('loadingOverlay').classList.remove('show');
    }

    // Feeding Control: Auto-calculate duration
    function recalculateDuration() {
        var weight = parseFloat(document.getElementById('weight').value);
        var wps = parseFloat(document.getElementById('weight_per_second').value);
        var durationInput = document.getElementById('duration');
        if (!isNaN(weight) && !isNaN(wps) && wps > 0) {
            durationInput.value = (weight / wps).toFixed(2);
        } else {
            durationInput.value = '';
        }
    }
    // Modal logic
    var feedingModal = new bootstrap.Modal(document.getElementById('feedingControlModal'));
    document.getElementById('openFeedingModalBtn').addEventListener('click', function() {
        feedingModal.show();
        recalculateDuration();
    });

    document.getElementById('weight').addEventListener('input', recalculateDuration);
    document.getElementById('weight_per_second').addEventListener('input', recalculateDuration);

    document.getElementById('startFeedingBtn').addEventListener('click', function() {
        var feederId = this.getAttribute('data-feeder-id');
        var duration = document.getElementById('duration').value;
        var weight = document.getElementById('weight').value;
        showLoading();
        fetch('{{ route("admin.feedings.store") }}', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                feeder_id: feederId,
                weight: weight,
                duration: duration
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            hideLoading();
            feedingModal.hide();
            if (data.success) {
                var message = data.message || 'Feeding started for ' + duration + ' seconds.';
                showToast('Success', message, true);
            } else {
                var message = data.message || 'Failed to start feeding.';
                showToast('Error', message, false);
            }
        })
        .catch(error => {
            hideLoading();
            feedingModal.hide();
            showToast('Error', 'An error occurred while starting feeding: ' + error.message, false);
        });
    });
</script>
<script>
    function initGraph(from, to) {
        $('#pHChart').attr('src',`https://grafana.fusi.id/d-solo/C39vQTnvz/smartfish?orgId=1&var-deviceId==${feeder.id}&from=${from}&to=${to}&refresh=5s&panelId=2`);
        $('#turbidityChart').attr('src',`https://grafana.fusi.id/d-solo/C39vQTnvz/smartfish?orgId=1&var-deviceId==${feeder.id}&from=${from}&to=${to}&refresh=5s&panelId=4`);
        $('#tempChart').attr('src',`https://grafana.fusi.id/d-solo/C39vQTnvz/smartfish?orgId=1&var-deviceId==${feeder.id}&from=${from}&to=${to}&refresh=5s&panelId=6`);
        $('#levelChart').attr('src',`https://grafana.fusi.id/d-solo/C39vQTnvz/smartfish?orgId=1&var-deviceId==${feeder.id}&from=${from}&to=${to}&refresh=5s&panelId=8`);
    }
    initGraph(moment().subtract(1, 'days').format('x'), "now");
</script>
<script type="text/javascript">
    let from = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    let to = moment().format('YYYY-MM-DD HH:mm:ss');
    $(function() {
        $("#csvDownload").click(function(){
            window.open('/admin/devices/'+myData.id+'/csv?from='+from+'&to='+to,'_blank');
        });
        $('input[name="datefilter"]').daterangepicker({
            "alwaysShowCalendars": true,
            "timePicker": true,
            "timePicker24Hour": true,
            "autoApply": true,
            ranges: {
                'Last 1m': [moment().subtract(1,'minutes'), moment()],
                'Last 15m': [moment().subtract(15,'minutes'), moment()],
                'Last 30m': [moment().subtract(30,'minutes'), moment()],
                'Last 1h': [moment().subtract(1,'hours'), moment()],
                'Last 6h': [moment().subtract(6,'hours'), moment()],
                'Last 12h': [moment().subtract(12,'hours'), moment()],
                'Last 24h': [moment().subtract(1, 'days'), moment()],
                'Last 7d': [moment().subtract(6, 'days'), moment()],
                'Last 30d': [moment().subtract(29, 'days'), moment()],
            },
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });
        $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            initGraph(moment(picker.startDate).format('x'), moment(picker.endDate).format('x'));
            from = moment(picker.startDate).format('YYYY-MM-DD HH:mm:ss');
            to = moment(picker.endDate).format('YYYY-MM-DDTHH:mm:ss');
        });
        $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>
@endsection