@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('css')
    <style>
        .table>:not(caption)>*>*{
            padding:0.3rem !important;
        }
    </style>
@endsection

@section('page-content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                           
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-md-12">
                                        <div class="holder m-4" style="box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);">
                                            <div class="row m-3 pt-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.title') }}</label>
                                                    <p class="text-secondary m-0">{{ $matter->title}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.type.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($matter->type)
                                                        @case('tarh')
                                                            {{ __('matter.type.tarh') }}
                                                            @break
                                                        @case('technical')
                                                            {{ __('matter.type.technical') }}
                                                            @break
                                                        @case('commission')
                                                            {{ __('matter.type.commission') }}
                                                            @break
                                                        @default
                                                    @endswitch
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.status.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($matter->status)
                                                        @case('pending')
                                                            {{ __('matter.status.pending') }}
                                                            @break
                                                        @case('inprogress')
                                                            {{ __('matter.status.inprogress') }}
                                                            @break
                                                        @case('complete')
                                                            {{ __('matter.status.complete') }}
                                                            @break
                                                        @case('archive')
                                                            {{ __('matter.status.archive') }}
                                                            @break
                                                        @default
                                                    @endswitch
                                                </div>
                                                @if($matter->type != 'commission')
                                                    <div class="col-md-3">
                                                        <label> {{ __('matter.economic_department') }}</label>
                                                        <p class="text-secondary m-0">{{ $matter->economicDept->name }}</p>
                                                    </div>
                                                @endif
                                                @if($matter->type == 'commission')
                                                    <div class="col-md-3">
                                                        <label> {{ __('matter.is_mosaweba') }}</label>
                                                        <p class="text-secondary m-0">@if($matter->is_mosaweba == 'yes') {{ __('global.yes') }} @else {{ __('global.nos') }} @endif</p>
                                                    </div>
                                                @endif
                                            </div>
                                            <hr>
                                            <div class="row m-3 pb-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.organization_slash_company') }}</label>
                                                    <p class="text-secondary m-0">{{ $matter->organizationName->name ?? '-' }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.is_used') }}</label>
                                                    <p class="text-secondary m-0">@if($matter->is_used == 'yes') {{ __('global.yes') }} @else {{ __('global.nos') }} @endif</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($matter->date) }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('matter.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($matter->created_at) }}</p>
                                                </div>
                                                
                                            </div>
                                        </div>
                                        <div class="col-12 holder m-4" style="box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);">
                                            <div class="row">
                                                <div class="row m-4 p-0">
                                                    <div class="col-md-6">
                                                        <label> {{ __('matter.description') }}</label>
                                                        <p class="text-secondary m-0">{{ $matter->description}}</p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label> {{ __('matter.comment') }}</label>
                                                        <p class="text-secondary m-0">{{ $matter->comments }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @if($matter->type != 'commission')
                                            <div class="col-12 mb-3 mt-3">
                                                <div class="row m-4">
                                                    <h4>{{__('matter.assign_sepcialist')}}</h4><hr>
                                                    
                                                    <div class="row p-0 m-0">
                                                        @if($matter->specialist_by == null)
                                                            <div class="m-1">
                                                                <p>{{ __('matter.waiting_for_economic_dept_to_assign_specialist') }}</p>
                                                            </div>
                                                            @if(auth()->user()->hasPermissionTo('Matter - Assign Matter'))
                                                                <form action="{{ route('assignMatter') }}" method="post" id="assignMatter">
                                                                    <div class="row">
                                                                        @csrf <!-- Don't forget to include CSRF token for security -->
                                                                        <div class="col-md-6" id="departmentSpecialist"></div>
                                                                        <div class="col-md-6">
                                                                            <button type="submit" class="btn btn-primary">{{ __('global.save') }}</button>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            @endif
                                                        @else
                                                            <div class="m-1">{{ __('matter.specialist_assigned_see_below_action') }}</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                       
                                            @if($matter->specialist_by != null)
                                                <div class="col-12 mb-3 mt-3">
                                                    <div class="row m-4">
                                                        <h4>{{__('matter.specialist_decision')}}</h4><hr>
                                                        @if($matter->specialist_action_at == null)
                                                            <div class="m-1">
                                                                <p>{{ __('matter.waiting_for_specialist_action') }}</p>
                                                            </div>
                                                            @if(auth()->user()->hasPermissionTo('Matter - Specialist Action Matter'))
                                                                <div class="row p-0 m-0">
                                                                    <form method="post" id="approveDeclineMatter">
                                                                        <input type="hidden" name="matterId" id="matterId"  value="{{ encryption($matter->id) }}"/>
                                                                        <div class="row">
                                                                            @csrf
                                                                            <div class="col-md-8">
                                                                                <textarea name="matterReason" id="matterReason" rows="2" class="form-control"></textarea>
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <button type="button" class="btn btn-success" id="approveButton">{{ __('matter.approve') }}</button>
                                                                                <button type="button" class="btn btn-danger" id="declineButton">{{ __('matter.decline') }}</button>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            @endif
                                                        @else
                                                            @if($matter->specialist_action_at != null)
                                                                <div class="col-md-12">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="row">
                                                                                @php
                                                                                    $actionUser = \App\Models\User::find($matter->specialist_by);
                                                                                    $date = \Carbon\Carbon::parse($matter->specialist_action_at != null ? $matter->specialist_action_at : '');
                                                                                @endphp
                                                        
                                                                                <a href="#" class="text-white @if($matter->specialist_action == 'approve') bg-success @else bg-danger @endif" target="_blank">
                                                                                    <div class="p-3" style="height: 80px;">
                                                                                        <div class="d-flex justify-content-between align-items-center" style="height: 100%;">
                                                                                            <!-- Left: Action status + time -->
                                                                                            <div class="text-left">
                                                                                                <h6 class="mb-1" key="t-your-order">@if($matter->specialist_action == 'approve') Approved @else Declined @endif</h6>
                                                                                                <div class="font-size-12">
                                                                                                    <p class="mb-0">
                                                                                                        <i class="mdi mdi-clock-outline"></i>
                                                                                                        <span key="t-min-ago">{{ formatVertaDate($date->timestamp) }}</span>
                                                                                                    </p>
                                                                                                </div>
                                                                                            </div>
                                                                                
                                                                                            <!-- Center: Specialist reason -->
                                                                                            @if(!empty($matter->specialist_reason))
                                                                                                <div class="font-size-12 text-center px-3" style="flex: 1;">
                                                                                                    <p class="mb-0"><strong>{{ __('matter.specialist_decision') }}:</strong> {{ $matter->specialist_reason }}</p>
                                                                                                </div>
                                                                                            @endif
                                                                                
                                                                                            <!-- Right: Image and name -->
                                                                                            <div class="text-center" style="width: 5rem;">
                                                                                                <img src="{{ $actionUser && $actionUser->photo && file_exists(storage_path('app/public/attachment/employee/photo/' . $actionUser->photo)) ? asset('storage/attachment/employee/photo/'. $actionUser->photo) : asset('assets/img/default-img.png') }}"
                                                                                                    alt="{{ $actionUser->name }}" style="width:40px; height:40px;" class="avatar-title bg-primary rounded-circle font-size-16">
                                                                                                <h6 class="mt-1">{{ $actionUser->name ?? '' }}</h6>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </a>                                                        
                                                        
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    
                                                    </div>
                                                </div>
                                            @endif
                                        @endif

                                    </div>                 
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>
    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmationModalcustom" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close') }}"></button>
                </div>
                <div class="modal-body" id="confirmationModalBody">
                    Are you sure you want to proceed with this action?
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-primary" id="confirmAction">{{ __('global.yes') }}</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('global.nos') }}</button>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
            let approveMessage = "{{ __('matter.are_you_agree_to_approve_the_requested_matter') }}";
            let declineMessage = "{{ __('matter.are_you_agree_to_decline_the_requested_matter') }}";

            let confirmApprove = "{{ __('matter.approve') }}";
            let confirmDecline = "{{ __('matter.decline') }}";

            let matter = "{{ $matter->id }}";
            let matterEconDepartment = "{{ $matter->econo_department_id }}";

            // Dynamically load the departmentSpecialist list here
            var access_token = $("#access_token").val();
            $.ajax({
                type: "GET",
                url: "{{ route('getMatterSpeclialists')}}",
                data: { 
                    access_token: access_token,
                    matterEconDepartment: matterEconDepartment,
                },
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success:function(result){                    
                    $('#departmentSpecialist').html(result.content);
                    $(".select2").select2();
                },
                error:function(result){    
                    var errors = result.responseJSON;
                    $('#departmentSpecialist').html(errors);
                }
            });
            // End

            $(document).on('submit', '#assignMatter', function(e) {
                e.preventDefault();

                matterId = lastUrlSegment();

                if(!validateForm('assignMatter')){
                    return false;
                }

                var formData = new FormData(this);
                formData.append('matter_id', matterId);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            $("#assignMatter")[0].reset();
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(response.message);

                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewMatter", ["id" => "__id__"]) }}'.replace('__id__', matterId);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options = {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });
                
            });

            let formAction = '';

            document.getElementById('approveButton').addEventListener('click', function() {
                formAction = 'approve';
                $('#confirmationModalLabel').text(confirmApprove);
                $('#confirmationModalBody').text(approveMessage);
                $('#confirmationModalcustom').modal('show');
            });

            document.getElementById('declineButton').addEventListener('click', function() {
                formAction = 'decline';
                $('#confirmationModalLabel').text(confirmDecline);
                $('#confirmationModalBody').text(declineMessage);
                $('#confirmationModalcustom').modal('show');
            });

            document.getElementById('confirmAction').addEventListener('click', function() {
                // Get the URL based on the action
                const url = formAction === 'approve' ? '{{ route('approveMatter') }}' : '{{ route('declineMatter') }}';
                let matter_id = lastUrlSegment();

                // Prepare the data to be sent
                const data = {
                    _token: '{{ csrf_token() }}', // CSRF token for security
                    matterReason: $('#matterReason').val(), // Get the textarea value
                    matterId: $('#matterId').val() // Get the textarea value
                };

                // AJAX request
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    success: function(response) {
                        if(response.status == 'success'){
                            $('#confirmationModalcustom').modal('hide');
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(response.message);

                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewMatter", ["id" => "__id__"]) }}'.replace('__id__', matter_id);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        // Handle error (e.g., show an error message)
                        alert('An error occurred: ' + xhr.responseText);
                    }
                });
            });

        });
    </script>
@endsection