@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;
        }

        @media print {
            .no-print {
                display: none !important;
            }
            .print-section {
                display: block !important;
            }
            .modal {
                position: relative !important;
                display: block !important;
                overflow: visible !important;
            }
            .modal, .modal-backdrop {
                display: none !important;
            }
        }

        @media screen {
            .print-section {
                display: none;
            }
        }

        #print-section{
            width: 100%;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #888;
        }
        #logo img{
            width: 150px;
        }
    </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 -->
                           <!-- 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] -->
                            <div class="card-header p-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <ol class="breadcrumb align-items-center m-0">
                                        <li class="breadcrumb-item">
                                            <a href="{{ route('dashboard') }}">
                                                <i class="fa fa-list mx-1" style="position: relative; top: 2px"></i> {{ __('global.dashboard')}}
                                            </a>
                                        </li>
                                        <li class="breadcrumb-item active">
                                            <i class="fas fa-angle-double-left mx-1" style="position: relative; top: 3px"></i> {{ $page_title }}
                                        </li>
                                    </ol>
                                    <div class="d-flex p-2">
                                        <button type="button" class="btn btn-primary" onclick="window.print();">
                                            <i class="fa fa-print"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-body">
                                    <div class="col-md-12">
                                        <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.title') }}</label>
                                                    <p class="text-secondary m-0">{{ $agenda->title}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('agenda.type.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($agenda->type)
                                                        @case('tarh')
                                                            {{ __('agenda.type.tarh') }}
                                                            @break
                                                        @case('technical')
                                                            {{ __('agenda.type.technical') }}
                                                            @break
                                                        @case('commission')
                                                            {{ __('agenda.type.commission') }}
                                                            @break
                                                        @default
                                                    @endswitch
                                                    </p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('agenda.status.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($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-3">
                                                    <label> {{ __('agenda.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($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">{{ $agenda->time ?? ''}}</p>
                                                </div>
                                                <div class="col-md-4">
                                                    <label> {{ __('agenda.location') }}</label>
                                                    <p class="text-secondary m-0">{{ $agenda->location ?? ''}}</p>
                                                </div>
                                                <div class="col-md-5">
                                                    <label> {{ __('agenda.participant') }}</label>
                                                    <p class="text-secondary m-0">{{ $agenda->participant ?? ''}}</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">
                                                <div class="row m-3 p-0">
                                                    <div class="col-md-12">
                                                        <label> {{ __('agenda.description') }}</label>
                                                        <p class="text-secondary m-0">{{ $agenda->description}}</p>
                                                    </div>
                                                </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;
                                                    $isBeforeApproved = true;
                                                @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>
                                                                @if($agenda->action_before == 'approve' && $isBeforeApproved)
                                                                    <th style="padding:0.7rem !important;">{{ __('matter.committee_decission') }}</th>
                                                                @endif
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @if($agenda && $agenda->matters)
                                                                @foreach($agenda->matters as $matter)
                                                                @php
                                                                    $isBeforeApproved = $matter->committee_decision == null ? false : true;
                                                                @endphp
                                                                    <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>
                                                                        @if($agenda->action_before == 'approve' && $isBeforeApproved)
                                                                            <td style="padding:0.5rem !important;">{{ $matter->committee_decision }}</td>
                                                                        @endif
                                                                    </tr>
                                                                @endforeach
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="holder m-2">
                                            <hr>
                                            <h4>{{__('agenda.directorate_deputy_decision_before_decission')}}</h4><hr>
                                        </div>

                                        @if($agenda->action_before_by != null)
                                            <div class="holder m-2">
                                                <div class="row p-3">
                                                    @php
                                                        $actionUser = \App\Models\User::find($agenda->action_before_by);
                                                        $date = \Carbon\Carbon::parse($agenda->action_before_at != null ? $agenda->action_before_at : '');
                                                    @endphp

                                                    <a href="#" class="text-white @if($agenda->action_before == '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($agenda->action_before == '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
                                            <div class="col-12 m-2">
                                                <p>{{ __('agenda.waiting_for_directorate_deputy_action') }}</p>

                                                @if(auth()->user()->hasPermissionTo('Agenda - Action Agenda'))
                                                    <div class="row p-0 m-0">
                                                        <form method="post" id="approveDeclineAgenda" class="p-0">
                                                            <input type="hidden" name="agendaId" id="agendaId"  value="{{ encryption($agenda->id) }}"/>
                                                            <div class="row">
                                                                @csrf
                                                                <div class="col-md-8">
                                                                    <textarea name="agendaReason" id="agendaReason" rows="2" class="form-control"></textarea>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <button type="button" class="btn btn-success" id="approveButton" data-flag="before">{{ __('agenda.approve') }}</button>
                                                                    <button type="button" class="btn btn-danger" id="declineButton" data-flag="before">{{ __('agenda.decline') }}</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif

                                        @if($agenda->action_before == 'approve' && $isBeforeApproved)
                                            <div class="holder m-2">
                                                <hr>
                                                <h4>{{__('agenda.directorate_deputy_decision_after_decission')}}</h4><hr>
                                            </div>
                                            @if($agenda->action_after_by != null)
                                                <div class="holder mt-3 mb-3 ms-2 me-2">
                                                    <div class="row p-3">
                                                        @php
                                                            $actionUser = \App\Models\User::find($agenda->action_after_by);
                                                            $date = \Carbon\Carbon::parse($agenda->action_after_at != null ? $agenda->action_after_at : '');
                                                        @endphp

                                                        <a href="#" class="text-white @if($agenda->action_after == '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($agenda->action_after == '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
                                                <div class="col-12 m-2">
                                                    <p>{{ __('agenda.waiting_for_directorate_deputy_action') }}</p>

                                                    @if(auth()->user()->hasPermissionTo('Agenda - Action Agenda'))
                                                        <div class="row p-0 m-0">
                                                            <form method="post" id="approveDeclineAgenda" class="p-0">
                                                                <input type="hidden" name="agendaId" id="agendaId"  value="{{ encryption($agenda->id) }}"/>
                                                                <div class="row">
                                                                    @csrf
                                                                    <div class="col-md-8">
                                                                        <textarea name="agendaReason" id="agendaReason" rows="2" class="form-control"></textarea>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <button type="button" class="btn btn-success" id="approveButton" data-flag="after">{{ __('agenda.approve') }}</button>
                                                                        <button type="button" class="btn btn-danger" id="declineButton" data-flag="after">{{ __('agenda.decline') }}</button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    @endif
                                                </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

    <div class="print-section" id="print-section" style="display: none;">
        <div class="card p-3">
            <div class="card-body">
                <div class="col-12">
                    <div class="row">
                        <div class="col-3">
                            <div class="pull-right p-3" id="logo">
                                <img src="{{ asset('assets/logo/logo.png') }}" style="width:140px;">
                            </div>
                        </div>
                        <div class="col-6">
                            <div id="title-info" class="mt-4">
                                <h3>{{ __('agenda.afghanistan_islamic_emirate') }}</h3>
                                <h4>{{ __('agenda.directorate_economic_deputy') }}</h4>
                                @if($agenda->type == 'technical')
                                    <h4>{{ __('agenda.economic_directorate') }}</h4>
                                @endif

                                @if($agenda->type != 'technical')
                                    <h5 id="emplpyee-dir">{{ __('agenda.tarh_committee') }} </h5>
                                @endif
                            </div>
                            <div class="pt-3 pb-3">
                                <h5 id="emplpyee-dir">{{ $agenda->title }}</h5>
                                @if($agenda->type == 'technical')
                                    <h5 id="emplpyee-dir">{{ $agenda->time }}</h5>
                                @endif
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="pull-left" id="logo">
                                <img src="{{ asset('assets/logo/investment-committee.jpeg') }}" style="width:140px;">
                            </div>
                        </div>
                    </div>
                    @if($agenda->type != 'technical')
                        <div class="row pt-1">
                            <div class="col-12 text-right pe-4">
                                <h6 class="fw-bold">{{ __('agenda.time') }}: {{ $agenda->time }}</h6>
                            </div>
                        </div>
                    @endif

                    <div class="row pt-3">
                        <div class="col-12 pe-4 ps-4">
                            <div class="table-responsive">
                                <table class="table table-bordered fs-12">
                                    <thead class="bg-dark text-white sticky-top shadow-sm">
                                        <tr class="v-align-middle">
                                            <th>{{ __('agenda.no') }}</th>
                                            <th>{{ __('matter.item') }}</th>
                                            <th>{{ __('matter.organization_slash_company') }}</th>
                                            <th>{{ __('agenda.include_organization') }}</th>
                                            <th>{{ __('agenda.time') }}</th>
                                            @if($agenda->action_before == 'approve' && $isBeforeApproved)
                                                <th>{{ __('matter.committee_decission') }}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 1;
                                            $isBeforeApprovedPrint = true;
                                            $totalTimePrint = 0;
                                        @endphp
                                        @if($agenda && $agenda->matters)
                                            @foreach($agenda->matters as $matterPrint)
                                            @php
                                                $isBeforeApprovedPrint = $matterPrint->committee_decision == null ? false : true;
                                                $time = \Carbon\Carbon::parse($matterPrint->timing);
                                                $totalTimePrint += $time->hour * 60 + $time->minute;
                                                $minutes = \Carbon\Carbon::parse($matterPrint->timing)->hour * 60 + \Carbon\Carbon::parse($matterPrint->timing)->minute;
                                            @endphp
                                                <tr class="v-align-middle">
                                                    <td class="text-center bg-dark text-white" style="padding:0.5rem !important;">{{ $i++; }}</td>
                                                    <td style="padding:0.5rem !important;">{{ $matterPrint->matterName->title }}</td>
                                                    <td style="padding:0.5rem !important;">{{ $matterPrint->matterName->organizationName->name ?? '-'}}</td>
                                                    <td style="padding:0.5rem !important;">
                                                        <ul class="organization-list">
                                                            @foreach ($matterPrint->organization_names as $organizationName)
                                                                <li>{{ $organizationName }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </td>
                                                    <td style="padding:0.5rem !important;width:10%;"><span>{{ $matterPrint->timing }} {{ __('global.minute') }}</span></td>
                                                    @if($isBeforeApprovedPrint == true)
                                                        <td style="padding:0.5rem !important;">{{  $matterPrint->committee_decision ?? '' }}</td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-12 text-right pe-4">
                            <h6 class="fw-bold">{{ __('agenda.meeting_location') }} : {{ $agenda->location ?? '' }}</h6>
                            <h6 class="fw-bold">{{ __('agenda.estimated_time') }}: {{ $minutes ?? '' }} {{ __('global.minute') }}</h6>
                            @if($agenda->type == 'technical') <h6 class="fw-bold"> {{ __('agenda.meeting_participant') }}: {{ $agenda->participant ?? '' }}</h6> @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@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 = "{{ __('agenda.are_you_agree_to_approve_the_created_agenda') }}";
            let declineMessage = "{{ __('agenda.are_you_agree_to_decline_the_created_agenda') }}";
            let confirmApprove = "{{ __('agenda.approve') }}";
            let confirmDecline = "{{ __('agenda.decline') }}";

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

            let formAction = '';
            let flag = '';

            document.getElementById('approveButton').addEventListener('click', function() {
                flag = this.getAttribute('data-flag'); // Use getAttribute to retrieve the data attribute
                formAction = (flag == 'before') ? 'approveBefore' : 'approveAfter';
                $('#confirmationModalLabel').text(confirmApprove);
                $('#confirmationModalBody').text(approveMessage);
                $('#confirmationModalcustom').modal('show');
            });

            document.getElementById('declineButton').addEventListener('click', function() {
                flag = this.getAttribute('data-flag'); // Use getAttribute to retrieve the data attribute
                formAction = (flag == 'before') ? 'declineBefore' : 'declineAfter';
                $('#confirmationModalLabel').text(confirmDecline);
                $('#confirmationModalBody').text(declineMessage);
                $('#confirmationModalcustom').modal('show');
            });

            document.getElementById('confirmAction').addEventListener('click', function() {
                // Get the URL based on the action
                const url = (flag === 'before')
                    ? (formAction === 'approveBefore' ? '{{ route('approveAgendaBefore') }}' : '{{ route('declineAgendaBefore') }}')
                    : (formAction === 'approveAfter' ? '{{ route('approveAgendaAfter') }}' : '{{ route('declineAgendaAfter') }}');
                let agenda_id = lastUrlSegment();

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