@extends('layouts.sidik')

@section('content')
<div id="app">
    <div class="row justify-content-center ">
            <div class="col-md-10 mb-4">
                <h3 style="text-align:center">Informasi Serta Merta - Harga Komoditi Kaltim</h3>
                
            </div>
        <div class="col-md-10 ">
            <div class="card-deck">
                <div class="card p-3">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Informasi</h3>
                            <p>Data Harga Per Pasar</p>
                        </div>
                        <div class="col-md-12">
                            <div class="row mt-3">
                                <div class="col-md-3">

                                    <span class="float-left">Kabupaten/Kota</span>
                                    <select v-model="kab_kota_pasar" @change="searchPasar" class="browser-default custom-select mb-4">
                                        <option value="">Semua Kabupaten/Kota</option>
                                        @foreach ($kotas as $kota)
                                        <option value="{{$kota['id']}}">{{$kota['name']}}</option>
                                        @endforeach
                                    </select>
    


                                </div>
                                <div class="col-md-3">

                                    <span class="float-left">Pasar</span>
                                    <select v-model="pasar_id"class="browser-default custom-select mb-4">
                                        <option value="">Semua Pasar</option>
                                        <option :value="psr.id" v-for="psr in pasar">@{{psr.name}}</option>
                                    </select>
    


                                </div>
                                <div class="col-md-3">

                                    <span class="float-left">Tanggal</span>
                                    <input placeholder="Pilih tanggal" type="date" v-model="tangga_2"
                                        class="form-control">


                                </div>
                                <div class="col-md-3">
                                    <button type="submit" style="width:100%;"
                                        class="btn mt-3 btn-outline blue-gradient  waves-effect"
                                        @click="searchHargaPasar">Cari</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-10 mt-3 mb-5">
                <!-- Table with panel -->
                <div class="card card-cascade narrower">
                    <!--Card image-->
                    <div
                        class="view view-cascade gradient-card-header blue-gradient narrower py-2 mb-3 d-flex justify-content-between align-items-center">
                        <a class="white-text mx-3">Informasi Data @{{ (pasar_harga.name == 'Semua Provinsi' ? 'Semua Pasar' : pasar_harga.name ) || 'Per Pasar'}} </a>
                        <div>
                                <a class="btn btn-outline-white btn-rounded btn-sm px-2" @click="page_pasar-=1" v-if="page_pasar > 1">
                                        <i class="fas fa-chevron-left mt-0"></i>
                                    </a>
                                    <a class="btn btn-outline-white btn-rounded btn-sm px-2" @click="page_pasar+=1"
                                        v-if="page_pasar < total_pages_pasar">
                                        <i class="fas fa-chevron-right mt-0"></i>
                                    </a>
                            <a href="{{route('sidik.serta_merta')}}" class="btn btn-outline-white btn-rounded btn-sm px-2">
                                <i class="fas fa-redo mt-0"></i>
                            </a>
                        </div>
                    </div>
                    <!--/Card image-->
                    <div class="px-4">
                            <div class="table-wrapper">
                                    <!--Table-->
                                    <table class="table table-hover  mb-0">
                                        <!--Table head-->
                                        <thead>
                                            <tr>
                                                <th class="th-lg">
                                                   Komoditas
                                                </th>
                                                <th class="th-lg">
                                                    Keterangan
                                                </th>
                                                <th class="th-lg">
                                                    Harga
                                                </th>
            
                                            </tr>
                                        </thead>
                                        <!--Table head-->
            
                                        <!--Table body-->
                                        <tbody>
                                            <tr v-for="pasar in filterHargaPasar">
                                                <td>@{{pasar.name}}</td>
                                                <td>
                                                    <small class="text-muted red-text" v-if="pasar.trend == 'up'">
                                                        Harga Naik <i class="fas fa-arrow-up"></i>
                                                    </small>
                                                    <small class="text-muted green-text" v-else-if="pasar.trend == 'down'">
                                                        Harga Turun <i class="fas fa-arrow-down"></i>
                                                    </small>
                                                    <small class="text-muted blue-text" v-else-if="pasar.trend == 'still'">
                                                        Harga Tetap <i class="fas fa-pause"></i>
                                                    </small>
                                                    <small class="text-muted grey-text" v-else>
                                                        Harga Tidak Diketahui
                                                    </small>
                                                </td>
                                                <td>Rp@{{pasar.price}}</td>
                                            </tr>
                                            <tr v-if="pasar_harga.prices.length == 0">
                                                <td colspan="3" align="center">Data Tidak Ada.</td>
                                            </tr>
                                        </tbody>
                                        <!--Table body-->
                                    </table>
                                    <!--Table-->
                                </div>
                    </div>
                </div>
            </div>

        <div class="col-md-10">
            <div class="card-deck">
                <div class="card p-3">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Informasi</h3>
                            <p>Data Harga Per Kabupaten/Kota</p>
                        </div>
                        <div class="col-md-12">
                            <div class="row mt-3">
                                <div class="col-md-4">

                                    <span class="float-left">Kabupaten/Kota</span>
                                    <select v-model="kab_kot" class="browser-default custom-select mb-4">
                                        <option value="">Semua Kabupaten/Kota</option>
                                        @foreach ($kotas as $kota)
                                        <option value="{{$kota['id']}}">{{$kota['name']}}</option>
                                        @endforeach
                                    </select>


                                </div>
                                <div class="col-md-4">

                                    <span class="float-left">Tanggal</span>
                                    <input placeholder="Pilih tanggal" type="date" v-model="tanggal"
                                        class="form-control">


                                </div>
                                <div class="col-md-4">
                                    <button type="submit" style="width:100%;"
                                        class="btn mt-3 btn-outline blue-gradient  waves-effect"
                                        @click="searchHargaKab">Cari</button>
                                </div>
                            </div>
                        </div>

                    </div>
                    
                </div>
            </div>
        </div>
        <div class="col-md-10 mt-3">
            <!-- Table with panel -->
            <div class="card card-cascade narrower">
                <!--Card image-->
                <div
                    class="view view-cascade gradient-card-header blue-gradient narrower py-2 mb-3 d-flex justify-content-between align-items-center">
                    <a class="white-text mx-3">Harga Rata-Rata dan Perubahan @{{ (harga_kab.name == 'Semua Provinsi' ? 'Pasar': harga_kab.name) || 'Pasar' }}</a>
                    <div>
                        <a class="btn btn-outline-white btn-rounded btn-sm px-2" @click="page-=1" v-if="page > 1">
                            <i class="fas fa-chevron-left mt-0"></i>
                        </a>
                        <a class="btn btn-outline-white btn-rounded btn-sm px-2" @click="page+=1"
                            v-if="page < total_pages">
                            <i class="fas fa-chevron-right mt-0"></i>
                        </a>
                        <a href="{{route('sidik.serta_merta')}}" class="btn btn-outline-white btn-rounded btn-sm px-2">
                            <i class="fas fa-redo mt-0"></i>
                        </a>
                    </div>
                </div>
                <!--/Card image-->
                <div class="px-4">
                    <div class="row mb-3">

                        <div class="col-md-4 mb-3" v-for="data in filterHargaKab">
                            <div class="card-deck" >
                                <div class="card" style="height: 195px;">
                                    <div class="card-body">
                                        <h6 style="font-size:1em; text-align:center; font:bold;" class="card-title">@{{data.name }}</h6>
                                        <hr>
                                        <h6 style="text-align:center;">Rp@{{data.price}} </h6>
                                        <hr>
                                        <p class="card-text" style="text-align:center;">
                                            PER @{{data.denom.toUpperCase()}}
                                            <small class="text-muted red-text" v-if="data.trend == 'up'">
                                                Naik <i class="fas fa-arrow-up"></i>
                                            </small>
                                            <small class="text-muted green-text" v-else-if="data.trend == 'down'">
                                                Turun <i class="fas fa-arrow-down"></i>
                                            </small>
                                            <small class="text-muted blue-text" v-else>
                                                Harga Tetap <i class="fas fa-pause"></i>
                                            </small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <center>
                        Sumber Data : 
                        <a href="http://laminetam.id" target="_blank" style="color:blue;">Laminetam</a>
                        
                        
                    </center>
            </div>
        </div>
    </div>
    @endsection

    @push('script')

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                harga_kab: {
                    prices: [],
                },
                kab_kot: '',
                tanggal: '',
                page: 1,
                per_page: 9,
                total_pages: null,
                kab_kota_pasar: '',
                pasar_harga: {
                    prices: [],
                },
                pasar: [],
                pasar_id: '',
                tangga_2: '',
                page_pasar: 1,
                per_page_pasar: 10,
                total_pages_pasar: null,
            },

            mounted() {
                this.getHargaKab()
            },

            computed: {
                filterHargaKab() {
                    var offset = (this.page - 1) * this.per_page
                    var datas = this.harga_kab.prices.filter(data => data.type === 'commodity')
                    var paginatedItems  = datas.slice(offset).slice(0, this.per_page)
                    this.total_pages = Math.ceil(datas.length / this.per_page)
                    return paginatedItems
                },
                filterHargaPasar() {
                    var offset = (this.page_pasar - 1) * this.per_page_pasar
                    var datas = this.pasar_harga.prices
                    var paginatedItems  = datas.slice(offset).slice(0, this.per_page_pasar)
                    this.total_pages_pasar = Math.ceil(datas.length / this.per_page_pasar)
                    return paginatedItems
                }
            },

            methods: {
                async getHargaKab() {
                    try {
                        const {data} = await axios.post('./api/harga-kota', {tanggal: this.tanggal, kab_kot: this.kab_kot})
                        this.harga_kab = data
                    } catch (error) {
                        
                    }
                    
                }, 
                async searchHargaKab() {
                    try {
                        const {data} = await axios.post('./api/harga-kota', {tanggal: this.tanggal, kab_kot: this.kab_kot})
                        this.harga_kab = data
                    } catch (error) {
                        
                    }
                },
                async searchPasar() {
                    try {
                        const {data} = await axios.post('./api/cari-pasar', {kab_kota_pasar: this.kab_kota_pasar})
                        this.pasar = data
                    } catch (error) {
                        
                    }
                },
                async searchHargaPasar() {
                    try {
                        const {data} = await axios.post('./api/harga-pasar', {pasar_id: this.pasar_id, tanggal: this.tangga_2})
                        this.pasar_harga = data
                    } catch (error) {
                        
                    }
                }
            },
        })
    </script>
    @endpush