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

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

<style type="text/css">
    .bs-vertical-wizard {
        border-right: 1px solid #eaecf1;
        padding-bottom: 50px;
    }

    .bs-vertical-wizard ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bs-vertical-wizard ul>li {
        display: block;
        position: relative;
    }

    .bs-vertical-wizard ul>li>div {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #333c4e;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }


    .bs-vertical-wizard ul>li>div:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .ico {
        pointer-events: none;
        font-size: 18px;
        position: absolute;
        left: 5px;
        top: 12px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>div:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>div .desc {
        display: block;
        color: #78797c;
        font-size: 12px;
        /*font-weight: 400;*/
        line-height: 1.8;
        height: auto !important;
        letter-spacing: .8px;
        padding: 10px;
        background-color: #fff9dd;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .bs-vertical-wizard ul>li.complete>div:before {
        background-color: #5cb85c;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>div:after {
        display: none;
    }

    .bs-vertical-wizard ul>li>div .ico.ico-green {
        color: #5cb85c;
    }


    .bs-vertical-wizard ul>li>a {
        display: block;
        padding: 10px 10px 10px 40px;
        color: #333c4e;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: .8px;
    }

    .bs-vertical-wizard ul>li>a:before {
        content: '';
        position: absolute;
        width: 1px;
        height: calc(100% - 25px);
        background-color: #bdc2ce;
        left: 13px;
        bottom: -9px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .ico {
        pointer-events: none;
        font-size: 14px;
        position: absolute;
        left: 10px;
        top: 15px;
        z-index: 2;
    }

    .bs-vertical-wizard ul>li>a:after {
        content: '';
        position: absolute;
        border: 2px solid #bdc2ce;
        border-radius: 50%;
        top: 14px;
        left: 6px;
        width: 16px;
        height: 16px;
        z-index: 3;
    }

    .bs-vertical-wizard ul>li>a .desc {
        display: block;
        color: #bdc2ce;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: .8px;
        height: auto !important;
    }

    .bs-vertical-wizard ul>li.complete>a:before {
        background-color: #5cb85c;
        opacity: 1;
        height: calc(100% - 25px);
        bottom: -9px;
    }

    .bs-vertical-wizard ul>li.complete>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li.locked>a:after {
        display: none;
    }

    .bs-vertical-wizard ul>li:last-child>a:before {
        display: none;
    }

    .bs-vertical-wizard ul>li.complete>a .ico {
        left: 8px;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-green {
        color: #5cb85c;
    }

    .bs-vertical-wizard ul>li>a .ico.ico-muted {
        color: #bdc2ce;
    }

    .bs-vertical-wizard ul>li.current {
        background-color: #fff;
    }

    .bs-vertical-wizard ul>li.current>a:before {
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current>a:after {
        border-color: #ffe357;
        background-color: #ffe357;
        opacity: 1;
    }

    .bs-vertical-wizard ul>li.current:after,
    .bs-vertical-wizard ul>li.current:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .bs-vertical-wizard ul>li.current:after {
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 10px;
        margin-top: -10px;
    }

    .bs-vertical-wizard ul>li.current:before {
        border-color: rgba(234, 236, 241, 0);
        border-left-color: #eaecf1;
        border-width: 11px;
        margin-top: -11px;
    }
</style>


<style>
    a {
        color: #f96332;
    }

    a:hover,
    a:focus {
        color: #f96332;
    }

    p {
        line-height: 1.61em;
        font-weight: 300;
        font-size: 1.2em;
    }

    .category {
        text-transform: capitalize;
        font-weight: 700;
        color: #9A9A9A;
    }

    .nav-item .nav-link,
    .nav-tabs .nav-link {
        -webkit-transition: all 300ms ease 0s;
        -moz-transition: all 300ms ease 0s;
        -o-transition: all 300ms ease 0s;
        -ms-transition: all 300ms ease 0s;
        transition: all 300ms ease 0s;
    }

    .card a {
        -webkit-transition: all 150ms ease 0s;
        -moz-transition: all 150ms ease 0s;
        -o-transition: all 150ms ease 0s;
        -ms-transition: all 150ms ease 0s;
        transition: all 150ms ease 0s;
    }


    .nav-tabs {
        border: 0;
        margin: 15px 0.7rem;
    }

    .nav-tabs:not(.nav-tabs-neutral)>.nav-item>.nav-link.active {
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3);
    }

    .card .nav-tabs {
        border-top-right-radius: 0.1875rem;
        border-top-left-radius: 0.1875rem;
    }

    .nav-tabs>.nav-item>.nav-link {
        color: #888888;
        margin: 0;
        margin-right: 5px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 30px;
        font-size: 14px;
        padding: 10px 20px;
        line-height: 1.5;
    }

    .nav-tabs>.nav-item>.nav-link:hover {
        background-color: transparent;
    }

    .nav-tabs>.nav-item>.nav-link.active {
        /* background-color: #444; */
        background: linear-gradient(to bottom right, #9e88f5 0%, #6259ca 100%);
        border-radius: 30px;
        color: #FFF;
    }

    .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        font-size: 14px;
        position: relative;
        top: 1px;
        margin-right: 3px;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link {
        color: #FFFFFF;
    }

    .nav-tabs.nav-tabs-neutral>.nav-item>.nav-link.active {
        background-color: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
    }

    .card {
        border: 0;
        border-radius: 0.1875rem;
        display: inline-block;
        position: relative;
        width: 100%;
        /* margin-bottom: 30px; */
        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
    }

    .card .card-header {
        background-color: transparent;
        border-bottom: 0;
        background-color: transparent;
        border-radius: 0;
        padding: 0;
    }

    .card[data-background-color="orange"] {
        background-color: #f96332;
    }

    .card[data-background-color="red"] {
        background-color: #FF3636;
    }

    .card[data-background-color="yellow"] {
        background-color: #FFB236;
    }

    .card[data-background-color="blue"] {
        background-color: #2CA8FF;
    }

    .card[data-background-color="green"] {
        background-color: #15b60d;
    }

    [data-background-color="orange"] {
        background-color: #e95e38;
    }

    [data-background-color="black"] {
        background-color: #2c2c2c;
    }

    [data-background-color]:not([data-background-color="gray"]) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) p {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
        color: #FFFFFF;
    }

    [data-background-color]:not([data-background-color="gray"]) .nav-tabs>.nav-item>.nav-link i.now-ui-icons {
        color: #FFFFFF;
    }

    @media screen and (max-width: 768px) {

        .nav-tabs {
            display: inline-block;
            width: 100%;
            padding-left: 100px;
            padding-right: 100px;
            text-align: center;
        }

        .nav-tabs .nav-item>.nav-link {
            margin-bottom: 5px;
        }
    }
</style>



<style type="text/css">
    p {
        margin-bottom: 7px;
    }

    .green {
        color: green;
        font-size: 14px;
    }
</style>

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Site / Roof <small>Details</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="#">Leads</a></li>
            <li class="breadcrumb-item active" aria-current="page">Roof Lists</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{ url('lead/sites/'.$data->lead_id) }}"> <i class="fa fa-arrow mb-3-left"></i> Back to Site List</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" href="{{ url('site/details/' . $data->id) }}">
                                Site / Roof Details
                            </a>
                        </li>

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

                        <li class="nav-item">
                            <a class="nav-link" href="{{ url('site/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="lead_id" value="{{ $data->lead_id }}">
                    <input type="hidden" name="site_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']) }}

                            <span class="text-danger" id="cat_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']) }}

                            <span class="text-danger" id="product_id-error"></span>
                        </div>
                        {{-- <div class="col-md-3 mb-0 form-group" style="display: none;">
                            <label>Vendor</label>

                            {{ Form::select('vendor_id', ['' => 'Select Vendor'], 1, ['class' => 'standardSelect form-control', 'id' => 'vendor_id']) }}

                            {{ Form::hidden('vendor_id', 1)  }}

                            <span class="text-danger" id="vendor_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>Product</th>
                                    {{-- <th>Vendor</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 site_id = "{{$data->id}}";
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('getBOMData') }}/" + site_id,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'category',
                    name: 'category'
                },
                {
                    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', '.edit_bom', function() {
        var bom_id = $(this).data('id');
        $.get("{{ url('Bom/edit') }}/" + bom_id, function(response) {
            if (response.success) {
                var data = response.data;
                $('#id').val(data.id);

                $('#cat_id').val(data.category_id).change();

                // getVendorsbyCatId(data.category_id).done(function() {
                //     $('#vendor_id').val(data.vendor_id).change();
                //     $('.standardSelect').selectpicker('refresh');
                // });

                getProductsbyCatId(data.category_id).done(function() {
                    $('#product_id').val(data.product_id).change();
                    $('.standardSelect').selectpicker('refresh');
                });

                $('#quantity').val(data.quantity);
            } else {
                alert('BOM data not found');
            }
        });
    });



    $('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: '/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('site/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();
        getProductsbyCatId(cat_id);
        // getVendorsbyCatId(cat_id);
    })


    function getProductsbyCatId(cat_id) {
        return $.ajax({
            type: "get",
            url: "{{ url('getProductsbyCatId') }}/" + cat_id,
            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');
            }
        });
    }

    // function getVendorsbyCatId(cat_id) {
    //     return $.ajax({
    //         type: "get",
    //         url: "{{ url('getVendorsbyCatId') }}/" + cat_id,
    //         dataType: "json",
    //     }).done(function(res) {
    //         if (res.success) {
    //             var options_htm = '<option value="">Select Vendor</option>';
    //             $.each(res.data, function(key, val) {
    //                 options_htm += '<option value="' + key + '">' + val + '</option>';
    //             });

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