@extends('layouts/contentLayoutMaster')

@section('title', 'Target Achievements')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')

<style>
    .table th{
    
        vertical-align:middle !important;
        text-align:center;
    }
    .typing-dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.5s steps(6, end) infinite;
}

@keyframes dots {
    0%   { content: ''; }
    16%  { content: '.'; }
    33%  { content: '..'; }
    50%  { content: '...'; }
    66%  { content: '....'; }
    83%  { content: '.....'; }
    100% { content: '......'; }
}
</style>

    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row border-bottom py-2">
                        <div class="col-12 d-flex justify-content-between">
                            <h4 class="card-title my-auto ps-2">Target Code : {{ $target->code }}</h4>
                        </div>
                    </div>

                    <div class="card-body pt-0 pb-2">

                        @if ($success = Session::get('success'))
                            <div class="demo-spacing-0 mb-1 col-6">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $success }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        @if ($errorMessage = Session::get('errorMessage'))
                            <div class="demo-spacing-0 mb-1 col-6">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $errorMessage }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif

                        @if(!isset($target->aggregated_sum) && $target->status == 1)
                            <div class="row mt-2">
                                <div class="col-12">
                                        
                                    <form class="row" id="achievement-form" action="{{ route('target.targets.update', $target->_id) }}" method="POST">
                                        @method('PUT')
                                        @csrf
                                        <div class="col-12 pe-0 d-flex justify-content-start align-items-start flex-column" >
                                            <div id="ajax-message" class="mb-2 text-primary fw-bold h5" style="min-width:200px">
                                                
                                            </div>
                                            <input type="submit" id="submit-btn" value="Calculate Achievement" class="btn btn-sm btn-primary ">
                                        </div>
                                    </form>
                                </div>
                            </div>
                            @endif
                            <div class="row pb-2 pt-2">
                                    @php
                                        $type = $target->type;
                                        switch ($type) {
                                            case 'shedwise':
                                                $badgeHtml = '<span class="badge" style="background-color: #419afa; color: white;">Shedwise</span>';
                                                break;
                                            case 'source_type':
                                                $badgeHtml = '<span class="badge" style="background-color: #db4243; color: white;">Source Type</span>';
                                                break;
                                            case 'mcc':
                                                $badgeHtml = '<span class="badge" style="background-color: #e08465; color: white;">MCC</span>';
                                                break;
                                            case 'mcc_source_type':
                                                $badgeHtml = '<span class="badge" style="background-color: #eb7aa0; color: white;">MCC Source Type</span>';
                                                break;
                                            case 'ao_employee':
                                                $badgeHtml = '<span class="badge" style="background-color: #28A745; color: white;">AO Employee</span>';
                                                break;
                                            default:
                                                $badgeHtml = 'N/A';
                                        }
                                    @endphp
                                    
                                    <h5 class="pb-1 text-primary">
                                        <b>Type :</b> {!! $badgeHtml !!}
                                    </h5>
                                    <h5 class="pb-1 text-primary">
                                        <b>From :</b>  {{$target->from ? $target->from : ''}}
                                    </h5>
                                    <h5 class="pb-1 text-primary">
                                        <b>To :</b>  {{ $target->to ? $target->to : '' }}
                                    </h5>
                                    {{-- <h5 class="pb-1">
                                        <b>Created By :</b>  {{$target->createdBy ? $target->createdBy->name : ''}}
                                    </h5> --}}
                                </div>
                            </div>

                            <div class="row m-0 p-0 ">
                                <div class="col-12 m-0 p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Plant</th>
                                                    <th class="text-center">AO</th>
                                                    <th class="text-center">CP</th>
                                                    <th class="text-center">Source Type</th>
                                                    <th class="text-center">Employee</th>
                                                    <th class="text-center">Target (Vol)</th>
                                                    <th class="text-center">Target (Price)</th>
                                                    <th class="text-center">Actual (Vol)</th>
                                                    <th class="text-center">Actual (Price)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {{-- @foreach ($targetDetails as $tar)

                                                <tr>
                                                    <td>
                                                        {{ $tar->plantText ? $tar->plantText : '' }}
                                                    </td>
                                                    <td>{{ $tar->area_office_text ? $tar->area_office_text : '' }}</td>
                                                    <td>{{ $tar->collection_point_text ? $tar->collection_point_text : '' }}</td>
                                                    <td>{{ $tar->source_type_text ? $tar->source_type_text : '' }}</td>
                                                    <td>{{ $tar->employee_text ? $tar->employee_text : '' }}</td>
                                                    <td>{{ $tar->volume ? $tar->volume : '' }}</td>
                                                    <td>{{ $tar->rate ? $tar->rate : '' }}</td>
                                                    <td>{{ $tar->total_ts_volume ? $tar->total_ts_volume : '' }}</td>
                                                    <td>{{ $tar->final_rate ? $tar->final_rate : '' }}</td>
                                                </tr>
                                                @endforeach --}}
                                                @foreach ($targetDetails as $tar)
                                                    <tr>
                                                        <td style="background-color: {{ empty($tar->plantText) ? '#fff4f4' : 'transparent' }};">
                                                            {{ $tar->plantText ?? '' }}
                                                        </td>
                                                        <td style="background-color: {{ empty($tar->area_office_text) ? '#fff4f4' : 'transparent' }};">
                                                            {{ $tar->area_office_text ?? '' }}
                                                        </td>
                                                        <td style="background-color: {{ empty($tar->collection_point_text) ? '#fff4f4' : 'transparent' }};">
                                                            {{ $tar->collection_point_text ?? '' }}
                                                        </td>
                                                        <td style="background-color: {{ empty($tar->source_type_text) ? '#fff4f4' : 'transparent' }};">
                                                            {{ $tar->source_type_text ?? '' }}
                                                        </td>
                                                        <td style="background-color: {{ empty($tar->employee_text) ? '#fff4f4' : 'transparent' }};">
                                                            {{ $tar->employee_text ?? '' }}
                                                        </td>
                                                        <td >
                                                            {{ $tar->volume ?? '' }}
                                                        </td>
                                                        <td >
                                                            {{ $tar->rate ?? '' }}
                                                        </td>
                                                        <td >
                                                            {{ $tar->total_ts_volume ?? '' }}
                                                        </td>
                                                        <td >
                                                            {{ $tar->final_rate ?? '' }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            


                            <div class="row m-0 p-0 mt-3">
                                <div class="col-12 m-0 p-0">
                                    <div class="table-responsive">
                                        
                                        @if ($target->type == 'mcc_source_type' || $target->type == 'source_type')
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" colspan="6">
                                                            {{ $target->type ? $target->type : '' }}
                                                        </th>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-center">Type</th>
                                                        <th class="text-center">Target (Vol)</th>
                                                        <th class="text-center">Target (Price)</th>
                                                        <th class="text-center">Actual (Vol)</th>
                                                        <th class="text-center">Actual (Price)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($groupedData as $key => $tar)
                                                    <tr>
                                                        <td>{{ $tar['source_type_text'] ? $tar['source_type_text'] : '' }}</td>
                                                        <td>{{ $tar['tar_total_ts_volume'] ? $tar['tar_total_ts_volume'] : '' }}</td>
                                                        <td>{{ $tar['tar_final_rate'] ? $tar['tar_final_rate'] : '' }}</td>
                                                        <td>{{ $tar['ach_total_ts_volume'] ? $tar['ach_total_ts_volume'] : '' }}</td>
                                                        <td>{{ $tar['ach_final_rate'] ? $tar['ach_final_rate'] : '' }}</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>  
                                        @endif

                                        <table class="table table-bordered">
                                            <thead>
                                                    @if ($target->type == 'mcc_source_type' || $target->type == 'source_type')
                                                        <tr>
                                                            <th class="text-center" colspan="5">
                                                                Total
                                                            </th>
                                                        </tr>
                                                     @else
                                                        <tr>
                                                            <th class="text-center" colspan="5">
                                                                {{ $target->type ? $target->type : '' }}
                                                            </th>
                                                        </tr>
                                                    @endif
                                                <tr>
                                                    <th class="text-center">Target (Vol)</th>
                                                    <th class="text-center">Target (Price)</th>
                                                    <th class="text-center">Actual (Vol)</th>
                                                    <th class="text-center">Actual (Price)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($finalObj as $key => $tar)
                                                <tr>
                                                    <td>{{ $tar['temp_total_ts_volume'] ? $tar['temp_total_ts_volume'] : '' }}</td>
                                                    <td>{{ $tar['temp_final_rate'] ? $tar['temp_final_rate'] : '' }}</td>
                                                    <td>{{ $tar['grand_total_ts_volume'] ? $tar['grand_total_ts_volume'] : '' }}</td>
                                                    <td>{{ $tar['grand_final_rate'] ? $tar['grand_final_rate'] : '' }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        
                    </div>

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


@endsection

@section('vendor-script')

    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2({
                allowClear: true,
                // dropdownPosition: 'TOP'
            });

    $('#achievement-form').on('submit', function (e) {
        e.preventDefault(); // Prevent default form submission

        const form = $(this);
        const submitBtn = $('#submit-btn');
        const messageDiv = $('#ajax-message');

        submitBtn.prop('disabled', true);

        let countdown = 200;
        let dotCount = 0;

        // Set initial message
        messageDiv.html(`Calculating Achievements with in <span id="countdown">${countdown}</span> seconds <span id="dots">.</span>`);

        // Countdown timer
        const countdownInterval = setInterval(() => {
            countdown--;
            $('#countdown').text(countdown);
            if (countdown <= 0) {
                clearInterval(countdownInterval);
            }
        }, 1000);

        // Dot animation (1 to 6 dots)
        const dotsInterval = setInterval(() => {
            dotCount = (dotCount % 6) + 1; // Cycles from 1 to 6
            $('#dots').text('.'.repeat(dotCount));
        }, 400); // speed of dot animation

        // AJAX request
        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: form.serialize(),
            success: function (response) {
                clearInterval(countdownInterval);
                clearInterval(dotsInterval);
                if (response.success == true) {
                    showAlert('success', response.message);
                    // alert('Transfer Note created successfully!');
                    location.reload();
                } else {
                    showAlert('error', response.message);
                    messageDiv.html('Something went wrong. Please try again.');
                    submitBtn.prop('disabled', false);
                }
            },
            error: function (xhr) {
                clearInterval(countdownInterval);
                clearInterval(dotsInterval);
                messageDiv.html('Something went wrong. Please try again.');
                submitBtn.prop('disabled', false);
            }
        });
    });
});

</script>





       
    </script>
@endsection