@extends('layouts.app')
@section('title', 'View Budidaya')
@section('page-title')
<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 w-100   ">
    <h1 class="page-heading d-flex text-dark fw-bold flex-column justify-content-center my-0">
        View Budidaya
    </h1>
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap p-0">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">Kelola Data &nbsp;</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('cultivation.index') }}" class="text-muted">Data Budidaya &nbsp;</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('cultivation.show', $cultivation->id) }}" class="text-muted">View Budidaya
                            &nbsp;</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        <!--end::Info-->
        <!--begin::Toolbar-->
    </div>
</div>
@endsection
@section('content')
<div class="content d-flex flex-column flex-column-fluid pt-0" id="kt_content">
    <div class="container mt-7">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card shadow-sm bg-light-secondary h-70">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <h1 class="mb-2 light">{{$pond->name}}</h1>
                            </div>
                            <div class="col-md-4">
                                <svg width="100" height="100" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M10.187 2.30762C7.11111 2.30762 4.32476 3.6317 2.30859 5.76988V5.77113C4.48283 8.07716 7.33559 9.23069 10.187 9.23069H10.1883C11.9896 7.31977 11.9902 4.21916 10.187 2.30762ZM7.53186 5.76988C7.4461 5.76991 7.36118 5.75201 7.28194 5.71721C7.20271 5.68242 7.13072 5.6314 7.07009 5.56708C7.00946 5.50276 6.96138 5.4264 6.92859 5.34236C6.8958 5.25832 6.87895 5.16825 6.879 5.07731C6.87895 4.98637 6.8958 4.89631 6.92859 4.81228C6.96138 4.72826 7.00947 4.65191 7.0701 4.5876C7.13074 4.5233 7.20273 4.4723 7.28196 4.43753C7.36119 4.40275 7.44611 4.38488 7.53186 4.38493C7.61762 4.38488 7.70255 4.40275 7.78179 4.43752C7.86103 4.4723 7.93303 4.52329 7.99368 4.58759C8.05433 4.65189 8.10244 4.72824 8.13525 4.81227C8.16806 4.89629 8.18494 4.98636 8.18491 5.07731C8.18497 5.16827 8.16811 5.25836 8.13531 5.34241C8.10251 5.42646 8.05441 5.50283 7.99375 5.56715C7.9331 5.63148 7.86109 5.68249 7.78183 5.71727C7.70258 5.75206 7.61763 5.76994 7.53186 5.76988Z"
                                        fill="currentColor" />
                                    <path opacity="0.5"
                                        d="M12.1676 2.30762C12.8127 3.29786 13.1551 4.45452 13.153 5.63616C13.1551 6.87366 12.7791 8.08231 12.0752 9.10039C13.4121 9.41955 14.4108 10.614 14.4108 12.0484C14.4108 13.7254 13.0494 15.0861 11.3715 15.0861H11.2756C10.9743 13.9241 9.92697 13.0604 8.66968 13.0604L4.61719 13.0618C4.61719 14.0171 4.87513 14.9446 5.34927 15.7613C4.87574 16.5781 4.61719 17.5068 4.61719 18.4615H8.66968C9.92697 18.4615 10.9743 17.5985 11.2756 16.4363H11.3715C15.288 16.4363 18.4633 13.2627 18.4633 9.34827C18.4633 5.7034 15.7089 2.70374 12.1676 2.30762Z"
                                        fill="currentColor" />
                                    <path
                                        d="M16.3327 13H15.666C14.0092 13 12.666 14.3431 12.666 16V17.6667C12.666 18.403 13.263 19 13.9993 19H16.3327C17.9895 19 19.3327 17.6569 19.3327 16C19.3327 14.3431 17.9895 13 16.3327 13Z"
                                        fill="currentColor" />
                                    <circle cx="15.9993" cy="16.0003" r="0.333333" fill="#F1F1F4" />
                                    <circle cx="17.3333" cy="16.0003" r="0.333333" fill="#F1F1F4" />
                                    <circle cx="14.6654" cy="16.0003" r="0.333333" fill="#F1F1F4" />
                                </svg>
                            </div>
                            <div class="col-md-4">
                                <svg width="100" height="100" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M17.7077 15.4378L10.8743 18.1878C10.291 18.4378 9.70768 18.4378 9.12435 18.1878L2.29102 15.4378C1.45768 15.1045 1.45768 13.9378 2.29102 13.6045L3.37434 13.1878L8.54102 15.2711C9.04102 15.4378 9.54102 15.5211 10.041 15.5211C10.541 15.5211 11.041 15.4378 11.541 15.2711L16.7077 13.1878L17.791 13.6045C18.6243 13.9378 18.6243 15.1045 17.7077 15.4378ZM10.8743 13.6878L17.7077 10.9378C18.541 10.6045 18.541 9.43781 17.7077 9.10448L10.8743 6.35449C10.291 6.10449 9.70768 6.10449 9.12435 6.35449L2.29102 9.10448C1.45768 9.43781 1.45768 10.6045 2.29102 10.9378L9.12435 13.6878C9.70768 13.9378 10.3743 13.9378 10.8743 13.6878Z"
                                        fill="#E3E4EA" />
                                    <path
                                        d="M9.20835 9.18783L2.375 6.43783C1.54167 6.10449 1.54167 4.93783 2.375 4.60449L9.20835 1.85449C9.79168 1.60449 10.375 1.60449 10.9583 1.85449L17.7917 4.60449C18.625 4.93783 18.625 6.10449 17.7917 6.43783L10.875 9.18783C10.375 9.43783 9.70835 9.43783 9.20835 9.18783Z"
                                        fill="#A1A5B7" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm bg-light-secondary h-70">
                    <div class="card-header">
                        <div class="card-title">
                            @if ($pond->status == 1)
                            <h1>Hari Ke-{{$cultivation->day}}</h1>
                            @else
                            <h1>Telah Panen</h1>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($pond->status == 1)
                        <h2>{{$today_date}}</h2>
                        @else
                        <h2>{{$pond->harvest_date}}</h2>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow-sm bg-light-secondary h-70">
                    <div class="card-header">
                        <div class="card-title">
                            <h1>Pemberian Pakan Hari Ini</h1>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($pond->status == 1)
                        <h2>{{$cultivation->feed_spent}} kg</h2>
                        @else
                        <h2>- kg</h2>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mt-3">
            <div class="col-md-6">
                <div class="card shadow-sm bg-light-secondary h-70">
                    <div class="card-body">
                        <div id="chart_weight"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card shadow-sm bg-light-secondary">
                    <div class="card-body">
                        <div id="chart_feed"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mt-5">
            <div class="card shadow-sm bg-light-secondary h-70">
                <div class="card-header">
                    <div class="card-title">
                        <h2>Data Budidaya Lainnya</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Tanggal Tebar Benih : {{$pond->date_sow}}</div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Jumlah Bibit : {{$pond->seed_amount}} ekor </div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Volume Kolam : {{$pond->volume_pond}} m<sup>3</sup></div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Total Pemberian Pakan Saat Ini : {{$cultivation->total_feed_spent}}</div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Rata-rata berat bibit : {{$pond->seed_weight}} gram/ekor </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Survival Rate : {{$pond->survival_rate}} % </div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Rata-Rata Berat Ikan per Ekor yang akan dijual : {{$pond->average_weight}} gram/ekor </div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Total Pemberian Pakan Selama Budidaya : {{$pond->total_feed_spent}} kg </div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Prediksi Hasil Panen : {{$pond->prediction}} kg </div>
                            <div class="mb-3"><span class="bullet bullet-dot bg-primary h-15px w-15px center me-1"></span>Status Budidaya : @if ($pond->status == 1) Proses @else Panen @endif</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var element = document.getElementById('chart_weight');
    var element_feed = document.getElementById('chart_feed');
    var height = parseInt(KTUtil.css(element, 'height'));
    var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
    var borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
    var baseColor = KTUtil.getCssVariableValue('--kt-primary');
    var lightColor = KTUtil.getCssVariableValue('--kt-primary-light');
    var green = KTUtil.getCssVariableValue('--kt-success');
    var infoColor = KTUtil.getCssVariableValue('--kt-info');

    const getColorMode = (mode) =>{
        var color = 'black';
        if(mode == 'dark'){
            color = 'white';
        } else {
            color = 'black';
        }
        return color;
    }

    // function get option graph
    const getOptions = (color, data, title, title_xaxis, title_yaxis, stroke_curve) => {
        var options = {
            series: [{
                    name: 'Data',
                    data: data
                },
            ],
            chart: {
                type: 'area',
                stacked: false,
                height: 350,
                zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: true
                },
                toolbar: {
                    autoSelected: 'zoom'
                }
            },
            legend: {
                show: true,
                position: 'top',
                labels: {
                    colors: color,
                },
                itemMargin: {
                    horizontal: 5,
                    vertical: 10
                },
            },
            dataLabels: {
                enabled: false
            },
            markers: {
                size: 0,
            },
            fill: {
                type: 'solid',
                opacity: 1
            },
            stroke: {
                curve: stroke_curve,
                show: true,
                width: 3,
                colors: [baseColor, green, infoColor]
            },
            xaxis: {
                tickAmount: 15,
                labels: {
                    style: {
                        colors: color,
                        fontSize: '12px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 400,
                        cssClass: 'apexcharts-xaxis-label',
                    },
                },
                title: {
                    text: title_xaxis,
                    style: {
                        color: color,
                        fontSize: '12px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 600,
                        cssClass: 'apexcharts-yaxis-title',
                    },
                },
            },
            yaxis: {
                labels: {
                    formatter: function (val) {
                        return (val).toFixed(1);
                    },
                    style: {
                        colors: color,
                        fontSize: '12px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 400,
                        cssClass: 'apexcharts-yaxis-label',
                    },
                },
                title: {
                    text: title_yaxis,
                    style: {
                        color: color,
                        fontSize: '12px',
                        fontFamily: 'Helvetica, Arial, sans-serif',
                        fontWeight: 600,
                        cssClass: 'apexcharts-yaxis-title',
                    },
                },
            },
            tooltip: {
                shared: false,
                y: {
                    formatter: function (val) {
                    return (val).toFixed(1)
                    }
                }
            },
            colors: [lightColor, green, infoColor],
            grid: {
                borderColor: borderColor,
                strokeDashArray: 4,
                yaxis: {
                    lines: {
                        show: true
                    }
                }
            },
            markers: {
                strokeColor: baseColor,
                strokeWidth: 3
            },
            title: {
                text: title,
                align: 'left',
                margin: 10,
                offsetX: 0,
                offsetY: 0,
                floating: false,
                style: {
                fontSize:  '18px',
                fontWeight:  'bold',
                fontFamily:  undefined,
                color:  color
                },
            },
            noData: {
                text: 'Loading...'
            }
        };
        return options;
    }

    var chart = new ApexCharts(element, getOptions(getColorMode(KTThemeMode.getMode()), [], 'Grafik Rata-Rata Berat Ikan (g/ekor)', 'Hari Ke-', 'Rata-Rata Berat Ikan (g/ekor)', 'smooth'));
    chart.render();

    var chart_feed = new ApexCharts(element_feed, getOptions(getColorMode(KTThemeMode.getMode()), [], 'Grafik Pemberian Pakan', 'Hari Ke-', 'Pemberian Pakan (kg)', 'stepline'));
    chart_feed.render();

    const getData = (color) =>{
        var url = '{{route("chart.simulation", ["pond_id"=>$pond->id])}}';

        $.getJSON(url, function(response) {
            chart.updateOptions(getOptions(color, response.data_weight, 'Grafik Rata-Rata Berat Ikan (g/ekor)', 'Hari Ke-', 'Rata-Rata Berat Ikan (g/ekor)', 'smooth'));
            chart_feed.updateOptions(getOptions(color, response.data_feed, 'Grafik Pemberian Pakan', 'Hari Ke-', 'Pemberian Pakan (kg)', 'stepline'));
            $('.apexcharts-menu-item').css({color: "black"});
        });
    }

    $(document).ready(function () { 
        var mode = KTThemeMode.getMode();
        getData(getColorMode(mode));
    });

    // change mode 
    $('a[data-kt-element="mode"]').on('click', function(){
        getData(getColorMode($(this).attr('data-kt-value')));
    });

    $('#kt_apexcharts_3').on('click', function(){
        $('.apexcharts-menu-item').css({color: "black"});
    });
</script>
@endpush