@extends('work_orders.layouts.master')
@section('page_content')

<!-- PAGE TITLE -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">@lang('translation.sf_menus.work_orders.details')</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">@lang('translation.sf_menus.work_orders.main')</li>
                    <li class="breadcrumb-item"><a href="/work_orders/list">@lang('translation.sf_menus.work_orders.list')</a></li>
                    <li class="breadcrumb-item active">@lang('translation.sf_menus.work_orders.details')</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-3">
        <div class="card">
            <div id="time_tracking_container" class="card-body text-center">
                @include('work_orders.partials.details.time_tracking')
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div id="details_container">
                    @include('work_orders.partials.details.details')
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-5">
        <div class="card">
            <div class="card-body">
                <div class="d-flex mb-3">
                    <h6 class="card-title mb-0 flex-grow-1">
                        @Lang('translation.contents.tasks')
                    </h6>
                </div>
                <div data-simplebar style="height: {{ $workOrder->status == 2 ? '499px' : '595px' }};" class="px-3 mx-n3 mb-2 tc-height">
                    <ul class="mb-0 list-unstyled vstack gap-2">
                        <div id="tasks_container">
                            @include('work_orders.partials.details.tasks')
                        </div>
                    </ul>
                </div>
                <div id="tasks_form_container">
                    @if(auth()->user()->hasPermissionTo('edit', "work_orders.list"))
                    @include('work_orders.partials.details.tasks_form')
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card">
            <div  class="card-body">
                <div class="d-flex mb-3">
                    <h6 class="card-title mb-0 flex-grow-1">
                        @Lang('translation.contents.comments')
                    </h6>
                </div>
                <div data-simplebar style="height: {{ $workOrder->status == 2 ? '499px' : '595px' }};" class="px-3 mx-n3 mb-2 tc-height">
                    <div id="comments_container">
                        @include('work_orders.partials.details.comments')
                    </div>
                </div>
                <div id="comments_form_container">
                    @if(auth()->user()->hasPermissionTo('edit', "work_orders.list"))
                    @include('work_orders.partials.details.comments_form')
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div id="work_order_id" data-id="{{ $workOrder->id }}" style="display: none;"></div>

@include('work_orders.partials.details.modals')

@endsection 
@section('custom_scripts')
    <script src="{{ URL::asset('build/js/apps/work_orders/details.js') }}"></script>
@endsection