@extends('lay.dnekcab.retsam')

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

@section('css')
    <style>
        .table>:not(caption)>*>*{
            padding:0.3rem !important;
        }
        @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] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                           
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-md-12">
                                        <div class="holder m-4" style="box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);">
                                            <div class="row m-3 pt-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.request_user') }}</label>
                                                    <p class="text-secondary m-0">{{ $transportWithDetails->requestUser->name ?? ''}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.source') }}</label>
                                                    <p class="text-secondary m-0">{{ $transportWithDetails->sourceOrganization->name ?? ''}}</p>
                                                    
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.destination') }}</label>
                                                    <p class="text-secondary m-0">{{ $transportWithDetails->destinationOrganization->name ?? ''}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.date') }}</label>
                                                    <p class="text-secondary m-0">{{ getHijriDate($transportWithDetails->date ?? '') }}</p>                                                    
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row m-3 pb-4">
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.start_time') }}</label>
                                                    <p class="text-secondary m-0">{{ $transportWithDetails->start_time ?? ''}}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.end_time') }}</label>
                                                    <p class="text-secondary m-0">{{ $transportWithDetails->end_time ?? '' }}</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.type') }}</label>
                                                    <p class="text-secondary m-0">@if(@$transportWithDetails->type == 'official') {{ __('transport.official') }} @else {{ __('transport.unofficial') }} @endif</p>
                                                </div>
                                                <div class="col-md-3">
                                                    <label> {{ __('transport.status') }}</label>
                                                    <p class="text-secondary m-0">@if(@$transportWithDetails->status == 'active') {{ __('transport.active') }} @elseif(@$transportWithDetails->status == 'complete') {{ __('transport.complete') }} @else {{ __('transport.archive') }} @endif</p>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="col-12 mb-3 mt-3">
                                            <div class="row m-4">
                                                <div class="row p-0 m-0">
                                                <x-transport-approval-directorate 
                                                    :transport="$transportWithDetails"/>
                                                </div>
                                            </div>
                                        </div>
                                        @if($transportWithDetails->directorate_action == 'approved')
                                            <hr>
                                            <div class="col-12 mb-3 mt-3">
                                                <div class="row m-4">
                                                    <div class="row p-0 m-0">
                                                    <x-transport-manager-approval 
                                                        :transport="$transportWithDetails"
                                                        :transportLowlevelStaff="$transportLowlevelStaff"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                            @if($transportWithDetails->transport_manager_action == 'approved')
                                                <hr>
                                                <div class="col-12 mb-3 mt-3">
                                                    <div class="row m-4">
                                                        <div class="row p-0 m-0">
                                                        <x-transport-employee-assign 
                                                            :transport="$transportWithDetails"
                                                            :drivers="$drivers"
                                                            :cars="$cars"/>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if($transportWithDetails->transport_action == 'approved')
                                                    @if(@$transportWithDetails->car_id != null)
                                                    <div class="col-12 mb-3 mt-3">
                                                        <div class="row m-4">
                                                            <div class="col-lg-6 p-0">
                                                                <h4>{{__('transport.driver.header')}}</h4><hr>
                                                                @if(@$transportWithDetails->driver)
                                                                    @php
                                                                        $photoPath = public_path('assets/attachment/employee/photo/' . $transportWithDetails->driver->image);
                                                                    @endphp
                                                                    <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">{{ $transportWithDetails->driver->name ?? '' }} ({{ $transportWithDetails->driver->last_name ?? '' }}) </h5>
                                                                                    <table class="table fs-10">
                                                                                        <tr>
                                                                                            <th> {{ __('transport.driver.father_name') }}: </th><td>{{ $transportWithDetails->driver->father_name ?? '' }}</td>
                                                                                            <th>{{ __('transport.driver.grand_father_name') }}: </th><td>{{ $transportWithDetails->driver->grand_father_name ?? '' }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <th>{{ __('transport.driver.id_number') }}: </th><td>{{ $transportWithDetails->driver->id_number ?? '' }}</td>
                                                                                            <th>{{ __('transport.driver.phone_number') }}: </th><td>{{ $transportWithDetails->driver->phone ?? '' }}</td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <img src="{{ $transportWithDetails && $transportWithDetails->driver->image && file_exists($photoPath) ? asset('assets/attachment/employee/photo/' . $transportWithDetails->driver->image) : asset('assets/img/default-img.png') }}"
                                                                                    alt="{{ $transportWithDetails->driver->name }}" class="card-img img-fluid" target="_blank">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            <div class="col-lg-6 p-0">
                                                                <h4>{{__('transport.car.header')}}</h4><hr>
                                                                @if(@$transportWithDetails->car)
                                                                    @php
                                                                        $picturePath = public_path('assets/transport/car/image/' . $transportWithDetails->car->picture);
                                                                    @endphp
                                                                    <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">{{ $transportWithDetails->car->name ?? '' }}</h5>
                                                                                    <table class="table fs-10">
                                                                                        <tr>
                                                                                            <th> {{ __('transport.pallet_number') }}: </th><td>{{ $transportWithDetails->car->pallet_number ?? '' }}</td><th>{{ __('transport.color.header') }}: </th>
                                                                                            <td>
                                                                                                @switch($transportWithDetails->car->color ?? '')
                                                                                                    @case('black')
                                                                                                        {{ __('transport.color.black') }}
                                                                                                        @break
                                                                                                    @case('white')
                                                                                                        {{ __('transport.color.white') }}
                                                                                                        @break
                                                                                                    @case('silver')
                                                                                                        {{ __('transport.color.silver') }}
                                                                                                        @break
                                                                                                    @case('gray')
                                                                                                        {{ __('transport.color.gray') }}
                                                                                                        @break
                                                                                                    @case('red')
                                                                                                        {{ __('transport.color.red') }}
                                                                                                        @break
                                                                                                    @case('blue')
                                                                                                        {{ __('transport.color.blue') }}
                                                                                                        @break
                                                                                                    @case('green')
                                                                                                        {{ __('transport.color.green') }}
                                                                                                        @break
                                                                                                    @case('yellow')
                                                                                                        {{ __('transport.color.yellow') }}
                                                                                                        @break
                                                                                                    @default
                                                                                                        
                                                                                                @endswitch
                                                                                            </td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <th>{{ __('transport.start_km') }}: </th><td>{{ $transportWithDetails->start_km ? $transportWithDetails->start_km. ' km' : '' }}</td>
                                                                                            <th>{{ __('transport.end_km') }}: </th><td>{{ $transportWithDetails->end_km ? $transportWithDetails->end_km. ' km' : '' }}</td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-4">
                                                                                <img src="{{ $transportWithDetails && $transportWithDetails->car->picture && file_exists($picturePath) ? asset('assets/transport/car/image/' . $transportWithDetails->car->picture) : asset('assets/img/default-car.png') }}"
                                                                                    alt="{{ $transportWithDetails->car->name }}" class="card-img img-fluid" target="_blank">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr>
                                                    @endif
                                                @endif
                                            @endif
                                        @endif
                                    </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 transport = "{{ @$transportWithDetails->id }}";

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

                if(!validateForm('addModirToRequest')){
                    return false;
                }
                var formData = new FormData(this);

                var transport_id = lastUrlSegment();
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewTransport", ["id" => "__id__"]) }}'.replace('__id__', transport_id);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });
            });

            $(document).on('change', '#transportDriver', function(e) {
                var access_token = $("#access_token").val();
                var driver = $("#transportDriver option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getDriverCar')}}",
                    data: { 
                        access_token: access_token,
                        driver: driver
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){        
                        $('#transportCar').val(result.id).trigger('change');
                                        
                        // $('#transportCar').val(result.id);
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#transportCar').html(errors);
                    }
                });
            });

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

                if(!validateForm('addDriverCar')){
                    return false;
                }
                var formData = new FormData(this);

                var transport_id = lastUrlSegment();
                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.success(response.message);
                            setTimeout(function() {
                                // Construct the URL using a template literal
                                var redirectUrl = '{{ route("viewTransport", ["id" => "__id__"]) }}'.replace('__id__', transport_id);
                                window.location.href = redirectUrl;
                            }, 2000); // 2 seconds in milliseconds
                        } else {
                            console.log(response);
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });
            });

        });
    </script>
@endsection