@extends('includes.main')

@section('pageSpecificStyles')
    <style type="text/css">
    .disabledLink{
        cursor: default;!important
        pointer-events: none;
    }

    .companyLogos{
            min-height: 100vh;
        }

        .logoViewer{
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .companyLogo{
            padding: 3em;
            width: 100%;
        }

        .companyBtn{
            background: #70B600;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
            border-radius: 12px;
            color: white;
            padding: 12px;
            width: 150px;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 26px;
            letter-spacing: 0px;
            text-align: center;

        }

        .companyBtn:hover{
            color: white;
            -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.75);
        }

        .disabledLink{
            pointer-events: none;
            opacity: 0.1
        }


    </style>
@endsection
@section('pageSpecificContent')

<div class="card m-b-20">
    <div class="card-body">
        @if($selectedCompany == null)
            <div class="row companyLogos">
                <div class="col-md-6">
                    <a href="{{ route('pdf.index',['company'=>1]) }} " >
                        <div data-companyId="1" class="jumbotron text-center logoViewer" >
                            <img class="companyLogo"  src="{{ asset('myAssets/images/Logo_Roundtrips.png') }}">
                            <a class="btn companyBtn" href="{{ route('pdf.index',['company'=>1]) }}" role="button">View PDF</a>
                        </div>
                    </a>
                </div>

                <div class="col-md-6">
                    <a href="{{ route('pdf.index',['company'=>2]) }} " >
                        <div data-companyId="1" class="jumbotron text-center logoViewer" >
                            <img class="companyLogo"  src="{{ asset('myAssets/images/Logo_TagesFahrten_Global.png') }}">
                            <a class="btn companyBtn" href="{{ route('pdf.index',['company'=>2]) }}" role="button">View PDF</a>
                        </div>
                    </a>
                </div>
            </div>
        @else
        <div class="row  mainContent">
            <div class="col-md-12">
                <form method="GET" id="search-form" action="{{route('pdf.index')}}">
                <input type="hidden" name="company" value="{{$selectedCompany}}"/>
                <div class="row">
                      
                        <div class="form-group col-md-9 ml-auto">
                            <div class="input-group">
                                <input type="search" class="form-control" value="{{$_GET['search-text'] ?? ''}}" name="search-text" aria-label="Text input with dropdown button" placeholder="Search text here">
                                <div class="input-group-append">
                                    <select class="custom-select search-select" name="search-column" class="search-column" id="search-column">
                                        <option value="" selected>Both</option>
                                        <option value="1">Heading</option>
                                        <option value="2">Sub Heading</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <button type="submit" style="margin-top: -1px" class="btn btn-info btn-block "><i class="fa fa-search"></i> Search</button>
                        </div>   
                        <div class="form-group ml-auto col-md-3">
                            <select id="sort" onchange="$('#search-form').submit()" name="sort" class="form-control mr-auto">
                                <option disabled selected value="">Sorty By</option>
                                <option value="1" >Updated At</option>
                                <option value="2" >Priority</option>
                            </select>
                        </div>                     
                    </div>
                </form>
            </div>
            <div class="col-md-12">
                <div class="table-rep-plugin">
                    <div class="table table-responsive b-0" data-pattern="priority-columns">
                        <table  class="table table-striped"
                               cellspacing="0"
                               width="100%">
                            <thead>
                            <tr>
                                <th scope="col">Company</th>
                                <th scope="col">Heading (EN)</th>
                                <th scope="col">Heading (DE)</th>
                                <th scope="col">Sub (EN)</th>
                                <th scope="col">Sub (DE)</th>
                                <th scope="col">Priority</th>
                                <th  style="text-align:center" scope="col">View</th>
                                <th  style="text-align:center" scope="col">Actions</th>
                            </tr>

                            </thead>
                            <tbody id="tBody">
                                @if(count($pdfs) >0)
                                @foreach($pdfs as $pdf)
                                <tr id="{{$pdf->idpdf}}">
                                    <td>{{$pdf->company->name}}</td>
                                    <td>{{$pdf->heading_en}}</td>
                                    <td>{{$pdf->heading_de}}</td>
                                    <td>{{$pdf->sub_en}}</td>
                                    <td>{{$pdf->sub_de}}</td>
                                    <td><h5><span class="badge badge-warning">{{$pdf->priority}}</span></h5></td>
                                    <td style="text-align:center">
                                        <p style='white-space: nowrap;'>
                                            <button
                                                type='button' class='btn btn-sm btn-info'
                                                title="Click to view categories"
                                                onclick="viewCategories({{$pdf->idpdf}},'{{ route('pdf.getCategories', ['pdf'=>$pdf->idpdf] ) }}')">
                                                <i class='fa fa-boxes'></i>
                                            </button>
                                            <a href="{{ route('pdf.show',['lang'=>'en','id'=>$pdf->idpdf])}}"
                                            type='button' class='{{ $pdf->path_en != null ? '' : 'disabledLink' }}'
                                                title="Click to view english pdf">
                                                <img src="{{ asset('myAssets/images/english_view.png') }}">
                                                </a>
                                            <a href="{{ route('pdf.show',['lang'=>'de','id'=>$pdf->idpdf])}}"
                                            type='button' class='{{ $pdf->path_de != null ? '' : ' disabledLink' }}'
                                            title="Click to view german pdf">
                                            <img src="{{ asset('myAssets/images/german_view.png') }}">
                                            </a>
                                        </p>
                                    </td>
                                    <td style="text-align:center">
                                        <p style='white-space: nowrap;'>
                                            <a
                                            type='button' style="background-color:#85d309;color:white" class='btn btn-sm text-center'
                                            title="Edit" href="{{ route('pdf.edit',['pdf'=>$pdf->idpdf])}}">
                                            <i class='fa fa-edit'></i>
                                            </a>
                                            <button
                                                type='button' class='btn btn-sm btn-danger'
                                                title="Delete"
                                                onclick="destroy({{$pdf->idpdf}},'{{ route('pdf.destroy', ['pdf'=>$pdf->idpdf] ) }}')">
                                                <i class='fa fa-trash'></i>
                                            </button>
                                        </p>
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr><td colspan="8" style="text-align: center">No Data.</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                {{$pdfs->links()}}
            </div>
        </div>
        @endif
    </div>
</div>

 <!-- modal start -->
 <div class="modal fade" id="categoryModal" tabindex="-1"
 role="dialog"
 aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title mt-0">Categories</h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">×
            </button>
        </div>
        <div class="modal-body pb-0 mb-0">
            <div class="row pb-0 mb-0">
                <div class="col-md-12 pb-0 mb-0">
                    <div class="table-rep-plugin pb-0 mb-0">
                        <div class="table table-responsive b-0  pb-0 mb-0" data-pattern="priority-columns">
                            <table class="table table-striped"
                                   cellspacing="0"
                                   width="100%">
                                <thead>
                                </thead>
                                <tbody id="categoriesTBody">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- modal end -->

@endsection
@section('pageSpecificScript')
    <script language="JavaScript" type="text/javascript">
    $(document).ready(function () {

        $('.disabledLink').attr('href','javascript:void(0)');
        $('#search-column').val("{{$_GET['search-column'] ?? ''}}").trigger('change');

    });

    function viewCategories(id,url){
        $.ajax({
            url: url,
            type: 'POST',
            success: function (data) {
                let tableData = "";
                $.each(data, function (key, value) {
                    tableData += "<tr>";
                    tableData += "<td>"+value.category.full_breadcrump+"</td>";
                    tableData += "</tr>";
                });
                $('#categoriesTBody').html(tableData);
                $('#categoryModal').modal('show');
            },
            error: function (data) {
                showRequestErrors(data);
            }
        });
    }

    function destroy(id,url){
        swal.fire({
            title: '{{__('common.Delete')}}?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `Delete`,
            confirmButtonClass: `deleteBtn`,
            buttonsStyling: true,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                $.ajax({
                url: url,
                type: 'DELETE',
                success: function (data) {
                    console.log(data);
                    showControllerErrors(data);
                    if (data.success != null) {
                        $('#'+id).remove();
                        showSuccess(data.success);//show success alert
                    }
                },
                error: function (data) {
                    showRequestErrors(data);
                }
            });
            } else if (result.isDenied) {
                Swal.fire('Process terminated', '', 'info')
            }
        });
    }
    </script>
@endsection