@extends('layouts.app')
@section('title', 'Tambah Data 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">
        Tambah 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.create') }}" class="text-muted">Tambah Budidaya &nbsp;</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        <!--end::Info-->
        <!--begin::Toolbar-->
    </div>
</div>
@endsection
@section('content')
<div class="card card-flush">
    <form action="{{route('cultivation.store')}}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="card-body fs-6 text-gray-700">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> Ada beberapa masalah dengan input Anda.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="mb-5">
                <div class="row">
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Pilih Jenis Ikan</Label>
                        <select class="form-select" data-control="select2"
                            data-placeholder="Pilih jenis ikan yang dibudidaya" name="fish_type" id="fish_type" required>
                            <option></option>
                            @foreach ($fish_type as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Tanggal Tebar Benih</Label>
                        <input class="form-control" name="sow_date" id="sow_date"
                            placeholder="Masukkan tanggal tebar benih" required>
                    </div>
                </div>
            </div>
    
            <div class="mb-5">
                <div class="row">
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Jumlah Bibit (ekor)</Label>
                        <input type="number" class="form-control" step="any" name="seed_amount" id="seed_amount"
                            placeholder="Masukkan jumlah bibit yang akan dibudidaya" required>
                    </div>
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Rata-Rata Berat Bibit (gram/ekor)</Label>
                        <input type="number" class="form-control" step="any" name="seed_weight" id="seed_weight"
                            placeholder="Masukkan berat bibit yang akan dibudidaya" required>
                    </div>
                </div>
            </div>
    
            <div class="mb-5">
                <div class="row">
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Volume Kolam (m<sup>3</sup>)</Label>
                        <select type="pond_volume" name="pond_volume" class="form-select" data-control="select2" id="pond_volume"
                            aria-describedby="pond_volume" required>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <Label class="form-label required fs-6 fw-bold mt-2 mb-3">Rata-Rata Berat Ikan per Ekor yang akan
                            dijual</Label>
                        <select type="total_fish_count" name="total_fish_count" class="form-select" data-control="select2" id="total_fish_count"
                            aria-describedby="total_fish_count" required>
                        </select>
                    </div>
                </div>
            </div>

            <div class="footer d-flex justify-content-end py-10">
                <div class="d-flex justify-content-end">
                    <a href="{{route('cultivation.index')}}" id="cancelButton" class="btn btn-light btn-active-light-primary me-3">Batalkan</a>
                    <button id="save-cultivation" type="submit" class="btn btn-active-primary btn-primary"
                        data-kt-indicator="off">
                        <span class="indicator-label">
                            Tambah
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // sow date picker
    const today = new Date();
    $('#sow_date').daterangepicker({
            timePicker: false,
            singleDatePicker: true,
            maxDate: today,
            locale: {
                format: "Y-M-D",
            }
        });

    // function get data when select2 changes
    function onChangeSelect(url, fish_id, name, seed_amount) {
        var placeholder_select = '';
        switch (name) {
            case 'pond_volume':
                placeholder_select = 'Masukkan volume kolam yang akan dibudidaya';
                break;
            case 'total_fish_count':
                placeholder_select = 'Masukkan rata-rata berat ikan per ekor yang akan dijual';
                break;
            default:
                placeholder_select = 'Pilih';
                break;
        }
        $('#'+name).select2({
        ajax: {
            url: url,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                var query = {
                    search: params.term,
                    type: 'public',
                    fish_id: fish_id,
                    seed_amount: seed_amount
                }
                return query;
            },
        },
        placeholder: placeholder_select,
        });
    }

    // on change fish type
    $('#fish_type').on('change', function(){
        var selectedData = $(this).select2('data');
        var fish_name = selectedData.map(function(option) {
            return option.text;
        });
        $('#pond_volume').empty();
        $('#total_fish_count').empty();
        onChangeSelect('{{ route("pond.volume") }}', $(this).val(), 'pond_volume', $('#seed_amount').val());
        onChangeSelect('{{ route("fish.count") }}', $(this).val(), 'total_fish_count', $('#seed_amount').val());
    });

    // on change seed_amount
    $('#seed_amount').on('change', function(){
        $('#pond_volume').empty();
        $('#total_fish_count').empty();
        onChangeSelect('{{ route("pond.volume") }}', $('#fish_type').val(), 'pond_volume', $('#seed_amount').val());
        onChangeSelect('{{ route("fish.count") }}', $('#fish_type').val(), 'total_fish_count', $('#seed_amount').val());
    });

    $(document).ready(function(){
        onChangeSelect('{{ route("pond.volume") }}', $('#fish_type').val(), 'pond_volume', $('#seed_amount').val());
        onChangeSelect('{{ route("fish.count") }}', $('#fish_type').val(), 'total_fish_count', $('#seed_amount').val());
    });
</script>
@endpush