@extends('layouts.app')
@section('content')

@php
$yes_no_options = ['Yes' => 'Yes', 'No' => 'No' ];
@endphp

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Project Template <small>BOM</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Project Template</a></li>
            <li class="breadcrumb-item active" aria-current="page">BOM</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{ url('project_templates') }}"> <i class="fa fa-arrow mb-3-left"></i> Back to Templates</a>
    </div>

</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">

    @if ($message = Session::get('success'))
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Greate Job!</strong> {{ $message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif


    <div class="row mb-3">
        <div class="col-md-12 ml-auto mr-auto">

            <!-- Nav tabs -->
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs justify-content-center" role="tablist">

                        <li class="nav-item">
                            <a class="nav-link active" href="{{ url('project_template/bom/' . $data->id) }}">
                                BOM
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="{{ url('project_template/costing/' . $data->id) }}">
                                Costing Management
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">

                    <hr class="mt-3">

                    <p class="lead mb-0 fs-4 py-2">Create the BOM</p>

                    {!! Form::open(['id' => 'dataForm', 'name' => 'dataForm', 'class'=>'form-horizontal']) !!}
                    @csrf
                    <input type="hidden" name="id" id="id" value="">
                    <input type="hidden" name="vendor_id" id="vendor_id" value="1">

                    <input type="hidden" name="template_id" value="{{ $data->id }}">

                    <div class="row mb-3 mb-3" id="photographs_section">
                        <div class="col-md-3 mb-0 form-group">
                            <label>Product Category</label>
                            {{ Form::select('cat_id', ['' => 'Select Category'] + $categories, '', ['class' => 'standardSelect form-control', 'id' => 'cat_id', 'data-live-search' => 'true', 'data-size' => '5']) }}

                            <span class="text-danger" id="cat_id-error"></span>
                        </div>
                        <div class="col-md-3 mb-0 form-group">
                            <label>Cost Center</label>
                            {{ Form::select('cost_center', ['' => 'Select Cost Center']+$cost_centers, '', ['class' => 'standardSelect form-control', 'id' => 'cost_center', 'data-live-search' => 'true', 'data-size' => '5',]) }}

                            <span class="text-danger" id="product_id-error"></span>
                        </div>
                        <div class="col-md-3 mb-0 form-group">
                            <label>Product</label>
                            {{ Form::select('product_id', ['' => 'Select Product'], '', ['class' => 'standardSelect form-control', 'id' => 'product_id', 'data-live-search' => 'true', 'data-size' => '5',]) }}

                            <span class="text-danger" id="product_id-error"></span>
                        </div>

                        <div class="col-md-3 mb-0 form-group">
                            <label>Quantity</label>
                            {{ Form::text('quantity', '', ['class' => 'form-control', 'id' => 'quantity']) }}

                            <span class="text-danger" id="quantity-error"></span>
                        </div>
                    </div>

                    <div class="py-3 d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            {{ !empty($answers) ? 'Update Details' : 'Save Details' }}
                        </button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>



    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card shadow">

                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Sr.</th>
                                    <th>Category</th>
                                    <th>Cost Center</th>
                                    <th>Product</th>
                                    <th>Quantity</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

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


</div>
@endsection


@section('scripting')
<script type="text/javascript">
    $(document).ready(function() {

        $(".standardSelect").selectpicker();

        // $('.standardSelect').on('change', function() {
        //     // $(this).selectpicker('refresh');
        //     $(this).removeClass('open');
        // });

        // $('#dataForm').data("validator").settings.ignore = "";

        jQuery.validator.setDefaults({
            debug: true
        });


        let template_id = "{{$data->id}}";
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('getProjectTemplateBOMData') }}/" + template_id,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'category',
                    name: 'category'
                },
                {
                    data: 'cost_center',
                    name: 'cost_center'
                },
                {
                    data: 'product',
                    name: 'product'
                },
                {
                    data: 'quantity',
                    name: 'quantity'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        table.on('draw', function() {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'top',
            });
        });

    });


    $('body').on('click', '.delete_bom', function() {
        var btn = $(this);
        var bom_id = btn.data('id');

        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this BOM item!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ url('project_template/bom/delete') }}/" + bom_id,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            swal("Deleted!", response.message, "success");
                            btn.closest('tr').remove(); // Remove the row from the table
                        } else {
                            swal("Error!", response.message, "error");
                        }
                    },
                    error: function() {
                        swal("Error!", "Something went wrong!", "error");
                    }
                });
            } else {
                swal("Your BOM item is safe!");
            }
        });
    });








    if ($("#dataForm").length > 0) {
        $("#dataForm").validate({
            errorClass: "is-invalid",
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass);
                $(element).parent().removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                element.parent().append(error);
            },
            rules: {
                stage_id_fk: 'required',
                first_name: 'required',
                phone: 'required',
            },
            messages: {
                stage_id_fk: "Please Select Stage.",
                first_name: "Please Enter Client Name.",
                phone: "Please Enter Phone.",
            },
            submitHandler: function(form) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $('#saveBtn').html('Sending..');
                $.ajax({
                    data: $('#dataForm').serialize(),
                    url: "{{ url('project_template/bom/store') }}",
                    type: "POST",
                    dataType: 'json',
                    success: function(data) {
                        swal({
                                title: "Good job!",
                                text: data.msg,
                                icon: "success",
                            })
                            .then((willDelete) => {
                                $(".data-table").DataTable().ajax.reload();
                                $('#dataForm')[0].reset();
                                $('.standardSelect').selectpicker('refresh');
                            });
                    },
                    error: function(data) {
                        if (data.status == 422) {
                            var x = data.responseJSON;
                            $.each(x.errors, function(index, value) {
                                console.log(index);
                                $("#" + index).addClass("is-invalid");
                                $('.standardSelect').selectpicker('refresh');
                                $("#" + index + "-error").html(value[0]);
                            });
                        }
                        $('#saveBtn').html('Save Changes');
                    }
                });
            }
        });
    }


    $('#cat_id').change(function() {
        var cat_id = $('#cat_id').val();
        var cost_center = $('#cost_center').val();
        getProductsbyCatId(cat_id, cost_center);
    })

    $('#cost_center').change(function() {
        var cat_id = $('#cat_id').val();
        var cost_center = $('#cost_center').val();
        getProductsbyCatId(cat_id, cost_center);
    })


    function getProductsbyCatId(cat_id, cost_center) {
        let url = "{{ url('getProductsbyCatId') }}/" + cat_id;

        if (cost_center !== '') {
            url = url + "/" + cost_center;
        }
        return $.ajax({
            type: "get",
            url: url,
            dataType: "json",
        }).done(function(res) {
            if (res.success) {
                console.log("Products received:", res.data);

                var options_htm = '<option value="">Select Products</option>';
                $.each(res.data, function(key, val) {
                    options_htm += '<option value="' + key + '">' + val + '</option>';
                });

                $('#product_id').html(options_htm);
                $('.standardSelect').selectpicker('refresh');
            }
        });
    }
</script>
@endsection