@extends('voyager::master')

@section('page_title', __('voyager::generic.view').' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i> {{ __('voyager::generic.viewing') }} {{ ucfirst($dataType->getTranslatedAttribute('display_name_singular')) }}
        &nbsp;

        @can('edit', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
                <i class="glyphicon glyphicon-pencil"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
            </a>
        @endcan
        @can('delete', $dataTypeContent)
            @if($isSoftDeleted)
                <a href="{{ route('voyager.'.$dataType->slug.'.restore', $dataTypeContent->getKey()) }}"
                   title="{{ __('voyager::generic.restore') }}" class="btn btn-default restore"
                   data-id="{{ $dataTypeContent->getKey() }}" id="restore-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.restore') }}</span>
                </a>
            @else
                <a href="javascript:;" title="{{ __('voyager::generic.delete') }}" class="btn btn-danger delete"
                   data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">
                    <i class="voyager-trash"></i> <span
                        class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                </a>
            @endif
        @endcan
        @can('browse', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
                <i class="glyphicon glyphicon-list"></i> <span
                    class="hidden-xs hidden-sm">{{ __('voyager::generic.return_to_list') }}</span>
            </a>
        @endcan
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered" style="padding-bottom:5px;">
                    <!-- form start -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.agency') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->agency->name }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.name') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->name }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.cover_image') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <img class="table-photo" style="max-width: -webkit-fill-available;" src="{{ Voyager::image($dataTypeContent->cover_image) }}" alt="{{ $dataTypeContent->name }}"/>
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.agency_description') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->description }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.price_per_person') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->price_per_person }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.destination') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->destination }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.date') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->date }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.status') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->status }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.cancellation_policy') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->cancellation_policy }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.views') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->views }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.bookings_count') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ $dataTypeContent->bookings_count }}
                    </div>
                    <hr style="margin:0;">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.country_id') }}</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        {{ implode(' , ', $dataTypeContent->countries->pluck('name')->toArray()) }}
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-bordered new-panel">
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">{{ __('voyager::seeders.data_rows.price_history') }}</h3>
                    </div>

                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover dataTable no-footer" role="grid" aria-describedby="dataTable_info">
                                <thead>
                                <tr>

                                    @can('delete',app($dataType->model_name))
                                        <th tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1"
                                            aria-label=": activate to sort column ascending">
                                            <label class="checkbox">
                                                <input type="checkbox" class="select_all">
                                                {{--<svg>
                                                    <use xlink:href="{{asset("/css/baltoe-icons.svg#correct")}}"></use>
                                                </svg>--}}
                                            </label>
                                        </th>
                                    @endcan

                                    <th>{{ __('voyager::seeders.data_rows.package') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.price') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.user') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.created_at') }}</th>
                                    <th class="disabled-sorting">{{ __('voyager::generic.actions') }}</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"><i
                            class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}
                        ?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="{{ __('voyager::generic.delete_confirm') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right"
                            data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('javascript')
    <!-- DataTables -->
    <script src="{{ asset('js/datatable-browse.js') }}" type="text/javascript"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            /**
             * custom_datatable function
             * var url it's Ajax route
             * var Columns datatables columns name and received data
             * var del destroy route
             * var load_img path of loading image
             * */

            var url = "{{ route('voyager.price_history.ajax') }}";
            var columns = [
                    @can('delete',app($dataType->model_name))
                {

                    data: 'id', orderable: false, searchable: false, "render": function (id)
                    {
                        return `<input type="checkbox" name="row_id" id="checkbox_${id}" value="${id}">`;
                    }
                },
                    @endcan

                {data: 'package', name: 'package'},
                {data: 'price', name: 'price'},
                {data: 'user', name: 'user'},
                {data: 'created_at', name: 'created_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ];
            var del = '{{ route('voyager.'.$dataType->slug.'.destroy', ['id' => '__id']) }}';


            custom_datatable(url, columns,'dataTable', del);
        });

        $(document).ready(function () {
            $('input[data-toggle="toggle"]').on('change', function () {
                if ($(this).is(':checked')) {
                    $('#dataTable').on('preXhr.dt', function ( e, settings, data ) {
                        data.show_deleted   = true;
                    } ).DataTable().ajax.reload();

                } else {
                    $('#dataTable').on('preXhr.dt', function ( e, settings, data ) {
                        data.show_deleted   = false;
                    } ).DataTable().ajax.reload();
                }
            });
        });
    </script>

    @if ($isModelTranslatable)
        <script>
            $(document).ready(function () {
                $('.side-body').multilingual();
            });
        </script>
    @endif
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                // Save form action initial value
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });

    </script>
@stop