@extends('layouts.master')

@section('title', 'Agro Pro - Livestock Inventory List')

@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;">
                <a data-menu="createLInventoryList" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE LIVESTOCK INVENTORY</a>
            </div>
        </div>
        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Livestock Inventory</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="job-content">
                <div class="card card-style rounded-s" style="@if( $livestockInvLists->count() == 0) display:none; @else margin-top: 60px;" @endif>
                    <div class="content">
                        <h5 class="font-14 opacity-0">LIVESTOCK INVENTORY LIST<span class="float-end badge font-10 bg-highlight">{{ $livestockInvLists->count() }} </span></h5>
                        <div class="divider mb-3"></div>
                        <div class="list-group list-custom-small list-menu ms-0 me-1" id="inventory">

                            @foreach($livestockInvLists as $livestockInvList)
                                @php $variety_count = DB::table('livestock_inventory_varieties')->where('livestock_inventory_list_id', '=', $livestockInvList->id)->get()->count();@endphp
                                <a href="#" data-menu="LivestockInvListActions" data-id="{{$livestockInvList->id}}" data-name="{{$livestockInvList->inventory_name}}" class="livestockInvList_button">
                                    <i class="fa fa-boxes gradient-green color-white"></i>
                                    <span>{{$livestockInvList->inventory_name}}</span>
                                    <strong @if($variety_count > 0) class="badge gradient-yellow" @elseif($variety_count == 0) style="display:none;" @endif>{{$variety_count}}</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            @endforeach

                        </div>
                    </div>
                </div>
            </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>

    <div id="LivestockInvListActions" class="menu menu-box-bottom rounded-m bg-theme" style="min-width:95%; max-height:98%" !important ;>
        <div class="menu-title">
            <p class="color-highlight">Actions on</p>
            <h4 class="font-800" style="padding: 20px 0 0px 15px;"><span class="livestockInvList_name_text"></span></h4>
            <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
        </div>
        <div class="content">
            <div class="divider mt-n2"></div>
            <a href="#" data-id="" data-menu="editLInventoryList"  style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-1 rounded-sm view_edit_livestock_inventoryList">EDIT <span class="livestockInvList_name_text"></span></a>
            <a href="#" data-id="" style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-orange font-13 btn-m font-600 mt-1 rounded-sm view_livestockInvList_timeline">VIEW <span class="livestockInvList_name_text"></span> TIMELINE</a>
            <a href="#" data-id="" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-red font-13 btn-m font-600 mt-3 rounded-sm delete_livestockInvList">DELETE <span class="livestockInvList_name_text"></span></a>

        </div>
    </div>

    <form id="createLInventoryListForm" class="repeater">
        @csrf
        <div id="createLInventoryList" 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">Create Livestock</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">INVENTORY LIST</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content" style="margin-top: 0px; margin-bottom: 0px">
                <div class="divider" style="margin-top: 1px !important;"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4 input-style-active">
                        <label for="form5" class="color-highlight">Choose Livestock</label>
                        <select id="form5" value="" required autocomplete="livestock_list_id" name="livestock_list_id">
                            <option value="" selected>CHOOSE LIVESTOCK</option>
                            <option value="1" >ANY LIVESTOCK</option>
                            @foreach($livestockLists as $livestockList)
                                <option value="{{$livestockList->id}}">{{$livestockList->animal_name}}</option>
                            @endforeach
                        </select>
                        <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 mb-0" style="margin-bottom: 10px!important;">
                        <input type="text" style="text-transform: uppercase;" class="form-control validate-name" id="inventory_name" name="inventory_name" value="{{ old('inventory_name') }}" required autocomplete="inventory_name" autofocus placeholder="TYPE INVENTORY NAME">
                        <label for="inventory_name" class="color-highlight">Inventory Name</label>
                    </div>
                </div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4 input-style-active">
                        <label for="form5" class="color-highlight">Choose Inventory Type</label>
                        <select id="form5" value="" required name="inventory_type">
                            <option value="" selected>CHOOSE INVENTORY TYPE</option>
                            <option value="FEED">FEED</option>
                            <option value="DRUG">DRUG</option>
                            <option value="PRODUCE">PRODUCE</option>
                            <option value="OTHERS">OTHERS</option>
                        </select>
                        <span><i class="fa fa-chevron-down"></i></span>
                    </div>
                </div>

                <div data-repeater-list="variety">
                    <div data-repeater-item>
                        <div class="row mb-0">
                            <div class="col-8 input-style input-style-always-active has-borders no-icon mb-0">
                                <input type="text" style="text-transform: uppercase;" class="form-control validate-name" id="variety" name="variety" required autocomplete="variety" autofocus placeholder="TYPE VARIETY NAME">
                                <label for="variety" class="color-highlight">Variety Name</label>
                            </div>
                            <div class="col-4 mt-1">
                                <a href="#" data-repeater-delete class="btn close-menu btn-full btn-m bg-red-dark font-600 rounded-s">Delete</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <button id="add-variety" data-repeater-create type="button" style="width:-webkit-fill-available !important;" class="btn btn-full gradient-orange font-13 btn-m font-600 rounded-s">ADD VARIETY</button>
                </div>

                <!--div class="col-12">
                    <div class="row mb-0">
                        <div class="col-8">
                            <div class="input-style input-style-always-active has-borders mb-4">
                                <input type="text" style="text-transform: uppercase;" class="form-control validate-name" id="ri_unit" name="ri_unit" value="{{ old('ri_unit') }}" required autocomplete="ri_unit" autofocus placeholder="TYPE RELATIVE UNIT">
                                <label for="ri_unit" class="color-highlight">Relative Unit</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="input-style input-style-always-active has-borders mb-0" style="margin-bottom: 10px!important;">
                                <input type="number" name="ri_unit_amount" class="form-control" id="form1" placeholder="10">
                                <label for="form1" class="color-highlight">Quantity</label>
                            </div>
                        </div>
                    </div>
                </div-->

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders no-icon mb-4">
                        <label for="form51" class="color-highlight">Standard Unit</label>
                        <select id="form5" value="{{ old('standard_unit') }}" required autocomplete="standard_unit" name="standard_unit">
                            <option value="" selected>CHOOSE STANDARD UNIT</option>
                            @foreach($standardUnits as $standardUnit)
                                <option value="{{$standardUnit->unit_name}}">{{$standardUnit->unit_name}}</option>
                            @endforeach
                        </select>
                        <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 mb-4">
                        <input type="text" name="alert_when_less" class="form-control" id="form1" placeholder="QUANTITY">
                        <label for="form1" class="color-highlight">Alert If Lower Than</label>
                    </div>
                </div>

                <button type="submit" style="width:-webkit-fill-available !important;" class="mb-4 btn btn-full gradient-green font-13 btn-m font-600 mt-0 rounded-s">CREATE LIVESTOCK INVENTORY LIST</button>
            </div>
        </div>
    </form>

    <form id="editLInventoryListForm" class="repeater_edit">
        @csrf
        <div id="editLInventoryList" 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">Update</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;"><span class="livestockInvList_name_text"></span></h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content" style="margin-top: 0px; margin-bottom: 0px">

            </div>
        </div>
    </form>
@endsection

@section('footer-links')
    <script type="text/javascript" src="{{asset('scripts/bootstrap.min.js?v2')}}"></script>
    <script type="text/javascript" src="{{asset('scripts/custom.js?v13')}}"></script>

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

            function repeater_plugin(){
                $("body").find('.repeater').repeater({
                    defaultValues: {
                    },
                    show: function () {
                        $(this).slideDown();
                    },
                    hide: function (deleteElement) {
                        $(this).slideUp(deleteElement);
                    },
                    ready: function (setIndexes) {

                    }
                });
            }

            repeater_plugin();

            let livestockInvList_id, livestockInvList_name;

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

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

                livestockInvList_id = $(this).data("id");
                livestockInvList_name = $(this).data("name");

                $(".livestockInvList_name_text").text(livestockInvList_name);
            });

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

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Livestock Inventory List will be created!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#createLInventoryListForm").ajaxSubmit({
                                type: "POST",
                                url: "create_linventoryList",
                                dataType: "json",
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Livestock Inventory List Created", "success");

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

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

                                    }
                                }
                            });
                        });

                }
            });

            $("#editLInventoryListForm").submit(function(e){
                e.preventDefault();
                var error = false;
                let $_this = $(this), update_variety ={}, insert_variety = [];
                $_this.find("[name^=variety]").each(function (i,v){
                    let variety_id = $(this).data("id"), variety_name= $(this).val();
                    if(variety_id) {
                        update_variety[variety_id] = variety_name
                    } else {
                        insert_variety.push(variety_name)
                    }

                    // console.log($(this).data("id"), $(this).val());
                });

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: livestockInvList_name+" will be updated!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#editLInventoryListForm").ajaxSubmit({
                                type: "PUT",
                                url: "edit_linventoryList",
                                dataType: "json",
                                data: {
                                    livestockInvList_id: livestockInvList_id,
                                    update_variety: update_variety,
                                    insert_variety: insert_variety

                                },
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", livestockInvList_name+" Inventory Updated", "success");

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


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

                                    }
                                }
                            });
                        });

                }
            });

            $(".view_edit_livestock_inventoryList").on("click", function (e) {
                $.ajax({
                    type: "GET",
                    url: "view_edit_livestock_inventoryList",
                    dataType: "json",
                    data: {
                        livestockInvList_id: livestockInvList_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $("#editLInventoryList .content").html(response.body);

                            // repeater_plugin();

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

                        }
                    }
                });
            })

            $("#LivestockInvListActions").on("click", ".delete_livestockInvList", function (e) {
                swal({
                        title: "Are you sure?",
                        text: livestockInvList_name+" Inventory will be deleted!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $.ajax({
                            type: "DELETE",
                            url: "delete_linventoryList",
                            dataType: "json",
                            data:{
                                livestockInvList_id: livestockInvList_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", livestockInvList_name+" Inventory Deleted", "success");

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


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

                                }
                            }
                        });
                    });
            });

            $("#LivestockInvListActions").on("click", ".view_livestockInvList_timeline", function (e) {

                $.ajax({
                    type: "GET",
                    url: "view_timeline",
                    dataType: "json",
                    data:{
                        asset_id: livestockInvList_id,
                        asset_type: 'LIVESTOCK INVENTORY'
                    },
                    success: function (response) {
                        window.location.href = response.url;
                    }
                });
            });

        });
    </script>

    </body>
    </html>
@endsection