@extends('layouts.location_app')
@section('title', 'Drafts')
@section('content')
<div id="content" >
    <div class="headingWithSearch flex-column " >
        <style>
            .dt-search input{
                padding-left:25px !important;
            }
            .tooltip .tooltip-inner{
  max-width: fit-content !important;
  width: fit-content !important;
}



    /* tooltip */
    .tooltip-container {
        position: relative;
        display: inline-block; 
        cursor: pointer;  
        margin-left: 10px;
    }

    .tooltip-container .tooltip-text {
        visibility: hidden;
        width: 270px;
        background-color: white;
        color: rgb(27, 27, 27);
        text-align: center;
        padding: 8px;
        border-radius: 5px;
        position: absolute;
        top: 140%; 
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        font-size: 13px;
        font-family: Arial, sans-serif;
        white-space: normal;
        border: 1px solid #ccc;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        word-wrap: break-word;
        font-weight: 300;
    }

    .tooltip-container .tooltip-text::after {
        content: "";
        position: absolute;
        bottom: 100%; 
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent white transparent; 
    }

    .tooltip-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    .draft-back-button {
        margin: 10px;
    }
    .btn:hover{
        background: none !important;
    }
        </style>
      <div class="d-flex">
          <div class="heading-center" style="padding-top: 20px; display: flex; align-items: baseline;">
             Your Drafts 
             <span class="tooltip-container">
                 <svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                     <circle cx="12" cy="12" r="10" />
                     <line x1="12" y1="8" x2="12" y2="8" />
                     <line x1="12" y1="12" x2="12" y2="16" />
                 </svg>
                 <span class="tooltip-text">
                     Your drafts are only visible to you
                 </span>
             </span>
          </div>
    <div class="d-flex align-items-center">
 <a href="{{ route('location.simple_dashboard') }}" class="text-info text-decoration-none">
    <i class="fa fa-arrow-left me-1"></i> Back
</a>

</div>

      </div>
        <style>
            #session-dataTable_filter:after, .dt-search:after {
            left:10px !important;
        }
        </style>
        <div>
            @if($drafts->isEmpty())
                <p class="text-left">You do not have any drafts saved.</p>
            @else
                <table id="blockUser-table" class="table table-responsive table-bordered mx-auto dataTable w-100 new-table">
                    <thead class="text-center">
                        <tr>
                            {{-- <th class="text-center">User Name</th> --}}
                            <th style="text-align: center">Form</th>
                            <th class="text-center">Saved</th>
                            <th style="text-align: center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="all_locations text-center">
                        @foreach($drafts as $draft)
                            <tr>
                                {{-- <td class="fw-semibold email">{{$draft->user->name}}</td> --}}
                                <td class="position" style="">
                                    {{$draft->form->name}} 
                                    <p data-toggle="tooltip" data-placement="top" title="{{$draft->form->allow_drafts_off_site ? 'This form can be completed off site by signing into your User Account' : 'You cannot complete this draft offsite.'}}" class="badge bg-{{$draft->form->allow_drafts_off_site ? 'info' : ''}} m-0">
                                        {{$draft->form->allow_drafts_off_site ? 'Off-site' : ''}}
                                    </p>

                                    @if (isset($draft->triggered_record_id))
                                        <p class="badge bg-info m-0">Mandatory</p>
                                    @endif
                                </td>
                                <td class="fw-semibold email">{{$draft->created_at->format('D d/m/Y g:ia')}} <br> {{$draft->created_at->diffForHumans()}}</td>
                                <td>
                                    <div class="d-flex gap-1 justify-content-center align-items-center mx-auto" style="width: fit-content;">
                                        @php
                                            $draft_link = url('/bespoke_form_v3/#!/submit-draft/' . $draft->id);
                                            $tri_record = $draft->triggered_record();
                                            if (isset($tri_record) && !empty($tri_record)) {
                                                $draft_link .= '?linked_record=' . $draft->triggered_record_id;
                                                $draft_link .= '&cond_id=' . $tri_record['id'];
                                                $draft_link .= '&draft=1';

                                                if ($tri_record['type'] == 1) {
                                                    $draft_link .= '&external=1';
                                                } else {
                                                    $draft_link .= '&user=1';
                                                    $draft_link .= '&location_id=' . $draft->location_id;
                                                }
                                            }elseif(!isset($tri_record) && empty($tri_record)){
                                                $draft_link .= '?user=1';
                                                $draft_link .= '&location_id=' . $draft->location_id;
                                                 $draft_link .= '&draft=1';
                                            }
                                        @endphp
                                        <a href="#" data-link="{{route('location.delete_drafts', ['id' => $draft->id, '_token' => csrf_token()])}}" type="button" class="btn p-0 px-2 delete-btn" title="Delete Draft">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor">
                                                <path d="M135.2 17.7C140.1 7.2 150.7 0 162.5 0H285.5c11.8 0 22.4 7.2 27.3 17.7l13.1 26.3H400c26.5 0 48 21.5 48 48c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16c0-26.5 21.5-48 48-48H122.1l13.1-26.3zM32 128H416l-21.5 322.6c-1.8 27.4-24.6 49.4-52.1 49.4H105.6c-27.5 0-50.3-22-52.1-49.4L32 128zm128 80c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16s16-7.2 16-16V224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16s16-7.2 16-16V224c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v192c0 8.8 7.2 16 16 16s16-7.2 16-16V224z"/>
                                            </svg>
                                        </a>
                                        <a href="{{$draft_link}}" type="button" class="btn p-0 px-2" title="Continue Draft">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16" fill="currentColor">
                                                <path d="M362.7 19.3c12.5-12.5 32.8-12.5 45.3 0l84.7 84.7c12.5 12.5 12.5 32.8 0 45.3L423.4 218.6 293.3 88.4l69.4-69.4zM270.6 111.4L400.6 241.4 188.3 453.7c-7.6 7.6-17.1 13.1-27.6 16.2L81 487.6c-9.5 2.7-19.5-.1-26.4-7s-9.7-16.9-7-26.4l17.7-79.6c3.1-10.5 8.6-20 16.2-27.6L270.6 111.4zM48 464c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V272c0-8.8 7.2-16 16-16s16 7.2 16 16V464c0 26.5-21.5 48-48 48H64c-26.5 0-48-21.5-48-48V272c0-8.8 7.2-16 16-16s16 7.2 16 16V464z"/>
                                            </svg>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        
    </div>
    
</div>
@endsection

@section('scripts')

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script> --}}
<script>
 const dataTable =  $('#blockUser-table').DataTable({
    paging: false,
    info: false,
    language: {
        search: ""
    },
});

$('.delete-btn').on('click',function(event){
    event.preventDefault();
    let link = $(this).data('link');
    alertify.defaults.glossary.title = 'Alert!';
    alertify.confirm('Delete Draft', 'Are you sure you want to delete this draft!', 
        function() { 
            alertify.success('Confirmed'); 
            window.location.href = link;
        },
        function() { 
            alertify.error('Cancelled'); 
        })
        .set({labels:{ok:'Confirm', cancel:'Cancel'}});
})
</script>
@endsection