@extends('Manager.layout')
@section('title',"Targets")
@section('page-name',$department->name. " Department")
@section('page-detail',"All Assigned Targets Information")
{{--@section('pagelink', 'target')--}}
@section('body')

    <div class="content-are-dashboard p-3">
        <div class="card rounded-3">
            <div class="card-body">
                <div class="row">
                    <div class="border rounded-3 p-3">
                        <div>
                            <div class="d-flex justify-content-end">
                                <a href="#" class="btn btn-primary w-auto-fix" data-bs-toggle="modal"
                                   data-bs-target="#addModal" data-bs-whatever="@getbootstrap">
                                    <i class="fas fa-pen me-2"></i> Add New Target</a>
                            </div>
                        </div>

                        @if($targets->isEmpty())
                            <h4> No Targets Assigned Yet! </h4>
                        @else

                            <div class="row mt-3">
                                <div class="col-md-12 mb-3">
                                    <div class=" border rounded-3 p-3">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="users-icon-box">
                                                <i class="fas fa-users"></i>
                                            </div>
                                            <h4 class="ms-3">{{$category}}</h4>
                                        </div>
                                        <div class="row">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th scope="col">Name & Product</th>
                                                        <th scope="col">Progress</th>
                                                        <th scope="col">Total Quantity</th>
                                                        <th scope="col" class="align-middle">Redeemed Points</th>
                                                        <th scope="col">Target Points</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($targets as $target)
                                                        <tr>
                                                            <td class="align-middle">
                                                                @if($target->custom == null)
                                                                    <h5 class="mb-2">{{$target->name}}</h5>
                                                                @else
                                                                    <h5 class="mb-2">{{$target->custom}}</h5>
                                                                @endif
                                                            </td>
                                                            <th class="align-middle">
                                                                @php
                                                                    $percent = calculatePercentage($target->progress, $target->quantity);
                                                                @endphp
                                                                <h5 class="mb-2">{{$percent['value']}}% <span
                                                                        class="ms-4 p-light">{{$percent['status']}}</span></h5>
                                                                <div class="progress mb-3" style="height: 6px;">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{$percent['value']}}%; background-color: #6EA0F9;"
                                                                         aria-valuenow="{{$percent['value']}}" aria-valuemin="0"
                                                                         aria-valuemax="100">
                                                                    </div>
                                                                </div>
                                                            </th>

                                                            <td class="align-middle">{{$target->quantity}}</td>
                                                            <td class="align-middle">
                                                                <a href="#" class="btn btn-primary"
                                                                   style="width: 100px; height: 35px">{{$target->progress ?? '0'}}</a>
                                                            </td>

                                                            <td class="align-middle">
                                                                <small class="p-light mb-2"
                                                                       style="font-size: 12px">Until: {{ \Carbon\Carbon::parse($target->last_date)->format('M d, Y') }}</small>
                                                                <h5>{{$target->quantity - $target->progress}}</h5>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <p class="p-light mb-0">Updated at: {{$currentDate}}</p>
                                    </div>
                                </div>
                            </div>

                            <!--------- Start Loop ------------>
                            <div class="row mt-4">
                                <div class="col-md-6 mt-auto">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h4> Target Category :  {{ $category ?? 'No Category Assigned' }} </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th scope="col">Target/Product</th>
                                                <th scope="col">Total Points</th>
                                                <th scope="col">Redeemed</th>
                                                <th scope="col">Last Date</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                            </thead>
                                            @foreach($targets as $target)
                                                @if($target->department_id == $department->id)
                                                    <tbody>
                                                    <tr>
                                                        @if($target->product_id)
                                                            <td class="align-middle">{{ $products->firstWhere('id', $target->product_id)->name }}</td>
                                                        @else
                                                            <td class="align-middle">{{ Str::limit($target->custom ?? 'No Custom', 50) }}</td>

                                                        @endif
                                                        <td class="align-middle">{{ $target->quantity }}</td>
                                                        <td class="align-middle">{{ $target->progress ?? "Nothing Yet" }}</td>
                                                        <td class="align-middle">{{ \Carbon\Carbon::parse($target->last_date)->format('m-d-y') }}</td>
                                                        <td class="align-middle">
                                                            @if($target->status === '2')
                                                                <a href="#" class="btn btn-active">Active</a>
                                                            @elseif($target->status === '1')
                                                                <a href="#" class="btn btn-inactive">Inactive</a>
                                                            @else
                                                                <a href="#" class="btn btn-pending">Pending</a>
                                                            @endif
                                                        </td>

                                                        <td class="align-middle">

                                                            <a href="#" onclick="renewTarget({{$target->id}} )">
                                                                <i class="fa-solid fa-repeat"></i></a>

                                                            <a href="#" onclick="populateForm({{ json_encode($target) }})" data-bs-toggle="modal"
                                                               data-bs-target="#addModal" data-bs-whatever="@getbootstrap">
                                                                <i class="fas fa-pen px-1"></i></a>

                                                            <a href="#" onclick="deleteTarget({{$target->id}}, $(this) )"><i class="fas fa-trash px-1"></i></a>
                                                        </td>

                                                    </tr>
                                                    </tbody>
                                                @endif
                                            @endforeach
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <!--------- End Loop ------------>
                        @endif

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

    <!--------- Start Modal ------------>

    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-radious-20">
                <div class="modal-body p-4">
                    <h4>Target</h4>
                    <hr>
                    <form id="targetForm">
                        @csrf
                        <div class="row">
                            <input type="hidden" name="id" id="trgtID" value="">

                            <!-- Dropdown to add Department -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
                                    <select id="department" name="department_id" class="form-control"
                                            aria-label="Department"
                                            onchange="populateCategory({{ json_encode($department) }})" required>
                                        <option selected disabled>--- Select Department ---</option>
                                        <option value="{{$department->id}}">{{$department->name}}</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Dropdown to Add Category -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
                                    <select id="category" name="category" class="form-control" aria-label="category" required>
                                        <option selected disabled >--- Select category ---</option>
                                        <option value="{{$category}}">{{$category}}</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Dropdown to Select Type of Target -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
                                    <select id="targetType" class="form-control" aria-label="category"
                                            onchange="typeOfTarget()" required>
                                        <option selected disabled >--- Select Target Type ---</option>
                                        <option value="product">Target Product</option>
                                        <option value="custom">Custom</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Dropdown to add Product -->
                            <div class="col-md-6 d-none" id="typeProduct">
                                <div class="mb-md-4 mb-3">
                                    <select id="product" name="product_id" class="form-control"
                                            aria-label="Product">
                                        <option selected disabled value="">--- Select a Product ---</option>
                                        @foreach($products as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Input for Target -->
                            <div class="col-md-6 d-none" id="typeCustom">
                                <div class="mb-md-4 mb-3">
                                    <input id="custom" name="custom" type="text" maxlength="100"
                                           class="form-control shadow-none" placeholder="Enter Target Input" required>
                                    <small class="form-text">Limit : 100 Characters Only</small>
                                </div>
                            </div>

                            <!-- Quantity for Target -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
                                    <input id="quantity" name="quantity" type="number" min="1"
                                           class="form-control shadow-none" placeholder="Target Quantity" required>
                                </div>
                            </div>

                            <!-- Last Date for Target -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
{{--                                    <input id="last_date" name="last_date" type="date"--}}
{{--                                           class="form-control shadow-none" placeholder="Custom Target Input" required>--}}
                                    <input id="last_date" name="last_date" type="text"
                                           class="form-control shadow-none" placeholder="MM/DD/YYYY" required>
                                </div>
                            </div>

                            <!-- Target Status -->
                            <div class="col-md-6">
                                <div class="mb-md-4 mb-3">
                                    <select id="status" name="status" class="form-control"
                                            aria-label="Status of Target" required>
                                        <option selected disabled>--- Select Status of Target ---</option>
                                        <option value="2">Active</option>
                                        <option value="0">Pending</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-primary-white shadow-none mb-3 px-5"
                                    data-bs-dismiss="modal" aria-label="Close">Cancel</button>

                            <button type="submit" id="sub-btn" class="btn btn-primary shadow-none mb-3 px-5 ms-md-3">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--------- End Modal ------------>

@endsection

@section('custom-scripts')
    <script>

        //Script to clear Modal everytime it is closed
        $('#addModal').on('hidden.bs.modal', function () {
            $(this).find('form')[0].reset();
            $('#department').css('pointer-events', 'auto');
            $('#category').css('pointer-events', 'auto');
            $('#targetType').css('pointer-events', 'auto');
            $('#product').css('pointer-events', 'auto');
        });

        //Function to show type of Target
        function typeOfTarget() {
            let type = $('#targetType').val();
            if(type == "product")
            {
                $('#typeProduct').removeClass('d-none');
                $('#typeCustom').addClass('d-none');
                $('#product').prop('required', true);
                $('#custom').attr('required', false).val('');
            }
            else
            {
                $('#typeProduct').addClass('d-none');
                $('#typeCustom').removeClass('d-none');
                $('#product').prop('required', false).val('');
                $('#custom').attr('required', true);
            }
        }

        //Function To Populate Form
        function populateForm(target) {
            console.log(target);
            $('#trgtID').val(target.id);
            $('#department').val(target.department_id).css('pointer-events', 'none');
            $('#category').val(target.category).css('pointer-events', 'none');
            if(target.product_id != null)
            {
                $('#targetType').val("product").trigger('change').css('pointer-events', 'none');
                $('#product').val(target.product_id).css('pointer-events', 'none');
            }
            else
            {
                $('#targetType').val("custom").trigger('change').css('pointer-events', 'none');
                $('#custom').val(target.custom);
            }
            $('#quantity').val(target.quantity);
            $('#last_date').val(target.last_date);
            $('#status').val(target.status);
        }

        //AJAX to Add/Update  Target
        $('#addModal').on("submit", function (e) {
            e.preventDefault()
            console.log('inside ajax');
            var form = $('#targetForm')[0];
            var formdata = new FormData(form);
            $('#sub-btn').html('<span class="me-2"><i class="fa fa-spinner fa-spin"></i></span> Processing')
                .prop('disabled', true);
            $.ajax({
                type: 'POST',
                url: '{{ route('dep.target.add') }}',
                dataType: 'json',
                data: formdata,
                contentType: false,
                processData: false,
                cache: false,
                mimeType: 'multipart/form-data',

                success: function (res) {
                    if (res.Error == false) {
                        Swal.fire({ // Swirl Success MSG
                            title: "Success!",
                            text: res.Message,
                            imageUrl: "{{ asset('assets/img/WelcomebackFabiana.png') }}",
                            imageWidth: 100,
                            imageHeight: 100,
                            imageAlt: "Party Image"
                        });
                        $('#addModal').modal('hide');
                        setTimeout(function () {
                            window.location.reload();
                        }, 10);
                    } else {
                        swirlmsg(res.Message);
                    }
                    $('#sub-btn').html('Submit').prop('disabled', false);
                },
                error: function (e) {
                    var first_error = '';
                    var count = 0;
                    $.each(e.responseJSON.errors, function (index, item) {
                        if (count == 0) {
                            first_error = item[0];
                        }
                        count++;
                    });
                    swirlmsg(first_error);
                    $('#sub-btn').html('Submit').prop('disabled', false);
                }

            });
        });

        //Function and AJAX to Delete Target
        function deleteTarget(id, element) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('dep.target.delete') }}',
                        data: {
                            id: id,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.Error === false) {
                                element.parent().parent().remove();
                                Swal.fire({ // Swirl Success MSG
                                    title: "Deleted!",
                                    text: res.Message,
                                    imageUrl: "{{ asset('assets/img/WelcomebackFabiana.png') }}",
                                    imageWidth: 100,
                                    imageHeight: 100,
                                    imageAlt: "Party Image"
                                });
                            } else {
                                swirlmsg(res.Message);
                            }
                        },
                        error: function (e) {
                            let first_error = 'An unknown error occurred.';
                            if (e.responseJSON && e.responseJSON.errors) {
                                first_error = Object.values(e.responseJSON.errors)[0][0];
                            }
                            swirlmsg(first_error);
                        }
                    });
                }
            })
        }

        // Ajax to Renew Target
        function renewTarget(id) {
            $.ajax({
                type: 'POST',
                url: '{{ route('dep.target.renew') }}',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function (res) {
                    if (res.Error === false) {
                        Swal.fire({ // Swirl Success MSG
                            title: "Success!",
                            text: res.Message,
                            imageUrl: "{{ asset('assets/img/WelcomebackFabiana.png') }}",
                            imageWidth: 100,
                            imageHeight: 100,
                            imageAlt: "Party Image"
                        });
                        setTimeout(function () {
                            window.location.reload();
                        }, 10);
                    } else {
                        swirlmsg(res.Message);
                    }
                },
                error: function (e) {
                    let first_error = 'An unknown error occurred.';
                    if (e.responseJSON && e.responseJSON.errors) {
                        first_error = Object.values(e.responseJSON.errors)[0][0];
                    }
                    swirlmsg(first_error);
                }
            });
        }

    </script>
@endsection