@extends('SuperAdmin.layout.layout')
@section('title',"Targets")
@section('page-name',"Targets")
@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="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>
                    <hr>

                    @if($targets->isEmpty())
                        <h4> No Target Assign Yet! </h4>
                    @else
{{--                        <!--------- Start Loop ------------>--}}
{{--                        @foreach($departments as $department)--}}
{{--                            <div class="row mt-4">--}}
{{--                                <div class="col-md-6 mt-auto">--}}
{{--                                    <div class="d-flex align-items-center">--}}
{{--                                        <div>--}}
{{--                                            <h4> Department :  {{ $department->name ?? 'No Department 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">Category</th>--}}
{{--                                                <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>--}}
{{--                                                        <td class="align-middle">{{ $target->category }}</td>--}}
{{--                                                        @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>--}}

{{--                        @endforeach--}}
{{--                        <!--------- End Loop ------------>--}}
                        <!--------- Start Loop ------------>
                        @foreach($departments as $department)
                            <div class="row mt-4">
                                <div class="col-12"> <!-- Full width column -->
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h4> Department: {{ $department->name ?? 'No Department Assigned' }} </h4>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input toggle-view" type="checkbox" id="toggle-{{ $department->id }}" data-department="{{ $department->id }}">
                                            <label class="form-check-label" for="toggle-{{ $department->id }}">Simple</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th scope="col">Category</th>
                                                <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>
                                            <tbody>
                                            @foreach($targets as $target)
                                                @if($target->department_id == $department->id)
                                                    <tr class="target-row" data-department="{{ $department->id }}" data-parent="{{ $target->parent_target ?? '' }}"
                                                        @if($target->parent_target === 'parent') style="display: none;" @endif>
                                                        <td class="align-middle">{{ $target->category }}</td>
                                                        @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">
                                                                <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>
                                                @endif
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <!--------- End Loop ------------>
                    @endif

                </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({{$departments}})" required>
                                        <option selected disabled>--- Select Department ---</option>
                                        @foreach($departments as $department)
                                            <option value="{{$department->id}}">{{$department->name}}</option>
                                        @endforeach
                                    </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="All Categories">All Categories</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 for Toggle
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.toggle-view').forEach(function(toggle) {
                toggle.addEventListener('change', function () {
                    let departmentId = this.getAttribute('data-department');
                    let isChecked = this.checked;

                    // Update label text
                    this.nextElementSibling.textContent = isChecked ? 'Auto' : 'Simple';

                    // Loop through related rows and toggle visibility
                    document.querySelectorAll('.target-row[data-department="' + departmentId + '"]').forEach(function(row) {
                        let isParent = row.getAttribute('data-parent') === 'parent';
                        if (isChecked) {
                            // Auto Mode: Show only "parent" targets
                            row.style.display = isParent ? '' : 'none';
                        } else {
                            // Simple Mode: Hide "parent" targets
                            row.style.display = isParent ? 'none' : '';
                        }
                    });
                });
            });
        })

        //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 Populate Category
        function populateCategory(departments) {
            let depid = $('#department').val();
            $('#category').empty()
                .append('<option selected disabled>--- Select category ---</option>')
                .append('<option value="All Categories">All Categories</option>');
            if (depid != null) {
                let cate = [];
                if(Array.isArray(departments) && departments.length > 0)
                {
                    departments.forEach(function (department) {
                        if (depid == department.id) {
                            cate = JSON.parse(department.categories);
                        }
                    });

                    for (let i = 0; i < cate.length; i++) {
                        $('#category').append('<option value="' + cate[i] + '">' + cate[i] + '</option>');
                    }
                }
            }
        }

        //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).trigger('change').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(new Date(target.last_date).toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }));
            $('#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('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('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('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