@extends('layouts.layout-2')

@section('content')

    <style>
        .btn-xs {
            line-height: 1.3em;
        }
        .table tbody + tbody {
            border-top: 1px solid #9c9c9c;
        }
        .table th, .table td {
            border-top: none;
        }
        .table tr.border-none td, .table tr.border-none th  {
            border-top: none;
        }
        .table .thead-dark th {
            color: #4E5155;
            background-color: rgba(24, 28, 33, 0.1);
            border-color: rgba(63, 69, 74, 0.1);
        }

        .input-group-text {
            padding: 0.438rem 0.475rem;
        }
       .badge.indicator:not(.badge-dot) {
           -webkit-transform: translate(20%, -30%);
           transform: translate(20%, -30%);
       }


    </style>
    <div class="float-right mt-3">
        <a href="{{route('requests')}}" class="btn btn-sm btn-default">{{ __('zur Übersicht') }}</a>
        <a href="{{ make_old_url('/index.php/booking/'.$booking->id.'/edit') }}" class="btn btn-sm btn-default float-right">{{ __('zurück ins CRM v2') }}</a>
    </div>
    <h4 class="font-weight-bold py-3 mb-1">
        Buchung verwalten
    </h4>
    <ul class="nav nav-sm nav-tabs nav-justified tabs-alt mb-3" id="top-nav-quick-jump">
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingInfo">
                Kunde
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingLead">
                Anfrage
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingBooking">
                Buchung
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingServices">
                Leistungen
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingMyJack">
                MyJack
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingParticipant">
                Teilnehmer
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingPrice">
                Preis
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingOrganisation">
                Organisation
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingCompany">
                Veranstalter
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingProvider">
                Leistungsträger
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingMails">
                E-Mails
                <span class="badge badge-primary">{{$booking->customer_mails->count()}}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingFiles">
                PDF Dateien
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)" data-collapse="#collapseBookingNotice">
                Notizen
            </a>
        </li>
    </ul>

    {!! Form::open(['url' => route('booking_detail', [$id]), 'class' => 'form-horizontal', 'id'=>'booking-form-validation']) !!}

    <input type="hidden" name="id" id="id" value="{{$id}}">

    <!-- Info -->
    @include('booking._detail_info')

    <!-- Anfrage -->
    @include('booking._detail_lead')

    <!-- Buchung -->
    @include('booking._detail_booking')

    <!-- Leistungen -->
    @include('booking._detail_services')

    <!-- MyJack -->
    @include('booking._detail_myjack')

    <!-- MyJack -->
    @include('booking._detail_participant')

    <!-- Preis -->
    @include('booking._detail_price')

    <!-- Organisation -->
    @include('booking._detail_drafs')

    <!-- Veranstalter -->
    @include('booking._detail_company')

    <!-- Leistungsträger -->
    @include('booking._detail_provider')

    {!! Form::close() !!}

    @include('booking._detail_mails')

    @include('booking._detail_files')

    @include('booking._detail_notice')

    <div class="float-right mt-3">
        <a href="{{route('requests')}}" class="btn btn-sm btn-default">{{ __('zur Übersicht') }}</a>
        <a href="{{ make_old_url('/index.php/booking/'.$booking->id.'/edit') }}" class="btn btn-sm btn-default float-right">{{ __('zurück ins CRM v2') }}</a>
    </div>

    <div class="modal fade" id="modals-load-next">
        <div class="modal-dialog modal-lg">

        </div>
    </div>

    <!-- Modal template -->
    <div class="modal fade" id="modals-change-travel-dates">
        <div class="modal-dialog">
            <form class="modal-content" action="{{ route('booking_action', ['change_travel_dates', $booking->id]) }}" method="post" onsubmit="return confirm('Datum wirklich ändern?');">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Reise verschieben</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-row mb-2">
                        <label for="">Neues Start-Datum von:</label>
                        <input type="text" class="form-control datepicker-base" name="change_travel_start_date" value="{{ \App\Services\Util::_format_date($booking->start_date)}}">
                    </div>
                    <p>Alle Einträge der Organisistion werden auf das neue Start-Datum angepasst.<br>
                        Neue Reiseanmeldung, Reisebestätigung vorerst im CRM v2 erstellen.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{__('close')}}</button>
                    <button type="submit" class="btn btn-primary">{{__('ändern')}}</button>
                </div>
            </form>

        </div>
    </div>

    <script>
        $(document).ready(function() {


            var collapseHashValue = null;
            $('[rel="tooltip"]').tooltip({trigger: "hover"});

            $('#top-nav-quick-jump .nav-link').on('click', function (e) {
                e.preventDefault();
                $('#top-nav-quick-jump .nav-link').removeClass('active');
                $(this).addClass('active');
                var collapse_id = $(this).data('collapse');
                //console.log(collapse_id);
                $(collapse_id).collapse('show');
                // animate
                $('html, body').animate({
                    scrollTop: $(collapse_id).parent('.card').offset().top
                }, 300, function(){
                    // when done, add hash to url
                    // (default click behaviour)
                    window.location.hash = collapse_id;
                });

            });

            $(".collapse").on('shown.bs.collapse', function (){
                if(collapseHashValue){
                    $('a[data-collapse="#'+collapseHashValue+'"]').click();
                    collapseHashValue = null;
                }
                CookiesAddJSONValue('booking_collapse', $(this).attr('id'));
                window.location.hash = "#"+$(this).attr('id');

            });

            $(".collapse").on('hidden.bs.collapse', function (){
                CookiesRemoveJSONValue('booking_collapse', $(this).attr('id'));
            });

            function init_site(){
                if(window.location.hash){
                    value = $(window.location.hash).attr('id');
                    if(value){
                        collapseHashValue = value;
                        CookiesAddJSONValue('booking_collapse', value);
                    }
                }
                var booking_collapses = Cookies.get('booking_collapse');
                if (booking_collapses != null)
                {
                    booking_collapses =  JSON.parse(booking_collapses);
                    for (var booking_collapse in booking_collapses){
                        $("#"+booking_collapses[booking_collapse]).collapse("show");
                    }
                }
            }
            init_site();


            var oTable = $('#datatables-customer-mails').DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                ajax: {
                    url: '{!! route( 'customer_mail_data_table' ) !!}',
                    data: function(d) {
                        d.model = 'CustomerMail';
                        d.booking_id = $('#customer_mails_table input[name=booking_id]').val();
                        d.customer_mail_dir = $('#customer_mails_table input[name=customer_mail_dir]').val();
                        d.customer_mail_subdir = $('#customer_mails_table input[name=customer_mail_subdir]').val();
                        d.data_table_search = $('#dataTableInputSearchField').val();
                    }
                },
                "columns": [
                    /* { data: 'checkbox', width: '10px', orderable: false, searchable: false}, */
                    { data: 'important', width: '15px', searchable: false },
                    { data: 'subject', name: 'subject', width: '', orderable: false, },
                    { data: 'date', name: 'date', width: '' },
                    { data: 'action',  width: '100px', orderable: false, searchable: false},
                ],
                "bLengthChange": false,
                "iDisplayLength": 25,
                "orderSequence": ["desc", "asc"],
                "order": [[ 2, "desc" ]],
                "language": {
                    "url": "/js/German.json"
                },
                "drawCallback": function( settings ) {
                    $('#datatables-customer-mails [rel="tooltip"]').tooltip({trigger: "hover"});
                    $('#datatables-customer-mails .customer-mail-ajax-action').on('click', function (event) {
                        ajax_object_action(event, $(this), callback_customer_mails_data_table);
                    });
                }
            });
            function callback_customer_mails_data_table(data) {
                if(data.status === 'success'){
                    oTable.draw();
                }
            }

            $('.messages-wrapper .sidebox-nav-item').on('click', function (event) {
                event.preventDefault();
                if($(this).hasClass('active')){
                    return;
                }
                $('#customer_mails_table input[name=customer_mail_dir]').val($(this).data('dir'));
                $('#customer_mails_table input[name=customer_mail_subdir]').val($(this).data('subdir'));
                if($(this).data('dir') <= 10){
                    $('.btn-compare-customer-mails').data('customer_mail_dir', $(this).data('dir'));
                    $('.btn-compare-customer-mails').data('customer_mail_subdir', $(this).data('subdir'));
                    $('.btn-compare-customer-mails').prop('disabled', false);
                }else{
                    $('.btn-compare-customer-mails').prop('disabled', true);
                }
                oTable.draw();
                $('.messages-wrapper .sidebox-nav-item').removeClass('active');
                $(this).addClass('active');
                $('#message-sidebox-title-icon').removeClass().addClass('fa ' + $(this).data('icon'));
                $('#message-sidebox-title-name').html($(this).data('name'));
                $('.messages-wrapper .sidebox-nav-item').find('.badge-primary').removeClass('badge-primary').addClass('badge-outline-primary');
                $(this).find('.badge').removeClass('badge-outline-primary').addClass('badge-primary');
            });

            $('#dataTableInputSearchField').keyup(function(){
                oTable.search($(this).val()).draw();
            });

            $.dragYScroll();
            var sort_item_pos_number = function(){
                var index = 1;
                $('#table_dragula_tbody .draft_item_tbody').each(function () {
                    $(this).find('.item_pos_number').html(index);
                    $(this).data('rowPosition', index);
                    index++;
                });
            };
            $(function() {
                // Drag handle
                var sortableItems = dragula([$('#table_dragula_tbody')[0]], {
                    moves: function (el, container, handle) {
                        return handle.classList.contains('handle');
                    }
                });
                sortableItems.on('dragend', function() {
                    //sort new
                    sort_item_pos_number();
                });
            });

            $('table .move-up-btn').on('click', function () {
                var thisRow = $(this).closest('tbody');
                var prevRow = thisRow.prev();
                if (prevRow.length) {
                    prevRow.before(thisRow);
                    sort_item_pos_number()
                }
            });

            $('table .move-down-btn').on('click', function () {
                var thisRow = $(this).closest('tbody');
                var nextRow = thisRow.next();
                if (nextRow.length) {
                    nextRow.after(thisRow);
                    sort_item_pos_number()
                }
            });
        });
    </script>


@endsection