@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>Costing Management <small></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 roof 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 " href="{{ url('site/bom/' . $data->id) }}">
                                BOM
                            </a>
                        </li>

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

                <div id="finalPriceTab" class="badge bg-primary text-white p-3 fs-4">
                    Total Final Price: <span id="updateTotalOfTotalPrice">0.00</span>
                </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>Quantity</th>
                                    <th>GST</th>
                                    <th>Price</th>
                                    <th>Risk Factor(%)</th>
                                    <th>Final CP</th>
                                    <th>Markup(%)</th>
                                    <th>Total Price (Without Gst)</th>
                                    <th>Total Price (With Gst)</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </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> -->
                </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('getCostingData') }}/" + site_id,
    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex' },
        { data: 'category', name: 'category' },
        { data: 'product', name: 'product' },

        {
            data: 'quantity',
            name: 'quantity',
            render: function (data, type, row) {
                return `<input type="number" class="form-control quantity-input"
                    data-id="${row.id}" value="${data || ''}"
                    placeholder="Enter Quantity" readonly min="0" step="0.01" style="width: 120px;" />`;
            }
        },
        {
            data: 'gst',
            name: 'gst',
            render: function (data, type, row) {
                return `<input type="number" class="form-control gst-input"
                    data-id="${row.id}" value="${data || ''}"
                    placeholder="Enter GST" min="0" id="gst_${row.id}" step="0.1" style="width: 100px;" />`;
            }
        },
        {
            data: 'price',
            name: 'price',
            render: function (data, type, row) {
                return `<input type="number" class="form-control price-input"
                    data-id="${row.id}" value="${data || ''}"
                    placeholder="Enter Price" min="0" id="price_${row.id}" step="0.01" style="width: 120px;" />`;
            }
        },
        {
            data: 'risk',
            name: 'risk',
            render: function (data, type, row) {
                return `<input type="number" class="form-control risk-input"
                    data-id="${row.id}" value="${data || ''}"
                    placeholder="Enter Risk" min="0" id="risk_${row.id}" step="0.1" style="width: 120px;" />`;
            }
        },
        {
            data: 'final_cp',
            name: 'final_cp',
            render: function (data, type, row) {
                return `<span class="final-cp" id="final_cp_${row.id}">${parseFloat(data).toFixed(2)}</span>`;
            }
        },
        {
            data: 'markup',
            name: 'markup',
            render: function (data, type, row) {
                return `<input type="number" class="form-control markup-input"
                    data-id="${row.id}" value="${data || ''}"
                    placeholder="Enter Markup" min="0" id="markup_${row.id}" step="0.1" style="width: 125px;" />`;
            }
        },
        {
            data: 'subtotal',
            name: 'subtotal',
            render: function (data, type, row) {
                return `<span class="subtotal-price" id="subtotal_price_${row.id}">${parseFloat(data).toFixed(2)}</span>`;
            }
        },
        {
            data: 'total_price',
            name: 'total_price',
            render: function (data, type, row) {
                return `<span class="total-price" id="total_price_${row.id}">${parseFloat(data).toFixed(2)}</span>`;
            }
        },
        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
        },
    ],
    language: {
        search: "_INPUT_",
        searchPlaceholder: "Search records",
    }
});


        table.on('draw', function() {
            calculateTotalOfTotalPrice();
        });


        function calculateTotalOfTotalPrice() {
            let totalOfTotalPrice = 0;
            $('.total-price').each(function() {
                const price = parseFloat($(this).text()) || 0;
                totalOfTotalPrice += price;
            });
            $('#updateTotalOfTotalPrice').text(totalOfTotalPrice.toFixed(2));
        }



        function updateTotalPrice(rowId) {
            const quantity = parseFloat($(`.quantity[data-id="${rowId}"]`).val()) || 0;
            const finalPrice = parseFloat($(`#final-price-${rowId}`).text()) || 0;
            const totalPrice = (quantity * finalPrice).toFixed(2);
            $(`#total-price-${rowId}`).text(totalPrice);
        }



        $(document).on('input', '.price-input, .risk-input, .markup-input, .gst-input', function() {
            const rowId = $(this).data('id');
            const price = parseFloat($(`.price-input[data-id="${rowId}"]`).val()) || 0;
            const risk = parseFloat($(`.risk-input[data-id="${rowId}"]`).val()) || 0;
            const markup = parseFloat($(`.markup-input[data-id="${rowId}"]`).val()) || 0;
            const gst = parseFloat($(`.gst-input[data-id="${rowId}"]`).val()) || 0;
            // const gst = parseFloat($(`td[data-gst="${rowId}"]`).text()) || 0;

            const quantity = parseFloat($(`.quantity-input[data-id="${rowId}"]`).val()) || 0;

            const finalCP = price + (price * risk / 100);
            const finalPrice = finalCP + (finalCP * markup / 100);
            const subtotal = finalPrice * quantity;
            console.log("subtotal", subtotal);
            const taxAmount = subtotal * gst / 100
            console.log("taxAmount", taxAmount);
            const totalPrice = subtotal + taxAmount;
            console.log("total", totalPrice);

            $(`#final_cp_${rowId}`).text(finalCP.toFixed(2));
            $(`#final_price_${rowId}`).text(finalPrice.toFixed(2));
            $(`#total_price_${rowId}`).text(totalPrice);

            calculateTotalOfTotalPrice();
        });

    });


    function store_cost(id) {
        $.ajax({
            data: {
                "bom_item_id": id,
                "gst": $('#gst_' + id).val(),
                "price": $('#price_' + id).val(),
                "risk": $('#risk_' + id).val(),
                "markup": $('#markup_' + id).val(),
                "_token": "{{ csrf_token() }}",
            },
            url: "{{ url('site/costing/store') }}",
            type: "POST",
            dataType: 'json',
            success: function(data) {
                $('#dataForm').trigger("reset");
                $('#ajaxModel').modal('hide');
                swal({
                    title: "Good job!",
                    text: data.msg,
                    icon: "success",
                });
                $('.data-table').DataTable().ajax.reload(null, false);
                console.log(data);
            },
            error: function(data) {
                if (data.status == 422) {
                    var x = data.responseJSON;
                    $.each(x.errors, function(index, value) {
                        $("#" + index).addClass("is-invalid");
                        $("#" + index + "-error").html(value[0]);
                    });
                }
                $('#saveBtn').html('Save Changes');
            }
        });
    }
</script>
@endsection