@extends('lay.dnekcab.retsam')

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

@section('css')
    <style>
        .table>:not(caption)>*>*{
            padding:0.3rem !important;
        }
        .custom-img{
            width: 150px;
            padding: 1rem;
        }
        @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;
            }
        }
    </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] -->

                            <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>
                                    @if(auth()->user()->hasPermissionTo('Protocol - Print Protocol'))
                                        @if($protocolWithPersonVehicle->status == 'archived' && $protocolWithPersonVehicle->action =='approve')
                                            <div class="d-flex p-2">
                                                <button type="button" class="btn btn-primary printBtn" data-id="{{ $protocolWithPersonVehicle->id }}">
                                                    <i class="fa fa-print"></i>
                                                </button>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </div>    
                           
                            <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 pt-4 m-2">
                                                <div class="col-md-12">
                                                    @php
                                                        $selectedIds = json_decode($protocolWithPersonVehicle->incoming_organization, true) ?? [];
                                                    @endphp
                                                    <label for="editIncoming_organization" class="form-label">{{ __('protocol.incoming_organization') }}</label>
                                                    <select name="r_editIncoming_organization[]" id="editIncoming_organization" multiple="multiple" class="form-control select2" disabled>
                                                    @if($Organizations)
                                                        @foreach($Organizations as $organization)
                                                            <option value="{{ $organization->id }}" @if(in_array($organization->id, $selectedIds)) selected @endif>{{ $organization->name }}</option>
                                                        @endforeach
                                                    @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row m-3 pt-4">
                                                <div class="col-md-4">
                                                    <label> {{ __('protocol.date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($protocolWithPersonVehicle->date) }}</p>
                                                </div>
                                                <div class="col-md-4">
                                                    <label> {{ __('protocol.time') }}</label>
                                                    <p class="text-secondary m-0">{{ $protocolWithPersonVehicle->entrance}}</p>
                                                </div>
                                                <div class="col-md-4">
                                                    <label> {{ __('protocol.type') }}</label>
                                                    <p class="text-secondary m-0">@if($protocolWithPersonVehicle->type == 'official') {{ __('protocol.official') }} @else {{ __('protocol.unofficial') }} @endif</p>
                                                    
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row m-3 pb-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('protocol.persons.person_name') }}</label>
                                                    <p class="text-secondary m-0">{{ $protocolWithPersonVehicle->requestUser->name}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('protocol.person_count') }}</label>
                                                    <p class="text-secondary m-0">{{ $protocolWithPersonVehicle->person_count }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('protocol.vehicle_count') }}</label>
                                                    <p class="text-secondary m-0">{{ $protocolWithPersonVehicle->vehicle_count }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('protocol.created_date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($protocolWithPersonVehicle->created_at) }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-3 mt-3">
                                            <div class="row m-4">
                                                <h4>{{__('protocol.persons.header')}}</h4><hr>
                                                <div class="row m-0 p-0">
                                                    @if($protocolWithPersonVehicle->persons)
                                                        @foreach($protocolWithPersonVehicle->persons as $person)
                                                            <div class="col-lg-6 p-0">
                                                                <div class="card custom-card-border m-1 p-1">
                                                                    <div class="row no-gutters align-items-center">
                                                                        <div class="col-md-8">
                                                                            <div class="card-body">
                                                                                <h5 class="card-title">{{ $person->name }} ({{ $person->last_name }}) 
                                                                                    <span class="me-3 ms-3">
                                                                                        [ {{ __('protocol.persons.person_tazkera') }} 
                                                                                         <a 
                                                                                            href="{{ $person->tazkera_attachment ? asset('assets/protocol/person/tazkera/'.$person->protocol_id.'/'.$person->tazkera_attachment) : '#' }}" 
                                                                                            class="me-3 ms-3" 
                                                                                            @if($person->tazkera_attachment) target="_blank" @endif>
                                                                                            <i class="fa fa-file"></i>
                                                                                        </a> ]
                                                                                    </span>
                                                                                </h5>
                                                                                <table class="table fs-10">
                                                                                    <tr>
                                                                                        <th> {{ __('protocol.persons.person_father_name') }}: </th><td>{{ $person->father_name }}</td>
                                                                                        <th>{{ __('protocol.persons.organization') }}: </th><td>{{ $person->organization->name }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <th>{{ __('protocol.persons.person_tazkera_number') }}: </th><td>{{ $person->tazkera_number }}</td>
                                                                                        <th>{{ __('protocol.persons.person_phone_number') }}: </th><td>{{ $person->phone_number }}</td>
                                                                                    </tr>
                                                                                </table>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-4 text-center">
                                                                            @php
                                                                                $photoPath = public_path('assets/protocol/person/photo/' . $person->photo);
                                                                            @endphp
                                                                            <img class="card-img img-fluid custom-img" src="{{ ($person->photo && file_exists($photoPath)) ? asset('assets/protocol/person/photo/' .$person->protocol_id.'/'.$person->photo) : asset('assets/img/default-img.png')}}" target="_blank" alt="Person image">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12 mb-3 mt-3">
                                            <div class="row m-4">
                                                <h4>{{__('protocol.vehicles.header')}}</h4><hr>
                                                <div class="row p-0 m-0">
                                                    @if($protocolWithPersonVehicle->vehicles)
                                                        @foreach($protocolWithPersonVehicle->vehicles as $vehicle)
                                                            <div class="col-lg-6 p-0">
                                                                <div class="card custom-card-border m-1 p-1">
                                                                    <div class="row no-gutters align-items-center">
                                                                        <div class="col-md-8">
                                                                            <div class="card-body">
                                                                                <h5 class="card-title">{{ $vehicle->vehicle->name }} [@if($vehicle->type == 'car') {{ __('protocol.vehicles.car')}} @else {{ __('protocol.vehicles.motorcycle')}} @endif]</h5>
                                                                                <table class="table fs-10">
                                                                                    <tr>
                                                                                        <th> {{ __('protocol.vehicles.pallet_number') }}: </th><td>{{ $vehicle->pallet_number }}</td><th>{{ __('protocol.vehicles.color.header') }}: </th>
                                                                                        <td>
                                                                                            @switch($vehicle->color)
                                                                                                @case('black')
                                                                                                    {{ __('protocol.vehicles.color.black') }}
                                                                                                    @break
                                                                                                @case('white')
                                                                                                    {{ __('protocol.vehicles.color.white') }}
                                                                                                    @break
                                                                                                @case('silver')
                                                                                                    {{ __('protocol.vehicles.color.silver') }}
                                                                                                    @break
                                                                                                @case('gray')
                                                                                                    {{ __('protocol.vehicles.color.gray') }}
                                                                                                    @break
                                                                                                @case('red')
                                                                                                    {{ __('protocol.vehicles.color.red') }}
                                                                                                    @break
                                                                                                @case('blue')
                                                                                                    {{ __('protocol.vehicles.color.blue') }}
                                                                                                    @break
                                                                                                @case('green')
                                                                                                    {{ __('protocol.vehicles.color.green') }}
                                                                                                    @break
                                                                                                @case('yellow')
                                                                                                    {{ __('protocol.vehicles.color.yellow') }}
                                                                                                    @break
                                                                                                @default
                                                                                                    
                                                                                            @endswitch
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-md-4 text-center">
                                                                            @php
                                                                                $vehiclePath = public_path('assets/protocol/vehicle/' . $vehicle->vehicle_picture);
                                                                            @endphp
                                                                            <img class="card-img img-fluid custom-img" src="{{ ($vehicle->vehicle_picture && file_exists($vehiclePath)) ? asset('assets/protocol/vehicle/' .$vehicle->protocol_id.'/'.$vehicle->vehicle_picture) : asset('assets/img/default-car.png')}}" target="_blank" alt="Car image">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="col-12 mb-3 mt-3">
                                            <div class="row m-4">
                                                <h4>{{__('protocol.approval')}}</h4><hr>
                                                <div class="row p-0 m-0">
                                                <x-protocol-approval 
                                                    :protocol="$protocolWithPersonVehicle"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>

    <x-confirmation-modal />

@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 protocol = "{{ $protocolWithPersonVehicle->id }}";

            $(document).on("click", ".printBtn", function(e){
                e.preventDefault();
                var id = $(this).attr('data-id');
                var urllink = '/protocol/printProtocolPdf/' + id;
                $.ajax({
                    url: urllink, 
                    type: "POST", // Request type
                    cache: false, // Do not cache returned data
                    data: { id: id },
                    processData: false, // Important for FormData
                    contentType: false, // Important for FormData
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}" // Set the CSRF token in the request headers
                    },
                    dataType: "json" // Type of data returned
                }).done(function(response) {
                    if (response.success) {
                        var downloadUrl = response.url;
                        // Create a temporary <a> element
                        var a = document.createElement('a');
                        a.href = downloadUrl;
                        a.download = response.fileName; // Set the desired file name
                        document.body.appendChild(a);
                        // Simulate a click on the <a> element
                        a.click();
                        // Remove the <a> element
                        document.body.removeChild(a);
                    } else {
                        toastr.options = {
                            "closeButton": true,
                            "progressBar": true
                        }
                        toastr.error(response.message);
                    }
                });
            });
        });
    </script>
@endsection