@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endsection
@section('main-content')
<div class="breadcrumb">
    <ul>
        <li><a href="{{route('dashboard')}}">Home</a></li>
        <li><a href="{{route('problemSolving.index')}}">Problem Solving</a></li>
        <li><a href="{{route('problemSolving.view',[$entry->problem_solving_id])}}">Topic</a></li>
        <li>Entry</li>
    </ul>
</div>
<div class="breadcrumb">
    <h1>{!!$entry->title!!}</h1>
</div>
<div class="separator-breadcrumb border-top"></div>


<section class="contact-list">
    <div class="row">
        <div class="col-md-10 offset-1 mb-4">
            @if (isset($entry)) 
            <div class="row border-bottom-dotted-light p-4" id='ENTRY-{{$entry->id}}'>
                <div class="col-sm-1">
                    <div style="width:55px; text-align: center;" class="shadow bg-body rounded">

                        <div class="me-2" style="padding: 2px 11px; text-align: center; background-color: #840808; color:#fff; font-weight: bold; ">
                            {{date('M',strtotime($entry->event_date))}}
                        </div>
                        <div style=" background: #fff; border: 1px solid #840808; padding: 2px 11px; font-size: 16px;font-weight: bold; ">
                            {{date('d',strtotime($entry->event_date))}}
                            <div style="border-top:1px dashed #840808;font-size: 10px;">
                                {{date('Y',strtotime($entry->event_date))}} 
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-sm-11">
                    <div class="card-body p-0">
                        <div>
                            <h5 class="mb-0">{!!$entry->title!!} <a target="_blank" data-action="pinEntry" data-id="{{$entry->id}}" class="ajax_submit_link text-18 cursor-pointer"><i class="fa-solid fa-thumbtack {{($entry->is_pin=='y')?'text-success':'text-warning'}}" title="{{($entry->is_pin=='y')?'Removed pin':'Pin'}}"></i></a><a target="_blank" data-action="bookmarkEntry" data-id="{{$entry->id}}" class="ajax_submit_link cursor-pointer"> <i class="fa-regular fa-bookmark {{($entry->is_bookmark=='y')?'text-success':'text-warning'}} text-18" title="{{($entry->is_bookmark=='y')?'Remove bookmark':'Bookmark'}}"></i></a></h5>
                            <small>Added on system: {{date('D dS M, Y',strtotime($entry->created_at))}} by {{$entry->AddedBy->name}}</small>
                        </div>
                        <p class="card-text">
                            {!! nl2br($entry->notes) !!}
                        </p>
                        <div class="row">
                            <div class="col-sm-8">
                                @if($entry->entrySubLabels)
                                <ul class="list-group list-group-flash"  title="Sub-labels">
                                    <li class="list-group-item border-0 m-0 p-0">
                                        @foreach($entry->entrySubLabels as $subL)
                                        <span class="badge bg-primary w-badge">{{$subL->sub_label}}</span>
                                        @endforeach
                                    </li>
                                </ul>
                                @endif
                            </div>
                            <div  class="col-sm-4 float-end text-right" title="Download Attached File">
                                @if($entry->documents)
                                <a target="_blank" href="{{ route('problemSolving.downloadFile', ['fileId' => $entry->documents->id]) }}"><i class="fa-solid fa-file-arrow-down text-20 text-blue-300"></i> {{$entry->documents->doc_name}}</a>
                                @endif
                            </div>
                        </div>

                    </div>
                    <a href="{{route('problemSolving.view',[$entry->problem_solving_id])}}" class="mt-12 btn btn-warning btn-sm"><< Back to topic</a>
                </div>
            </div>
            @else
            <div class="alert alert-dismissible fade show alert-card alert-warning text-center mt-24">No entry found</div>
            @endif
        </div>
    </div>
</section>

<!-- end of row -->

@endsection

@section('bottom-js')
<script>
    $('body').on('click', '.ajax_submit_link', function () {
        var _action = $(this).attr('data-action');
        var _id = $(this).attr('data-id');
        $.ajax({
            url: "{{ route('problemSolving.store') }}",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            data: {
                id: _id, action: _action
            },
            success: function (response) {
                var successOptions = {
                    closeButton: !0
                };
                toastr.success(response.success, "Success", successOptions);
                location.reload();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var err = eval("(" + jqXHR.responseText + ")");
                var showError = '';
                for (var x in err.errors) {
                    showError += err.errors[x] + "<br/>";
                }
                toastr.error(showError, "Error", {
                    closeButton: !0
                });
            }
        });
    });
</script>
@endsection