@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 -->
                            <!--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-4 pb-4">
                                                <div class="col-md-8">
                                                    <label> {{ __('commission.title') }}</label>
                                                    <p class="text-secondary m-0">{{ $commission->title}}</p>
                                                </div>
                                                <div class="col-md-2">
                                                    <label> {{ __('commission.status.header') }}</label>
                                                    <p class="text-secondary m-0">
                                                    @switch($commission->status)
                                                        @case('pending')
                                                            {{ __('commission.status.pending') }}
                                                            @break
                                                        @case('inprogress')
                                                            {{ __('commission.status.inprogress') }}
                                                            @break
                                                        @case('complete')
                                                            {{ __('commission.status.complete') }}
                                                            @break
                                                        @case('archive')
                                                            {{ __('commission.status.archive') }}
                                                            @break
                                                        @default
                                                    @endswitch
                                                </div>
                                                <div class="col-md-2">
                                                    <label> {{ __('commission.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($commission->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-6">
                                                    <label> {{ __('commission.time') }}</label>
                                                    <p class="text-secondary m-0">{{ $commission->time ?? ''}}</p>
                                                </div>
                                                <div class="col-md-6">
                                                    <label> {{ __('commission.location') }}</label>
                                                    <p class="text-secondary m-0">{{ $commission->location ?? ''}}</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="p-1">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-striped">
                                                        <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>
                                                        @php
                                                            $i = 1;
                                                        @endphp
                                                        <tbody>
                                                            @if($commission && $commission->matters)
                                                                @foreach($commission->matters as $matter)
                                                                    <tr>
                                                                        <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-4 p-0">
                                                    <div class="col-md-12">
                                                        <label> {{ __('commission.description') }}</label>
                                                        <p class="text-secondary m-0">{{ $commission->description}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

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

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

                                                    <a href="#" class="text-white @if($commission->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($commission->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
                                            <div class="col-12 m-4">
                                                <p>{{ __('commission.waiting_for_directorate_action') }}</p>
                                                @if($commission->description != null)
                                                    @if(auth()->user()->hasPermissionTo('Commission - Action Commission'))
                                                        <div class="row p-0 m-0">
                                                            <form method="post" id="approveDeclineCommission" class="p-0">
                                                                <input type="hidden" name="commissionId" id="commissionId"  value="{{ encryption($commission->id) }}"/>
                                                                <div class="row">
                                                                    @csrf
                                                                    <div class="col-md-8">
                                                                        <textarea name="commissionReason" id="commissionReason" rows="2" class="form-control"></textarea>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <button type="button" class="btn btn-success" id="approveButton">{{ __('commission.approve') }}</button>
                                                                        <button type="button" class="btn btn-danger" id="declineButton">{{ __('commission.decline') }}</button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    @endif
                                                @else
                                                    <p>{{ __('commission.please_edit_and_add_description') }}</p>
                                                @endif
                                            </div>
                                        @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') }}">
                            </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>
                            </div>
                            <div class="pt-3 pb-3">
                                <h5 id="emplpyee-dir">{{ $commission->title }}</h5>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="pull-left" id="logo">
                                <img src="{{ asset('assets/logo/logo.png') }}">
                            </div>
                        </div>
                    </div>
                    <div class="row pt-1">
                        <div class="col-12 text-right pe-4">
                            <h6 class="fw-bold">{{ __('agenda.time') }}: {{ $commission->time }}</h6>
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-12 pe-4 ps-4">
                            <table class="table table-bordered fs-12">
                                <thead class="bg-dark text-white">
                                    <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>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $i = 1;
                                        $totalTimePrint = 0;
                                    @endphp
                                    @if($commission && $commission->matters)
                                        @foreach($commission->matters as $matterPrint)
                                        @php
                                            $totalTimePrint += $matterPrint->timing;
                                        @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>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-12 text-right pe-4">
                            <h6 class="fw-bold">{{ __('agenda.meeting_location') }} : {{ $commission->location ?? '' }}</h6>
                            <h6 class="fw-bold">{{ __('agenda.estimated_time') }}: {{ $totalTimePrint ?? '' }} {{ __('global.minute') }}</h6>
                        </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 = "{{ __('commission.are_you_agree_to_approve_the_created_commission') }}";
            let declineMessage = "{{ __('commission.are_you_agree_to_decline_the_created_commission') }}";
            let confirmApprove = "{{ __('commission.approve') }}";
            let confirmDecline = "{{ __('commission.decline') }}";

            let commission = "{{ $commission->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('approveCommission') }}' : '{{ route('declineCommission') }}';
                let commission_id = lastUrlSegment();

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