@extends('layouts.master')

@section('title', 'Agro Pro - Transplant Crop')

@section('content')
    <div id="page">
        <div class="card cardi card-style" style="position: fixed !important; top: 50px; left: 0; right: 0; z-index: 50;margin: 0px 0px 0px 0px; border-radius: 0px;backdrop-filter: saturate(180%) blur(20px);">
            <div class="content" style="margin-top:5px;">
                <h5 id="filtered_date" class="text-left mb-0"style="margin-top:15px">{{ \Carbon\Carbon::parse ($db_current_date)->isoFormat('ddd, Do MMMM, YYYY')}}</h5>
                <div class="row" style="margin-bottom: 0px; margin-top: 0px; !important;">
                    <div class="col-7 text-center">
                        <a data-menu="transplantCrop" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-seedling"></i>  TRANSPLANT CROP</a>
                    </div>
                    <div class="col-5 text-center">
                        <a data-menu="changeDate" href="#" class="btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-s"><i class="fa fa-filter"></i>  FILTER</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Transplant Crop</a>
            <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
            <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
        </div>

        <div class="page-title-clear"></div>
        <div class="page-content">

            <div class="card card-style mb-3 rounded-s" style="margin-top: 90px;">
            </div>

            <div class="job-content">
                @foreach($cropPlantations as $cropPlantation)
                    <div class="card card-style mb-3 rounded-s">
                        <div class="list-group list-custom-small list-icon-0 bg-grass-dark ps-2 pe-4">
                            <a data-bs-toggle="collapse" class="cropInvGroup_button no-effect" data-id="{{$cropPlantation->id}}" href="#collapse-{{$cropPlantation->id}}">

                                @php $inventory_id = DB::table('crop_inventory_group')->where('id', $cropPlantation->crop_inventory_group_id)->value('crop_inventory_list_id'); $inventory_name = DB::table('crop_inventory_lists')->where('id', $inventory_id)->value('inventory_name');@endphp

                                <i class="fa font-14 fa-sync-alt color-white"></i>
                                <span class="font-14 color-white">{{$inventory_name}}/{{$farm_id}}/{{$cropPlantation->id}}</span>
                                <span class="badge font-10 bg-white" style="color:#2aba66;">{{ $cropPlantation->group_total }}</span>
                            </a>
                        </div>
                        <div class="collapse ps-2 pe-2" id="collapse-{{$cropPlantation->id}}">
                            <table class="mt-3 table table-borderless text-center rounded-s shadow-l" style="background: #eef2f1;overflow: hidden;">
                                <tbody>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Crop Inventory</th>
                                    <td class="inventory_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Variety</th>
                                    <td class="variety_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Total Planted</th>
                                    <td class="total_planted color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Planting Area</th>
                                    <td class="field color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Planting Date</th>
                                    <td class="color-teal-white"style="margin-right: 20px;float: right;">{{ \Carbon\Carbon::parse($cropPlantation->planting_date)->isoFormat('ddd, Do MMM, YYYY')}}</td>
                                </tr>
                                <tr>
                                    <th scope="row"style="margin-left: 20px;float: left;">Done By</th>
                                    <td class="user_name color-teal-white"style="margin-right: 20px;float: right;"></td>
                                </tr>
                                </tbody>
                            </table>

                            @if($cropPlantation->total_remaining === 0.00)

                            @else

                                <div class="row" style="margin: -15px -10px 15px -10px">
                                    <div class="col-5 text-center">
                                        <a data-id="{{$cropPlantation->id}}" style="width:-webkit-fill-available !important;" href="#" class="btn btn-full gradient-orange font-13 btn-m font-600 mt-3 rounded-s delete_transplantation">DELETE</a>
                                    </div>
                                    <div class="col-7 text-center">
                                        <a data-id="{{$cropPlantation->id}}" @if($cropPlantation->total_remaining === 0.00) data-menu="" @else data-menu="retransplantCrop" @endif style="width:-webkit-fill-available !important;" href="#" class="btn btn-full gradient-grass font-13 btn-m font-600 mt-3 rounded-s re_transplant_crop">TRANSPLANT</a>
                                    </div>
                                </div>

                            @endif

                        </div>
                    </div>
                @endforeach
            </div>

        </div>

        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

    </div>
    <form id="retransplantCropForm">
        @csrf
        <div id="retransplantCrop" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Transplant</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">CROP</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>

            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-0">
                    <input readonly type="text" class="form-control validate-name" id="total_remaining" name="total_remaining" required autofocus placeholder="Quantity">
                    <label for="total_remaining" class="color-highlight">Total Remaining</label>
                </div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-0">
                    <input type="text" class="form-control validate-name" id="transplant_quantity" name="transplant_quantity" required autofocus placeholder="Quantity">
                    <label for="transplant_quantity" class="color-highlight">Quantity To Transplant</label>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="field" value="" required autocomplete="field" name="field">
                            <option value="" selected>CHOOSE PLANTING AREA</option>
                            @foreach($fields as $field)
                                <option value="{{$field->id}}">{{$field->field_name}}</option>
                            @endforeach
                        </select>
                        <label for="field" class="color-highlight">Choose Planting Area</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-4">
                    <label for="planting_date" class="color-highlight">Transplanting Date</label>
                    <input type="date" name="planting_date" value="{{$current_date}}" max="{{$current_date}}" min="2021-01-01" class="form-control validate-text" id="planting_date" placeholder="TRANSPLANTING DATE">
                    <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                    <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">TRANSPLANT CROP</button>

            </div>
        </div>
    </form>

    <form id="transplantCropForm">
        @csrf
        <div id="transplantCrop" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Transplant</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">CROP</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>

            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="cropList" value="" required autocomplete="cropList" name="cropList">
                            <option value="" selected>CHOOSE CROP</option>
                            @foreach($cropLists as $cropList)
                                <option value="{{$cropList->id}}">{{$cropList->plant_name}}</option>
                            @endforeach
                        </select>
                        <label for="cropList" class="color-highlight">Choose Crop</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="crop_plantation" value="" required autocomplete="crop_plantation" name="crop_plantation">
                            <option value="" selected>CHOOSE CROP PLANTATION</option>
                        </select>
                        <label for="crop_plantation" class="color-highlight">Choose Crop Plantation</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-0">
                    <input type="text" class="form-control validate-name" id="seed_quantity" name="seed_quantity" required autofocus placeholder="Quantity">
                    <label for="seed_quantity" class="color-highlight">Quantity To Transplant</label>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <select id="field" value="" required autocomplete="field" name="field">
                            <option value="" selected>CHOOSE PLANTING AREA</option>
                            @foreach($fields as $field)
                                <option value="{{$field->id}}">{{$field->field_name}}</option>
                            @endforeach
                        </select>
                        <label for="field" class="color-highlight">Choose Planting Area</label>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div class="col-12 input-style input-style-always-active has-borders no-icon mb-4">
                    <label for="planting_date" class="color-highlight">Transplanting Date</label>
                    <input type="date" name="planting_date" value="{{$current_date}}" max="{{$current_date}}" min="2021-01-01" class="form-control validate-text" id="planting_date" placeholder="TRANSPLANTING DATE">
                    <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                    <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">TRANSPLANT CROP</button>

            </div>
        </div>
    </form>

    <form id="changeDateForm">
        @csrf
        <div id="changeDate" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Change</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">DATE</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <label for="current_date" class="color-highlight">Job Date</label>
                        <input type="date" name="current_date" value="{{$current_date}}" max="2030-01-01" min="2021-01-01" class="form-control validate-text" id="current_date" placeholder="JOB DATE">
                        <i class="fa fa-check disabled valid me-4 pe-3 font-12 color-green-dark"></i>
                        <i class="fa fa-check disabled invalid me-4 pe-3 font-12 color-red-dark"></i>
                    </div>
                </div>

                <button style="width:-webkit-fill-available !important;" href="#" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CHANGE DATE</button>

            </div>
        </div>
    </form>

@endsection

@section('footer-links')

    <script>
        function close_modal(){
            $(".modal").modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }

        $(function() {
            let db_current_date = '{{$db_current_date}}';

            let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?date=' + db_current_date  ;
            window.history.replaceState({path: newurl}, '', newurl);

            $('.selectpicker').select2();

            let crop_list_id, inventory_name, plant_name, crop_inventory_group_id, standard_unit, cropInvGroup_id, current_date;

            $(".page-content").on("click", ".cropInvGroup_button", function (e) {
                cropInvGroup_id = $(this).data("id");
                console.log(cropInvGroup_id);

                let $_this= $(this);
                $.ajax({
                    type: "POST",
                    url: "get_plantation_details",
                    dataType: "json",
                    data:{
                        cropInvGroup_id: cropInvGroup_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $_this.parents(".card").find(".variety_name").text(response.variety_name);
                            $_this.parents(".card").find(".inventory_name").text(response.inventory_name);
                            $_this.parents(".card").find(".user_name").text(response.username);
                            $_this.parents(".card").find(".total_planted").text(response.total_planted+ ' '+response.standard_unit);
                            $_this.parents(".card").find(".field").text(response.field);
                        }
                        else{
                        }
                    }
                });

            });

            $(".page-content").on("click", ".re_transplant_crop", function (e) {

                $('#transplant_quantity').attr("placeholder", 'Quantity');
                cropInvGroup_id = $(this).data("id");
                console.log(cropInvGroup_id);
                var element = document.getElementById("retransplantCrop");
                element.classList.add("menu-active");

                let $_this= $(this);
                $.ajax({
                    type: "POST",
                    url: "get_crop_plantations_info",
                    dataType: "json",
                    data:{
                        cropInvGroup_id: cropInvGroup_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $('#transplant_quantity').attr("placeholder", 'IN '+response.standard_unit+' OF '+response.inventory_name);
                            $('#total_remaining').val(response.total_remaining+' ' +response.standard_unit+' OF '+response.inventory_name);
                        }
                        else{
                        }
                    }
                });

            })

            $('#cropList').on('change',function(){

                $('#seed_quantity').attr("placeholder", 'Quantity');
                dropdown = $('#cropList');
                plant_name = dropdown.find("option:selected").text();
                crop_list_id = $(this).val();
                console.log(plant_name);
                console.log(crop_list_id);
                $.ajax({
                    type: "POST",
                    url: "get_crop_plantations",
                    dataType: "json",
                    data:{
                        crop_list_id: crop_list_id
                    },
                    success: function (response) {
                        $('#seed_quantity').attr("placeholder", 'IN '+response.standard_unit+' OF '+response.inventory_name);
                        $('#crop_plantation')
                            .find('option')
                            .remove()
                            .end()
                            .append('<option value="">CHOOSE CROP PLANTATION</option>');
                        $.each(response.plantations,function(key,value){
                            $("#crop_plantation").append('<option value="'+value.id+'">'+value.group_name+' ('+value.total_remaining+' '+response.standard_unit+' OF '+response.inventory_name+')</option>');
                        });
                    }
                });
            });

            $("#transplantCropForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Crop will be transplanted!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#transplantCropForm").ajaxSubmit({
                                type: "POST",
                                url: "transplant-crop",
                                dataType: "json",
                                data: {
                                    plant_name: plant_name
                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Crop transplanted", "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#transplantCropForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("transplantCrop");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");

                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

            $("#retransplantCropForm").submit(function(e){
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Crop will be transplanted!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#retransplantCropForm").ajaxSubmit({
                                type: "POST",
                                url: "re-transplant-crop",
                                dataType: "json",
                                data: {
                                    crop_plantation: cropInvGroup_id
                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Crop transplanted", "success");

                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#retransplantCropForm').resetForm();
                                        $("#filtered_date").load(location.href+(' #filtered_date'));
                                        var element = document.getElementById("retransplantCrop");
                                        element.classList.remove("menu-active");
                                        var element = document.getElementById("logger");
                                        element.classList.remove("menu-active");

                                    } else{
                                        swal("Cancelled!", response.msg, "error")

                                    }
                                }
                            });
                        });

                }
            });

            $('#current_date').on('change',function(){
                current_date = $(this).val();
                console.log(current_date);
            })

            $("#changeDateForm").submit(function(e){

                current_date = $('#current_date').val();
                e.preventDefault();
                var error = false;

                if(!error){
                    close_modal();
                    let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?date=' + current_date  ;
                    window.history.replaceState({path: newurl}, '', newurl);

                    $(".job-content").load(location.href+(' .job-content'));
                    $('#changeDateForm').resetForm();
                    $("#filtered_date").load(location.href+(' #filtered_date'));
                    var element = document.getElementById("changeDate");
                    element.classList.remove("menu-active");
                    var element = document.getElementById("logger");
                    element.classList.remove("menu-active");

                }
            });

            $(".page-content").on("click", ".delete_transplantation", function (e) {

                cropInvGroup_id = $(this).data("id");
                console.log(cropInvGroup_id);

                swal({
                        title: "Are you sure?",
                        text: "Crop Transplantation will be deleted!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $.ajax({
                            type: "DELETE",
                            url: "delete_transplantation",
                            dataType: "json",
                            data:{
                                cropInvGroup_id: cropInvGroup_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", "Crop Transplantation Deleted", "success");

                                    $(".job-content").load(location.href+(' .job-content'));

                                    var element = document.getElementById("logger");
                                    element.classList.remove("menu-active");

                                } else{
                                    swal("Cancelled!", response.msg, "error")

                                }
                            }
                        });
                    });
            })

        });
    </script>

    </body>
    </html>
@endsection