@extends('layouts.app')
@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('order_header.index') }}">order_header</a>
    </li>
    <li class="breadcrumb-item">
        {{ $record->id }}
    </li>
@endsection
@section('header')
    <h3><i class="fa fa-eye"></i> {{ $record->id }}</h3>
@endsection
@section('tools')
    <div class="btn-group">


    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            @if (session('app_error') || session('sap_message_error'))
                <div class="alert alert-warning">
                    {{ session('app_error') }} {{ session('sap_message_error') }}
                </div>
            @endif
            @if (session('app_message') || session('sap_message'))
                <div class="alert alert-success">
                    {{ session('app_message') }} {{ session('sap_message') }}
                </div>
            @endif
        </div>
        <div class='card'>
            <div class="card-header">{{ __('orders.manage') }}</div>
            <div class="card-body">
                <div class="row">
                    
                    <div class="col-md-4 col-sm-12 mt-4">
                        @include('cards.order.client')
                    </div>
                    <div class="col-md-8 col-sm-12 mt-4">
                        @include('cards.order.detail')
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                        <div class="card-header">{{ __('orders.manage_client') }}</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 col-sm-12">
                                    @include('forms.order_manage')
                                </div>
                                <div class="col-md-8 col-sm-12">
                                    @include('forms.order_activity')
                                    <div class="table-responsive mt-4">
                                        @include('tables.order_activity')
                                    </div>
                                    {{-- @include('cards.order.detail') --}}
                                </div>
                            </div>
                           
                            
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endSection

@push('custom-scripts')
    <script type="module">
        $(document).ready(function() {
            var activityAdded = false;
            $('#order_activity_form').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');
                var data = form.serialize();
                $.ajax({
                    beforeSend: function() {
                        $('#loader').show();
                    },
                    complete: function() {
                        $('#loader').hide();
                    },
                    type: 'POST',
                    url: url,
                    data: data,
                    success: function(response) {
                        // console.log(response);
                        // $('#order_activity_form').trigger('reset');
                        var html = '';
                        response.forEach(element => {
                            html += '<tr>';
                            html += '<td>' + element.activity + '</td>';
                            html += '<td>' + element.comments + '</td>';
                            html += '<td>' + element.followup_date + '</td>';
                            html += '<td>' + element.name + '</td>';
                            html += '</tr>';
                        });
                        $('#order_activity_table tbody').html(html);
                        activityAdded = true;
                        // $('#order_activity_table').load(location.href + ' #order_activity_table');
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });
            $('#order_manage_form').on('submit', function(e) {
                // e.preventDefault();
                // check activity added before submit
                if (!activityAdded) {
                    alert('Debe agregar una actividad antes de guardar');
                    return false;
                }
            });
        });

    </script>
@endpush