@extends('app')
@section('title', 'Create new customer')

@push('styles')
    <style>
        .info{
            widows: 100%;
            justify-items: center;
            align-items: center;
            /* display: flex; */
            /* justify-content: space-around; */
        }
    </style>
@endpush
@section('content')
<div class="content-page">
    <div class="content">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{route('stuffs.index')}}">Stuff</a></li>
                            {{-- <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li> --}}
                            <li class="breadcrumb-item active">Salary</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Daily Reports</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body" id="stuffInfo">
                        <hr>
                            <div class="justify-content-center ">
                                <table class="table table-centered w-100 nowrap" id="products-datatable">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="all" style="width: 20px;">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="customCheck1">
                                                    <label class="form-check-label" for="customCheck1">&nbsp;</label>
                                                </div>
                                            </th>
                                            <th class="all">INVOICE / Voucher</th>
                                            <th>Name</th>
                                            <th>Product</th>
                                            <th>Quntity</th>
                                            <th>Income</th>
                                            <th>Expence</th>
                                            <th>Date Time</th>
                                        </tr>
                                    </thead>
                                    <tr>
                                        <td>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="customCheck5">
                                                <label class="form-check-label" for="customCheck5">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="" class="text-body fw-bold">

                                            </a>
                                        </td>
                                        <td>

                                        </td>
                                        <td>

                                        </td>
                                        {{-- <td>August 03 2018 <small class="text-muted">07:56 AM</small></td> --}}
                                        <td>

                                        </td>

                                        <td>

                                        </td>
                                        <td>

                                        </td>
                                        {{-- <td>
                                            send
                                        </td> --}}
                                        <td>
                                            <a href="" class="action-icon"> <i class="mdi mdi-eye"></i></a>
                                            <a href="" class="action-icon"> <i class="mdi mdi-printer"></i></a>

                                        </td>
                                    </tr>
                                </table>

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

@endsection

@push('scripts')

<script>
    var emplyee_id = null;
    function handleOptionChange(type){
        switch (type) {
            case 'monthly':
            $("#monthly").removeClass('d-none');
            break;

            default:
                $("#monthly").addClass('d-none');

                break;
        }
    }


    function handleSubmit(e){
        // e.preventdefault();
        // let stuffForm = $('#checkStuff').serialize();
        let stuff = $("#stuff").val();
        let type = $("#options").val();
        let duration = $("#duration").val();

        let data = {
            stuff,type,duration
        }

            // server



        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post(`{{route('admin.checkstuff')}}`,data,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                    'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == "success" && data.data.length > 0){
                    $("#stuffInfo").removeClass('d-none');
                    $(".name").text(data.data[0].name);
                    // $("#emplyee_id").text(data.data[0].id);
                    emplyee_id = data.data[0].id;
                    $(".phone").text(data.data[0].phone);
                    $(".father").text(data.data[0].father_name);
                    $(".mother").text(data.data[0].mother_name);
                    $(".address").text(data.data[0].address);
                    $(".designation").text(data.data[0].designation);

                    if(data.data[0].sellary_type == "per_item"){
                        $(".total_job").text(data.data[0].total_job);
                        $(".salary").text(data.data[0].total_income * data.data[0].basesalary);
                        let salaryCount = (data.data[0].total_income * data.data[0].basesalary)
                        if(salaryCount > data.data[0].paid){
                            $(".due").text(salaryCount - data.data[0].paid);
                        }else{
                            $(".advance").text(data.data[0].paid - salaryCount);
                        }
                    }else{
                        $(".total_job").text('Not Applicable');
                        $(".salary").text(data.data[0].basesalary);

                    }

                    $(".paid").text(data.data[0].paid);
                    $(".lastPayDate").text(data.data[0].payment_date);


                    // $(".img").src= `${window.location.host+'/'+data.data[0].image}`;
                    $(".img").attr("src","{{asset('/')}}"+data.data[0].image ?? 'demo/demo.jpg');
                    // $(".name").text();
                    // console.log(`${window.location.host+'/'+data.data[0].image}`)
                }else{
                    $(".error").removeClass('d-none').text('Data not found!');

                }
            }).catch(({response})=>{
               console.log(response)
               $("#stuffInfo").addClass('d-none');
            })
        });

    }



    function handleSave(){

        // let emplyee_id = $("#emplyee_id").val();
        let paid = $("#payment").val();
        let base_salary = $(".salary").text();
        let total_product = $(".total_job").text();
        let month_name = $("#month_name")
        let bounse = $("#bounus").val();
        let payment_date = $("#payment_date").val();

        let data = {
            emplyee_id,paid,base_salary,bounse,payment_date,total_product
        }
        console.log(data);

        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post(`{{route('storeSalary')}}`,data,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                    'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == "success" && data.data.length > 0){
                    $(".success").text = "Data saved!"
                }
            }).catch(({response})=>{
               console.log(response)
               $("#stuffInfo").addClass('d-none');
            })
        });
    }
</script>
@endpush