@section('title', __('Visa request No. '). $invoice->id)
<x-layout bodyClass="g-sidenav-show  bg-gray-200 ">

    <x-navbars.sidebar activePage="visa.invoices.index"></x-navbars.sidebar>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg {{$locale == 'ar'?'overflow-x-hidden':''}}">
        <!-- Navbar -->
        <x-navbars.navs.auth titlePage="{{ __('Visa request No. '). $invoice->id }}"></x-navbars.navs.auth>
        <!-- End Navbar -->
        <div>
            <div class="tables-page m-4">
                @include('pages.layout.flash_messages')
                <div class="row">
                    <div class="col-md-12 mb-5 card">
                        <div class="card-header d-flex align-items-center justify-content-between flex-xxl-row flex-lg-row flex-md-row flex-column">
                            <strong class="title_head h4 fw-semibold d-block">
                                {{ __('Visa request No. '). $invoice->id }}
                            </strong>
                            @include('components.breadCrumb.show',['path' => route('visa.invoices.index'),'section' => __('Visa orders'),'title' => __('Visa request No. '). $invoice->id])
                        </div>
                        <hr />
                        <div class="card-body table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>{{ __("Customer") }}</td>
                                        <td>{{ $invoice?->customer?->name }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Customer phone") }}</td>
                                        <td>{{ $invoice?->customer?->phone }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Status") }}</td>
                                        <td>
                                            <div class="badge bg-gradient-{{ $invoice->status }}">
                                                {{ __($invoice->status) }}
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Payment status") }}</td>
                                        <td>
                                            <div class="badge bg-gradient-{{ $invoice->payment_status }}">
                                                {{ __($invoice->payment_status) }}
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Country") }}</td>
                                        <td>{{ $invoice?->country?->name }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Visa type") }}</td>
                                        <td>{{ $invoice?->type?->name }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Date of travel") }}</td>
                                        <td>{{ $invoice->date_of_travel }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("No. of travelers") }}</td>
                                        <td>{{ $invoice->number_of_adults + $invoice->number_of_children }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("No. of adults") }}</td>
                                        <td>{{ $invoice->number_of_adults }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("No. of children") }}</td>
                                        <td>{{ $invoice->number_of_children }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Travelers relationship") }}</td>
                                        <td>{{ __($invoice->relationships) }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("The sponsor") }}</td>
                                        <td>{{ __($invoice?->sponsor?->sponsor) }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Bank statement") }}</td>
                                        <td>
                                            <a href="{{ route('visa.download-traveler',['file' => $invoice?->sponsor?->id,'type' => 'bank_statement']) }}">
                                                <button type="button" class="btn btn-sm btn-success">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Passport") }}</td>
                                        <td>
                                            <a href="{{ route('visa.download-traveler',['file' => $invoice?->sponsor?->id,'type' => 'passport']) }}">
                                                <button type="button" class="btn btn-sm btn-success">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Job letter") }}</td>
                                        <td>
                                            <a href="{{ route('visa.download-traveler',['file' => $invoice?->sponsor?->id,'type' => 'job_letter']) }}">
                                                <button type="button" class="btn btn-sm btn-success">
                                                    <i class="fa fa-download"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{{ __("Order date") }}</td>
                                        <td>{{ $invoice->created_at?->format('Y-m-d h:i A') }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('Action') }}</td>
                                        <td>
                                            <span>
                                                @if($invoice->status == 'pending'||$invoice->status == 'accepted')
                                                <a rel="tooltip" href="#" onclick='changeStatus("{{ $invoice->id }}")' class="btn btn-success btn-link btn-sm">
                                                    {{ __('Edit') }}
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                @endif
                                                {{-- <form class="delete-form d-inline " action="{{ route('visa.invoices.destroy', ['invoice' => $invoice->id]) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" class="delete-button btn btn-danger btn-link btn-sm" data-original-title="" title="">
                                                        {{ __('Delete') }}
                                                        <i class="fa fa-close"></i>
                                                    </button>
                                                </form> --}}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-12 card mb-2">
                        <div class="card-header d-flex align-items-center justify-content-between flex-xxl-row flex-lg-row flex-md-row flex-column">
                            <strong class="title_head h4 fw-semibold d-block">
                                {{ __('Travelers inforamtion') }}
                            </strong>
                        </div>
                        @foreach ($invoice->travelers as $traveler)
                        <div class="card-body table-responsive mt-2">
                            <h5>
                                {{ __('Traveler No. : ').$traveler->num }}
                                <span class="text-muted">({{ __($traveler->type) }})</span>
                            </h5>
                            @foreach ($traveler->groups as $group)
                            <div class="table-responsive p-0">
                                <h3>
                                    {{ $group->name }}
                                </h3>
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                                                {{__("Name")}}
                                            </th>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("Value")}} </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($group->attributes as $attribute)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="mb-0 text-sm">
                                                            {{$attribute->name}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">
                                                        @if ($attribute->type == 'multi_select')
                                                        <ul>
                                                            @foreach (json_decode($attribute->value) as $value)
                                                            <li>
                                                                @php
                                                                $value = json_encode($value,true);
                                                                @endphp
                                                                {{ json_decode($value,true)[app()->getLocale()] }}
                                                            </li>
                                                            @endforeach
                                                        </ul>
                                                        @elseif ($attribute->type == 'one_select')
                                                        <ul>
                                                            {{ (json_decode($attribute->value,true)[app()->getLocale()]) }}
                                                        </ul>
                                                        @elseif($attribute->type == 'file')
                                                        <a href="{{ route('visa.download-group-file',['file' => $attribute?->id]) }}">
                                                            <button type="button" class="btn btn-sm btn-success">
                                                                <i class="fa fa-download"></i>
                                                            </button>
                                                        </a>
                                                        @else
                                                        {{ $attribute->value }}
                                                        @endif
                                                    </h6>
                                                </div>
                                            </td>
                                        </tr>
                                        @empty
                                        <div class=" ">
                                            <div class=" d-flex justify-content-center text-center ">
                                                {{__("No entry found")}}
                                            </div>
                                        </div>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                    <div class="col-md-12 card mb-2">
                        <div class="card-header d-flex align-items-center justify-content-between flex-xxl-row flex-lg-row flex-md-row flex-column">
                            <strong class="title_head h4 fw-semibold d-block">
                                {{ __('Reply') }}
                            </strong>
                        </div>
                        <div class="card-body table-response">
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                                                {{__("ID")}}
                                            </th>

                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("Reply")}} </th>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("Files")}} </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($invoice->replies as $reply)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="mb-0 text-sm">
                                                            {{$reply->id}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{$reply->reply}}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                @if($reply->files->count())
                                                @foreach ($reply->files as $file)
                                                <a href="{{ route('visa.download-file',['file' => $file->id]) }}">
                                                    <button type="button" class="btn btn-sm btn-success">
                                                        <span class="btn-tooltip" data-bs-toggle="tooltip" title="{{ $file->original_name }}" data-container="body" data-animation="true" data-bs-toggle="tooltip">
                                                            <i class="fa fa-download"></i>
                                                        </span>
                                                    </button>
                                                </a>
                                                @endforeach
                                                @else

                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <div class=" ">
                                            <div class=" d-flex justify-content-center text-center ">
                                                {{__("No entry found")}}
                                            </div>
                                        </div>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="reply_invoice" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-khardl" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="change-status" method="POST" style="display: none" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <input type="hidden" name="status" id="orderStatus" required>
            <div id="files"></div>
            <div id="reply"></div>
        </form>
        <x-footers.auth></x-footers.auth>
        </div>
    </main>
    <x-plugins></x-plugins>
    @php
    $options = [];
    foreach($allStatus as $status) {
        $options[$status] = __($status);
    }
    @endphp
    @push('js')
    <script>
        function changeStatus(orderId) {
            let options = {!!json_encode($options) !!}
            event.preventDefault();
            Swal.fire({
                text: `{{ __('Are you sure you want to change visa #:id status',['id' => ':orderId']) }}`.replace(':orderId', orderId)
                , icon: 'warning'
                , input: 'select'
                , showCancelButton: true
                , inputOptions: options
                , inputPlaceholder: "{{ __('Select an option') }}"
                , confirmButtonText: "{{ __('Yes') }}"
                , cancelButtonText: "{{ __('No') }}"
            , }).then((result) => {
                if (result.isConfirmed) {
                    const selectedStatus = result.value;
                    document.getElementById('orderStatus').setAttribute('value', selectedStatus);
                    var form = document.getElementById('change-status');
                    form.action = `{{ route('visa.invoices.update', ['invoice' => ':orderId']) }}`.replace(':orderId', orderId);
                    const files = $('input[name="files[]"]');
                    if (files.length) {
                        $('#files').append(files.clone());
                    }
                    const reply = $('textarea[name="reply"]');
                    console.log(reply);
                    if (reply.length) {
                        $('#reply').append(reply.clone());
                    }
                    form.submit();
                }
            });
        }
        $(document).on('change','.swal2-select',function(){
            var val = $('option:selected',this).val();
            console.log(val);
            // Check if the selected value is "accepted"
            if (val == 'accepted') {
                var input = `
                      <div class="row mx-2">
                            <span>{{ __('Reply to visa request No. '). $invoice->id }}</span>
                            <div class="col-md-12">
                                <div class="input-group input-group-outline mt-2 ">
                                    {!! Form::label('reply', __('Reply'),['style' => 'width:40px']) !!}
                                    {!! Form::textarea('reply', null, ['class' => 'form-control']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {!! Form::label('files', __('Files'),['class'=>'form-label' ]) !!}
                                    {!! Form::file('files[]', ['class' => 'form-control','multiple'=> 'multiple']) !!}
                                </div>
                            </div>
                        </div>
                    `;
                $(this).after(input);
                console.log(this);
            }
        });

    </script>
    @endpush
</x-layout>