<x-app-layout>
    <x-slot name="header">
        <div class="row">
            <div class="col-6">
                <h4 class="" title><i class="circular icon fa fa-list"></i> {{ $cruise->name.'-'.$cruise->cruise_number   }} </h4>
            </div>
            <div class="col-6">
                <a class="btn btn-primary btn-sm float-right" href="{{route('cruises.index')}}"> {{ __('Back') }}</a>
            </div>
        </div>
    </x-slot>

    <!--begin::Entry-->

    <div class="row">

        <div class="box col-4">
            <header>
                <h4><i class="fas fa-thumbtack float-right"></i>{{__('General information ')}}</h4>
            </header>
            <ul class="list-group">
                <li class="list-group-item"><strong>{{__('Name')}} :</strong> <span>{{ $cruise->name }} </span> </li>
                <li class="list-group-item"><strong>{{__('Number')}} :</strong> <span>{{ $cruise->cruise_number }} </span> </li>
                <li class="list-group-item"><strong>{{__('Destination')}} :</strong> <span>{{ $cruise->origin_port .'-'.$cruise->destination_port }}</span> </li>
                <li class="list-group-item"><strong>{{__('Departure Date')}} :</strong> <span>{{ $cruise->departuredate }} {{ $cruise->departure_time }}</span> </li>
                <li class="list-group-item"><strong>{{__('Arrival Date')}} :</strong> <span>{{ $cruise->arrival_date }} {{ $cruise->arrivaltime }}</span> </li>
            </ul>
        </div>
        <div class="box col-8">
            <log-activity id="{{$cruise->id}}" model="cruise" />
        </div>
    </div>



    <x-slot name="after_script">
    <script src="/bower_components/admin-lte/plugins/moment/moment.min.js"></script>
    <script src="/bower_components/admin-lte/plugins/moment/locales.min.js"></script>
        <script>
            window.app = new Vue({
                el: '#app',
                data: {},
                mounted: function() {
                    this.$root.load = false;
                    moment.locale('{{App::currentLocale()}}');
                }
            });
        </script>
    </x-slot>
</x-app-layout>