@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">Salary</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <span class="justify-content-center text-center">
                            <h2>Make Salaray</h2>
                        </span>
                        <div class="col-md-8 offset-md-2">
                            <form action="" class="justify-content-center" id="checkStuff"  method="POST">
                                @csrf
                                @method('post')
                                <div class="row">
                                    <div class="col-md-6 col-xl-4 mb-3">
                                        <label for="name" class="form-label">{{__('Select Stuff')}}</label>
                                        <select name="stuff" id="stuff" class="form-select">
                                            <option value="">Select Stuff</option>
                                            @foreach ($stuffs as $stuff)
                                                <option value="{{$stuff->id}}">{{$stuff->name}} - {{$stuff->phone}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 col-xl-4 mb-3">
                                        <label for="fname" class="form-label">{{__('Options')}}</label>
                                        <select name="options" id="options" onchange="handleOptionChange(this.value)" class="form-select">
                                            <option value="">Select Type</option>
                                            @foreach ($options as $value=>$name)
                                                <option value="{{$value}}">{{$name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 col-xl-4 mb-3 d-none" id="monthly">
                                            <label for="fname" class="form-label">{{__('Month')}}</label>
                                            <input type="month" class="form-select" id="duration">
                                        </div>
                                </div>

                                <div class="text-center">
                                    <button type="button" onclick="handleSubmit()" class="btn btn-info">Submit</button>
                                </div>
                            </form>
                        </div>
                        <div class="error d-none alert alert-danger m-2"></div>
                        <div class="success d-none alert alert-success m-2"></div>
                    </div>
                    <div class="card-body d-none" id="stuffInfo">
                        <hr>
                            <div class="justify-content-center ">
                                <form action="" class="table table responsive">
                                <table class="table bg-light justify-content-center text-center">
                                    <tr class="info">
                                        <th>
                                            <Strong>Name:</Strong>
                                        </th>
                                        <td>
                                            <span class="form-control name">
                                            Ashab Uddin
                                            </span>
                                        </td>
                                        <th>
                                            <Strong>
                                                Phone:
                                            </Strong>
                                        </th>
                                        <td>
                                            <span class="form-control phone">
                                                0170000
                                            </span>
                                        </td>
                                        <td colspan="2" rowspan="2">
                                            <img class="img" src="{{asset('/demo/demo.jpg')}}" width="120" alt="Name">
                                        </td>
                                    </tr>
                                    <tr class="info">
                                        <th>
                                            <strong>
                                                Father Name
                                            </strong>
                                            <td>
                                                <span class="form-control father">

                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Mother Name:
                                            </strong>
                                            <td>
                                                <span class="form-control mother">

                                                </span>
                                            </td>
                                        </th>
                                    </tr>
                                    <tr class="info">
                                        <th>
                                            <strong>
                                                Address
                                            </strong>
                                            <td>
                                                <span class="form-control address">

                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Designation:
                                            </strong>
                                            <td>
                                                <span class="form-control designation">

                                                </span>
                                            </td>
                                        </th>
                                    </tr>
                                    <tr class="info">
                                        <th>
                                            <strong>
                                                Total Job
                                            </strong>
                                            <td>
                                                <span class="form-control total_job">
                                                    0
                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Total Salary:
                                            </strong>
                                            <td>
                                                <span class="form-control salary">
                                                    0
                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Paid:
                                            </strong>
                                            <td>
                                                <span class="form-control paid">
                                                    0
                                                </span>
                                            </td>
                                        </th>
                                    </tr>
                                    <tr class="info">
                                        <th>
                                            <strong>
                                                Advance
                                            </strong>
                                            <td>
                                                <span class="form-control advance">
                                                    0
                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Due:
                                            </strong>
                                            <td>
                                                <span class="form-control due">
                                                    0
                                                </span>
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Payment:
                                            </strong>
                                            <td>
                                                <input type="number" id="payment" onchange="if(this.value != ''){$('.saveBtn').prop('disabled', false)}" class="form-control" required placeholder="Write payment">
                                            </td>
                                        </th>
                                    </tr>
                                    <tr class="info">
                                        <th>
                                            <strong>
                                                Bounus:
                                            </strong>
                                            <td>
                                                <input type="number" class="form-control" id="bounus">
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Date:
                                            </strong>
                                            <td>
                                                <input type="date" name="" id="payment_date" required class="form-control">
                                            </td>
                                        </th>
                                        <th>
                                            <strong>
                                            Last Payment Date:
                                            </strong>
                                            <td >
                                                <span class="form-control lastPayDate">

                                                </span>
                                            </td>
                                        </th>

                                    </tr>
                                </table>
                                <div class="text-center">
                                    <button type="button" onclick="handleSave()" class="text-center btn btn-primary saveBtn" disabled>Save</button>
                                </div>
                            </form>

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