@extends('lay.dnekcab.retsam')

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

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

        .organization-list {
            list-style-type: decimal; /* Use decimal numbering */
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margin */
            display: flex; /* Use flexbox to align items in a row */
        }

        .organization-list li {
            margin-right: 25px; /* Add spacing between items */
        }
        .select2-container {
            z-index: 9999;
        }
    </style>
@endsection

@section('page-content')

    <div class="page-content no-print">
        <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">
                                        <h5 class="bg-info card text-light p-2 m-2">{{__('result.result_details')}}</h5>
                                        <div class="holder m-2" 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-8">
                                                    <label> {{ __('result.title') }}</label>
                                                    <p class="text-secondary m-0">{{ $result->title}}</p>
                                                </div>
                                                <div class="col-md-2">
                                                    <label> {{ __('result.status.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($result->status)
                                                        @case('pending')
                                                            {{ __('result.status.pending') }}
                                                            @break
                                                        @case('inprogress')
                                                            {{ __('result.status.inprogress') }}
                                                            @break
                                                        @case('complete')
                                                            {{ __('result.status.complete') }}
                                                            @break
                                                        @case('archive')
                                                            {{ __('result.status.archive') }}
                                                            @break
                                                        @default
                                                    @endswitch
                                                </div>
                                                <div class="col-md-2">
                                                    <label> {{ __('result.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($result->created_at) }}</p>
                                                </div>
                                            </div>
                                            <div class="row m-3 pb-4">
                                                <hr>
                                                @if($result->resultMatters && $result->resultMatters->count())
                                                    <div class="col-md-12">
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered table-striped">
                                                                <thead class="thead-dark sticky-top shadow-sm">
                                                                    <tr>
                                                                        <th>{{ __('matter.item') }}</th>
                                                                        <th>{{ __('result.decission') }}</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach($result->resultMatters as $resultMatter)
                                                                        @if($resultMatter->matters)
                                                                            <tr>
                                                                                <td>{{ $resultMatter->matters->title }}</td>
                                                                                <td>{{ $resultMatter->decission }}</td>
                                                                            </tr>
                                                                        @endif
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                @endif
                                                <hr>
                                                <div class="col-md-12">
                                                    <label> {{ __('result.include_organization') }}</label>
                                                    <ol class="organization-list">
                                                        @foreach ($result->resultOrganization_names as $resultOrganizationName)
                                                            <li class="alert alert-secondary" style="padding:0.2rem 1rem !important;">{{ $resultOrganizationName }}</li>
                                                        @endforeach
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>

                                        <h5 class="bg-info card text-light p-2 m-2">{{__('agenda.agenda_details')}}</h5>
                                        <div class="alert alert-secondary m-2">
                                            <div class="holder m-2" 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-3 pb-3">
                                                    <div class="col-md-8">
                                                        <label> {{ __('agenda.title') }}</label>
                                                        <p class="text-secondary m-0">{{ $result->agenda->title}}</p>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <label> {{ __('agenda.status.header') }}</label>
                                                        <p class="text-secondary m-0">
                                                        @switch($result->agenda->status)
                                                            @case('pending')
                                                                {{ __('agenda.status.pending') }}
                                                                @break
                                                            @case('inprogress')
                                                                {{ __('agenda.status.inprogress') }}
                                                                @break
                                                            @case('complete')
                                                                {{ __('agenda.status.complete') }}
                                                                @break
                                                            @case('archive')
                                                                {{ __('agenda.status.archive') }}
                                                                @break
                                                            @default
                                                        @endswitch
                                                        </p>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <label> {{ __('agenda.created_date') }}</label>
                                                        <p class="text-secondary m-0">{{ getHijriDate($result->agenda->created_at) }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="holder m-2" 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-3 pb-3">
                                                    <div class="col-md-3">
                                                        <label> {{ __('agenda.time') }}</label>
                                                        <p class="text-secondary m-0">{{ $result->agenda->time ?? ''}}</p>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label> {{ __('agenda.location') }}</label>
                                                        <p class="text-secondary m-0">{{ $result->agenda->location ?? ''}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="holder mt-3 mb-3 ms-2 me-2" style="box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);">
                                                <div class="p-1">
                                                    @php
                                                        $i = 1;
                                                    @endphp
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-striped fs-12">
                                                            <thead class="bg-dark text-light sticky-top shadow-sm">
                                                                <tr>
                                                                    <th class="text-center" style="padding:0.7rem !important;">{{ __('global.no') }}</th>
                                                                    <th style="padding:0.7rem !important;">{{ __('matter.item') }}</th>
                                                                    <th style="padding:0.7rem !important;">{{ __('matter.organization_slash_company') }}</th>
                                                                    <th style="padding:0.7rem !important;">{{ __('matter.timing') }}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @if($result->agenda && $result->agenda->matters)
                                                                    @foreach($result->agenda->matters as $matter)
                                                                        <tr class="v-align-middle">
                                                                            <td class="text-center" style="padding:0.5rem !important;">{{ $i++; }}</td>
                                                                            <td style="padding:0.5rem !important;">{{ $matter->matterName->title }}</td>
                                                                            <td style="padding:0.5rem !important;">
                                                                                <ol class="organization-list">
                                                                                    @foreach ($matter->organization_names as $organizationName)
                                                                                        <li>{{ $organizationName }}</li>
                                                                                    @endforeach
                                                                                </ol>
                                                                            </td>
                                                                            <td style="padding:0.5rem !important;width:10%;"><span>{{ $matter->timing }} {{ __('global.minute') }}</span></td>
                                                                        </tr>
                                                                    @endforeach
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="holder m-2" 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-3 p-0">
                                                        <div class="col-md-12">
                                                            <label> {{ __('agenda.description') }}</label>
                                                            <p class="text-secondary m-0">{{ $result->agenda->description}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="holder m-2">
                                            <hr>
                                            <h3>{{__('result.directorate_decision')}}</h3><hr>
                                        </div>

                                        <div class="col-12 m-2">
                                            <p>{{ __('result.waiting_for_directorate_action') }}</p>
                                            @if($result->action_by != null)
                                            <div class="holder">
                                                <div class="row row p-3 m{{ app()->getLocale() == 'en' ? 'e' : 's'}}-2">
                                                    @php
                                                        $actionUser = \App\Models\User::find($result->action_by);
                                                        $date = \Carbon\Carbon::parse($result->action_at != null ? $result->action_at : '');
                                                    @endphp

                                                    <a href="#" class="text-white @if($result->action == 'approve') bg-success @else bg-danger @endif" target="_blank">
                                                        <div class="p-3" style="height: 80px;">
                                                            <div class="text-center pull-right" style="width:5rem !important;">
                                                                <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="pull-right">{{ $actionUser->name ?? '' }}</h6>
                                                            </div>
                                                            <div class="text-left pull-left">
                                                                <h6 class="mb-1" key="t-your-order">@if($result->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>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        @else
                                            @if(auth()->user()->hasPermissionTo('Result - Action Result'))
                                                <div class="row p-0 m-0">
                                                    <form method="post" id="approveDeclineResult" class="p-0">
                                                        <input type="hidden" name="resultId" id="resultId"  value="{{ encryption($result->id) }}"/>
                                                        <div class="row">
                                                            @csrf
                                                            <div class="col-md-8">
                                                                <textarea name="resultReason" id="resultReason" rows="2" class="form-control"></textarea>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <button type="button" class="btn btn-success" id="approveButton">{{ __('result.approve') }}</button>
                                                                <button type="button" class="btn btn-danger" id="declineButton">{{ __('result.decline') }}</button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            @endif
                                        @endif
                                        </div>
                                    </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 = "{{ __('result.are_you_agree_to_approve_the_created_result') }}";
            let declineMessage = "{{ __('result.are_you_agree_to_decline_the_created_result') }}";
            let confirmApprove = "{{ __('result.approve') }}";
            let confirmDecline = "{{ __('result.decline') }}";

            let result = "{{ $result->id }}";

            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('approveResult') }}' : '{{ route('declineResult') }}';
                let result_id = lastUrlSegment();

                // Prepare the data to be sent
                const data = {
                    _token: '{{ csrf_token() }}', // CSRF token for security
                    resultReason: $('#resultReason').val(), // Get the textarea value
                    resultId: $('#resultId').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("viewResult", ["id" => "__id__"]) }}'.replace('__id__', result_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