[% USE KohaDates %]
[% USE ItemTypes %]
[% USE Branches %]
[% USE AuthorisedValues %]
[% USE Asset %]
[% USE raw %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Article requests &rsaquo; Circulation &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
<style>p { margin-top: 0; } [id^="article-menu-"] { display: none; } [id^="article-menu-"]:before { content: "|"; } .starthidden { display:none; }</style>
</head>

[% BLOCK actions %]
    <div id="[% menuid | html %]" class="btn-group dropup">
    <span>
        <a class="btn btn-default btn-xs dropdown-toggle ar-actions" role="button" data-toggle="dropdown" href="#">
            Actions <b class="caret"></b>
        </a>

        <ul class="dropdown-menu [% pull_right | html %]" role="menu" aria-labelledby="[% aria_menu | html %]">
            <li>
                <a class="ar-set-pending-request" href="#" onclick="HandleMulti( SetPending, [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-bars"></i>
                    Set request as pending
                </a>

                <a class="ar-process-request" href="#" onclick="HandleMulti( Process, [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-cog"></i>
                    Process request
                </a>

                [% IF id_arg && format=='SCAN' %]
                <a class="ar-edit-urls" href="#" onclick="HandleMulti( EditURLs, [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-edit"></i>
                    Edit URLs
                </a>
                [% END %]

                <a class="ar-complete-request" href="#" onclick="HandleMulti( Complete, [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-check-circle"></i>
                    Complete request
                </a>

                <a class="ar-cancel-request" href="#" onclick="Cancel( [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-minus-circle"></i>
                    Cancel request
                </a>

                [% IF id_arg %][%# TODO: Does not work with multi-select %]
                <a class="ar-print-request" href="#" onclick="HandleMulti( PrintSlip, [% id_arg | html %], $(this) ); return false;">
                    <i class="fa fa-print"></i>
                    Print slip
                </a>
                [% END %]
            </li>
        </ul>
        </span>
    </div>
[% END %]
[% BLOCK item_status %]
    [% IF myitem.onloan %]<span>Checked out</span>
    [% ELSIF myitem.holds({ found => ['W', 'T'] }).count > 0 %]<span>On hold</span>
    [% ELSIF myitem.notforloan > 0 OR myitem.itemtype.notforloan %]<span>Not for loan</span>
    [% ELSIF myitem.notforloan < 0 %]<span>On order</span>
    [% END %]
[% END %]
[% BLOCK urls_modal %]
    <div id="myModal" class="modal fade modal-lg" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
             <h4 class="modal-title">Edit URL(s)</h4>
          </div>
          <div class="modal-body">
            <textarea id="urls" style="width:100%;"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
          </div>
        </div>
      </div>
    </div>
[% END %]
[% BLOCK cancel_modal %]
    <div id="cancelModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>Confirm deletion</h3>
                </div>

                <div class="modal-body">
                    <p>Are you sure you want to cancel this article request?</p>

                    <fieldset class="action">
                        [% SET ar_cancellation = AuthorisedValues.GetAuthValueDropbox('AR_CANCELLATION') %]
                        [% IF ar_cancellation %]
                            <label for="cancellation-reason" class="col-sm-4">Cancellation reason: </label>
                            <select class="cancellation-reason col-sm-8" name="cancellation-reason" id="modal-cancellation-reason">
                                <option value="" selected>Other reasons</option>
                                [% FOREACH reason IN ar_cancellation %]
                                    <option value="[% reason.authorised_value | html %]">[% reason.lib | html %]</option>
                                [% END %]
                            </select>
                        [% END %]
                    </fieldset>
                    <fieldset class="action">
                        <div class="hint col-sm-offset-4">Enter reason</div>
                        <input type="text" class="notes col-sm-offset-4 col-sm-8" name="notes" id="modal-notes"/>
                    </fieldset>
                </div>

                <div class="modal-footer">
                    <button id="cancelModalConfirmBtn" type="button" class="btn btn-danger" data-dismiss="modal">Confirm cancellation</button>
                    <a href="#" data-dismiss="modal">Cancel</a>
                </div>
            </div>
        </div>
    </div>
[% END %]

<body id="circ_article-requests" class="circ">
    [% INCLUDE 'header.inc' %]
    [% INCLUDE 'cat-search.inc' %]


    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
        <ol>
            <li>
                <a href="/cgi-bin/koha/mainpage.pl">Home</a>
            </li>
            <li>
                <a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
            </li>
            <li>
                <a href="#" aria-current="page">Article requests</a>
            </li>
        </ol>
    </nav>

    <div class="main container-fluid starthidden">
        <div class="row">
            <div class="col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">

                <h1>Article requests</h1>
                [% PROCESS urls_modal %]

                <form id="ar-branchcode-form" method="post">
                    <select name="branchcode" id="branchcode">
                        <option value="">All libraries</option>
                        [% FOREACH b IN Branches.all( only_from_group => 1 ) %]
                            [% IF b.branchcode == branchcode %]
                                <option value="[% b.branchcode | html %]" selected="selected">[% b.branchname | html %]</option>
                            [% ELSE %]
                                <option value="[% b.branchcode | html %]">[% b.branchname | html %]</option>
                            [% END %]
                        [% END %]
                    </select>
                    <button type="submit" class="btn btn-default btn-xs">
                        <i class="fa fa-refresh"></i> Update
                    </button>
                </form>

                <div id="article-request-tabs" class="toptabs">
                    <ul>
                        <li>
                            <a href="#article-requests-requested">
                                New (<span id="ar_requested_count">[% article_requests_requested.count | html %]</span>)
                            </a>
                        </li>

                        <li>
                            <a href="#article-requests-pending">
                                Pending (<span id="ar_pending_count">[% article_requests_pending.count | html %]</span>)
                            </a>
                        </li>

                        <li>
                            <a href="#article-requests-processing">
                                Processing (<span id="ar_processing_count">[% article_requests_processing.count | html %]</span>)
                            </a>
                        </li>
                    </ul>

                    <div id="article-requests-requested">
                        <div class="article-requests-requested_table_controls">
                            <a href="#" class="SelectAll"><i class="fa fa-check"></i> Select all</a> | <a href="#" class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
                            [% PROCESS actions menuid='article-menu-requested' id_arg=0 pull_right='' aria_menu='table_controls' %]
                        </div>

                        <table id="article-requests-requested-table">
                            <thead>
                                <tr>
                                    <th/>
                                    <th class="ar-title">Title</th>
                                    <th class="ar-request">Requested article</th>
                                    <th class="ar-collection">Collection</th>
                                    <th class="ar-itemtype">Item type</th>
                                    <th class="ar-callnumber">Call number</th>
                                    <th class="ar-status">Status</th>
                                    <th class="ar-copynumber">Copy number</th>
                                    <th class="ar-enumchron">Enumeration</th>
                                    <th class="ar-barcode">Barcode</th>
                                    <th class="ar-format">Format</th>
                                    <th class="ar-urls">URLs</th>
                                    <th class="ar-patron">Patron</th>
                                    <th class="ar-date">Date</th>
                                    <th class="ar-actions noExport">Actions</th>
                                </tr>
                            </thead>

                             <tbody>
                                [% FOREACH ar IN article_requests_requested %]
                                    <tr class="ar-row ar-requested">
                                        <td><input type="checkbox" reqid="[% ar.id | html %]"/></td>
                                        <td class="ar-title">
                                            <p>
                                                <a class="title" href="/cgi-bin/koha/circ/request-article.pl?biblionumber=[% ar.biblionumber | uri %]">
                                                    [% INCLUDE 'biblio-title.inc' biblio=ar.biblio %]
                                                </a>
                                            </p>

                                            <p>
                                                <div class="ar-biblionumber content_hidden">[% ar.biblionumber | html %]</div>
                                                <div class="ar-author">[% ar.biblio.author | html %]</div>
                                                <div class="ar-pubdata">
                                                    [% ar.biblio.biblioitem.publishercode | html %]

                                                    [% IF ar.biblio.biblioitem.publicationyear %]
                                                        [% ar.biblio.biblioitem.publicationyear | html %]
                                                    [% ELSIF ar.biblio.copyrightdate %]
                                                        [% ar.biblio.copyrightdate | html %]
                                                    [% END %]

                                                    [% IF ar.biblio.biblioitem.pages %]
                                                        : [% ar.biblio.biblioitem.pages | html %]
                                                    [% END %]

                                                    [% r.biblio.biblioitem.size | html %]

                                                    [% IF ar.biblio.biblioitem.isbn %]
                                                        ISBN: [% ar.biblio.biblioitem.isbn | html %]
                                                    [% END %]
                                                </div>
                                            </p>
                                        </td>
                                        <td class="ar-request">
                                            [% IF ar.title %]        <p><strong>Title:</strong>        [% ar.title | html %]        </p> [% END %]
                                            [% IF ar.author %]       <p><strong>Author:</strong>       [% ar.author | html %]       </p> [% END %]
                                            [% IF ar.volume %]       <p><strong>Volume:</strong>       [% ar.volume | html %]       </p> [% END %]
                                            [% IF ar.issue %]        <p><strong>Issue:</strong>        [% ar.issue | html %]        </p> [% END %]
                                            [% IF ar.date %]         <p><strong>Date:</strong>         [% ar.date | html %]         </p> [% END %]
                                            [% IF ar.pages %]        <p><strong>Pages:</strong>        [% ar.pages | html %]        </p> [% END %]
                                            [% IF ar.chapters %]     <p><strong>Chapters:</strong>     [% ar.chapters | html %]     </p> [% END %]
                                            [% IF ar.patron_notes %] <p><strong>Patron notes:</strong> [% ar.patron_notes | html %] </p> [% END %]
                                        </td>
                                        <td class="ar-collection">[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => ar.item.ccode ) | html %]</td>
                                        <td class="ar-itemtype">[% ItemTypes.GetDescription( ar.item.effective_itemtype ) | html %]</td>
                                        <td class="ar-callnumber">
                                            [% IF ar.item.location %]
                                                <em>[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.location', authorised_value => ar.item.location ) | html %]</em>
                                            [% END %]

                                            [% ar.item.itemcallnumber | html %]
                                        </td>
                                        <td class="ar-status">[% PROCESS 'item_status' myitem = ar.item IF ar.item %]</td>
                                        <td class="ar-copynumber">[% ar.item.copynumber | html %]</td>
                                        <td class="ar-enumchron">[% ar.item.enumchron | html %]</td>
                                        <td class="ar-barcode">[% ar.item.barcode | html %]</td>
                                        <td class="ar-format">[% IF ar.format == 'PHOTOCOPY' %]Copy[% ELSIF ar.format == 'SCAN' %]Scan[% END %]</td>
                                        <td class="ar-urls">[% IF ar.format == 'SCAN' %]<span id="url_yesno_[% ar.id | html %]">[% IF ar.urls %]Yes[% ELSE %]No[% END%]</span><span id="url_[% ar.id | html %]" style="display:none;">[% ar.urls | url %]</span>[% END %]</td>
                                        <td class="ar-patron">
                                            <p>
                                                <a href="/cgi-bin/koha/circ/circulation.pl?findborrower=[% ar.borrower.cardnumber | uri %]">
                                                    [% ar.borrower.surname | html %][% IF ar.borrower.firstname %], [% ar.borrower.firstname | html %][% END %] ([% ar.borrower.cardnumber | html %])
                                                </a>
                                            </p>

                                            <p>[% ar.borrower.phone | html %]</p>
                                        </td>
                                        <td class="ar-date"><span title="[% ar.created_on | html %]">[% ar.created_on | $KohaDates %]</span></td>
                                        <td class="ar-actions">
                                            [% PROCESS actions menuid = "row" _ ar.id id_arg=ar.id pull_right='pull-right' aria_menu='ar-actions' %]
                                        </td>
                                    </tr>
                                [% END %]
                            </tbody>
                        </table>
                    </div>

                    <div id="article-requests-pending">
                        <div class="article-requests-pending_table_controls">
                            <a href="#" class="SelectAll"><i class="fa fa-check"></i> Select all</a> | <a href="#" class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
                            [% PROCESS actions menuid='article-menu-pending' id_arg=0 pull_right='' aria_menu='table_controls' %]
                        </div>

                        <table id="article-requests-pending-table">
                            <thead>
                                <tr>
                                    <th/>
                                    <th class="ar-title">Title</th>
                                    <th class="ar-request">Requested article</th>
                                    <th class="ar-collection">Collection</th>
                                    <th class="ar-itemtype">Item type</th>
                                    <th class="ar-callnumber">Call number</th>
                                    <th class="ar-status">Status</th>
                                    <th class="ar-copynumber">Copy number</th>
                                    <th class="ar-enumchron">Enumeration</th>
                                    <th class="ar-barcode">Barcode</th>
                                    <th class="ar-format">Format</th>
                                    <th class="ar-urls">URLs</th>
                                    <th class="ar-patron">Patron</th>
                                    <th class="ar-date">Date</th>
                                    <th class="ar-actions noExport">Actions</th>
                                </tr>
                            </thead>

                             <tbody>
                                [% FOREACH ar IN article_requests_pending %]
                                    <tr class="ar-row ar-pending">
                                        <td><input type="checkbox" reqid="[% ar.id | html %]"/></td>
                                        <td class="ar-title">
                                            <p>
                                                <a class="title" href="/cgi-bin/koha/circ/request-article.pl?biblionumber=[% ar.biblionumber | uri %]">
                                                    [% INCLUDE 'biblio-title.inc' biblio=ar.biblio %]
                                                </a>
                                            </p>

                                            <p>
                                                <div class="ar-biblionumber content_hidden">[% ar.biblionumber | html %]</div>
                                                <div class="ar-author">[% ar.biblio.author | html %]</div>
                                                <div class="ar-pubdata">
                                                    [% ar.biblio.biblioitem.publishercode | html %]

                                                    [% IF ar.biblio.biblioitem.publicationyear %]
                                                        [% ar.biblio.biblioitem.publicationyear | html %]
                                                    [% ELSIF ar.biblio.copyrightdate %]
                                                        [% ar.biblio.copyrightdate | html %]
                                                    [% END %]

                                                    [% IF ar.biblio.biblioitem.pages %]
                                                        : [% ar.biblio.biblioitem.pages | html %]
                                                    [% END %]

                                                    [% r.biblio.biblioitem.size | html %]

                                                    [% IF ar.biblio.biblioitem.isbn %]
                                                        ISBN: [% ar.biblio.biblioitem.isbn | html %]
                                                    [% END %]
                                                </div>
                                            </p>
                                        </td>
                                        <td class="ar-request">
                                            [% IF ar.title %]        <p><strong>Title:</strong>        [% ar.title | html %]        </p> [% END %]
                                            [% IF ar.author %]       <p><strong>Author:</strong>       [% ar.author | html %]       </p> [% END %]
                                            [% IF ar.volume %]       <p><strong>Volume:</strong>       [% ar.volume | html %]       </p> [% END %]
                                            [% IF ar.issue %]        <p><strong>Issue:</strong>        [% ar.issue | html %]        </p> [% END %]
                                            [% IF ar.date %]         <p><strong>Date:</strong>         [% ar.date | html %]         </p> [% END %]
                                            [% IF ar.pages %]        <p><strong>Pages:</strong>        [% ar.pages | html %]        </p> [% END %]
                                            [% IF ar.chapters %]     <p><strong>Chapters:</strong>     [% ar.chapters | html %]     </p> [% END %]
                                            [% IF ar.patron_notes %] <p><strong>Patron notes:</strong> [% ar.patron_notes | html %] </p> [% END %]
                                        </td>
                                        <td class="ar-collection">[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => ar.item.ccode ) | html %]</td>
                                        <td class="ar-itemtype">[% ItemTypes.GetDescription( ar.item.effective_itemtype ) | html %]</td>
                                        <td class="ar-callnumber">
                                            [% IF ar.item.location %]
                                                <em>[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.location', authorised_value => ar.item.location ) | html %]</em>
                                            [% END %]

                                            [% ar.item.itemcallnumber | html %]
                                        </td>
                                        <td class="ar-status">[% PROCESS 'item_status' myitem = ar.item IF ar.item %]</td>
                                        <td class="ar-copynumber">[% ar.item.copynumber | html %]</td>
                                        <td class="ar-enumchron">[% ar.item.enumchron | html %]</td>
                                        <td class="ar-barcode">[% ar.item.barcode | html %]</td>
                                        <td class="ar-format">[% IF ar.format == 'PHOTOCOPY' %]Copy[% ELSIF ar.format == 'SCAN' %]Scan[% END %]</td>
                                        <td class="ar-urls">[% IF ar.format == 'SCAN' %]<span id="url_yesno_[% ar.id | html %]">[% IF ar.urls %]Yes[% ELSE %]No[% END%]</span><span id="url_[% ar.id | html %]" style="display:none;">[% ar.urls | url %]</span>[% END %]</td>
                                        <td class="ar-patron">
                                            <p>
                                                <a href="/cgi-bin/koha/circ/circulation.pl?findborrower=[% ar.borrower.cardnumber | uri %]">
                                                    [% ar.borrower.surname | html %][% IF ar.borrower.firstname %], [% ar.borrower.firstname | html %][% END %] ([% ar.borrower.cardnumber | html %])
                                                </a>
                                            </p>

                                            <p>[% ar.borrower.phone | html %]</p>
                                        </td>
                                        <td class="ar-date" data-order="[% ar.created_on | html %]">[% ar.created_on | $KohaDates %]</td>
                                        <td class="ar-actions">
                                            [% PROCESS actions menuid = "row" _ ar.id id_arg=ar.id format=ar.format pull_right='pull-right' aria_menu='ar-actions' %]
                                        </td>
                                    </tr>
                                [% END %]
                            </tbody>
                        </table>
                    </div>

                    <div id="article-requests-processing">
                        <div class="article-requests-processing_table_controls">
                            <a href="#" class="SelectAll"><i class="fa fa-check"></i> Select all</a> | <a href="#" class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
                            [% PROCESS actions menuid='article-menu-processing' id_arg=0 pull_right='' aria_menu='table_controls' %]
                        </div>
                        <table id="article-requests-processing-table">
                            <thead>
                                <tr>
                                    <th/>
                                    <th class="ar-title">Title</th>
                                    <th class="ar-request">Requested article</th>
                                    <th class="ar-collection">Collection</th>
                                    <th class="ar-itemtype">Item type</th>
                                    <th class="ar-callnumber">Call number</th>
                                    <th class="ar-status">Status</th>
                                    <th class="ar-copynumber">Copy number</th>
                                    <th class="ar-enumchron">Enumeration</th>
                                    <th class="ar-barcode">Barcode</th>
                                    <th class="ar-format">Format</th>
                                    <th class="ar-urls">URLs</th>
                                    <th class="ar-patron">Patron</th>
                                    <th class="ar-date">Date</th>
                                    <th class="ar-actions noExport">Actions</th>
                                </tr>
                            </thead>

                             <tbody>
                                [% FOREACH ar IN article_requests_processing %]
                                    <tr class="ar-row ar-processing">
                                        <td><input type="checkbox" reqid="[% ar.id | html %]"/></td>
                                        <td class="ar-title">
                                            <p>
                                                [% INCLUDE 'biblio-title.inc' biblio=ar.biblio link = 1%]
                                            </p>

                                            <p>
                                                <div class="ar-biblionumber content_hidden">[% ar.biblionumber | html %]</div>
                                                <div class="ar-author">[% ar.biblio.author | html %]</div>
                                                <div class="ar-pubdata">
                                                    [% ar.biblio.biblioitem.publishercode | html %]

                                                    [% IF ar.biblio.biblioitem.publicationyear %]
                                                        [% ar.biblio.biblioitem.publicationyear | html %]
                                                    [% ELSIF ar.biblio.copyrightdate %]
                                                        [% ar.biblio.copyrightdate | html %]
                                                    [% END %]

                                                    [% IF ar.biblio.biblioitem.pages %]
                                                        : [% ar.biblio.biblioitem.pages | html %]
                                                    [% END %]

                                                    [% r.biblio.biblioitem.size | html %]

                                                    [% IF ar.biblio.biblioitem.isbn %]
                                                        ISBN: [% ar.biblio.biblioitem.isbn | html %]
                                                    [% END %]
                                                </div>
                                            </p>
                                        </td>
                                        <td class="ar-request">
                                            [% IF ar.title %]        <p><strong>Title:</strong>        [% ar.title | html %]        </p> [% END %]
                                            [% IF ar.author %]       <p><strong>Author:</strong>       [% ar.author | html %]       </p> [% END %]
                                            [% IF ar.volume %]       <p><strong>Volume:</strong>       [% ar.volume | html %]       </p> [% END %]
                                            [% IF ar.issue %]        <p><strong>Issue:</strong>        [% ar.issue | html %]        </p> [% END %]
                                            [% IF ar.date %]         <p><strong>Date:</strong>         [% ar.date | html %]         </p> [% END %]
                                            [% IF ar.pages %]        <p><strong>Pages:</strong>        [% ar.pages | html %]        </p> [% END %]
                                            [% IF ar.chapters %]     <p><strong>Chapters:</strong>     [% ar.chapters | html %]     </p> [% END %]
                                            [% IF ar.patron_notes %] <p><strong>Patron notes:</strong> [% ar.patron_notes | html %] </p> [% END %]
                                        </td>
                                        <td class="ar-collection">[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.ccode', authorised_value => ar.item.ccode ) | html %]</td>
                                        <td class="ar-itemtype">[% ItemTypes.GetDescription( ar.item.effective_itemtype ) | html %]</td>
                                        <td class="ar-callnumber">
                                            [% IF ar.item.location %]
                                                <em>[% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.location', authorised_value => ar.item.location ) | html %]</em>
                                            [% END %]

                                            [% ar.item.itemcallnumber | html %]
                                        </td>
                                        <td class="ar-status">[% PROCESS 'item_status' myitem = ar.item IF ar.item %]</td>
                                        <td class="ar-copynumber">[% ar.item.copynumber | html %]</td>
                                        <td class="ar-enumchron">[% ar.item.enumchron | html %]</td>
                                        <td class="ar-barcode">[% ar.item.barcode | html %]</td>
                                        <td class="ar-format">[% IF ar.format == 'PHOTOCOPY' %]Copy[% ELSIF ar.format == 'SCAN' %]Scan[% END %]</td>
                                        <td class="ar-urls">[% IF ar.format == 'SCAN' %]<span id="url_yesno_[% ar.id | html %]">[% IF ar.urls %]Yes[% ELSE %]No[% END%]</span><span id="url_[% ar.id | html %]" style="display:none;">[% ar.urls | url %]</span>[% END %]</td>
                                        <td class="ar-patron">
                                            <p>
                                                <a href="/cgi-bin/koha/circ/circulation.pl?findborrower=[% ar.borrower.cardnumber | uri %]">
                                                    [% ar.borrower.surname | html %][% IF ar.borrower.firstname %], [% ar.borrower.firstname | html %][% END %] ([% ar.borrower.cardnumber | html %])
                                                </a>
                                            </p>

                                            <p>[% ar.borrower.phone | html %]</p>
                                        </td>
                                        <td class="ar-date" data-order="[% ar.created_on | html %]">[% ar.created_on | $KohaDates %]</td>
                                        <td class="ar-actions">
                                            [% PROCESS actions menuid="table_" _ ar.id id_arg=ar.id format=ar.format pull_right='pull-right' aria_menu='ar-actions' %]
                                        </td>
                                    </tr>
                                [% END %]
                            </tbody>
                        </table>
                    </div>
                    <br/>
                </div>
            </div>
        </div>
    </div>
    [% PROCESS cancel_modal %]

[% MACRO jsinclude BLOCK %]
    [% INCLUDE 'datatables.inc' %]
    <script>
        var active_tab = "#article-requests-requested";
        var last_cancel_reason, requested_datatable, pending_datatable, processing_datatable, active_datatable;
        $(document).ready(function() {
            $('#article-request-tabs').tabs({
                activate: function( activate_event, activate_ui ) {
                    active_tab = activate_ui.newPanel.selector;
                    if( active_tab == '#article-requests-requested' )
                        active_datatable = requested_datatable;
                    else if( active_tab == '#article-requests-pending' )
                        active_datatable = pending_datatable;
                    else active_datatable = processing_datatable;
                    activateBatchActions( active_tab );
                },
            });


            $( "input:checkbox, #article-request-tabs" ).on("change", function(){
                activateBatchActions( active_tab );
            });

            $(".SelectAll").on("click", function(e) {
                e.preventDefault();
                $( active_tab + " input[type='checkbox']").prop('checked', true);
                activateBatchActions( active_tab );
            });
            $(".ClearAll").on("click", function(e) {
                e.preventDefault();
                $( active_tab + " input[type='checkbox']").prop('checked', false);
                activateBatchActions( active_tab );
            });
            $("a.ar-actions").on('click', function(e) {
                // Hide menu option ?
                if( $('#article-requests-requested-table:visible,#article-requests-pending-table:visible').length )
                    $('a.ar-process-request').show();
                else $('a.ar-process-request').hide();

                if( $('#article-requests-requested-table').is(":visible") )
                    $('a.ar-set-pending-request').show();
                else $('a.ar-set-pending-request').hide();
            });

            $('#myModal').on("shown.bs.modal", function () {
                $('#myModal textarea').focus();
            });
            $('#myModal').on("hidden.bs.modal", function () {
                // Set focus back to dropdown
                var id = $('#myModal textarea').attr('ar_id');
                var link = $('span#url_'+ id).parent().parent().find('td.ar-actions').find('div.dropdown a');
                if( link.length > 0 ) link[0].focus();
            });
            $( '#myModal button' ).on("click", function () {
                SaveURLs( $('#myModal textarea').val() );
            });

            requested_datatable = $("#article-requests-requested-table").DataTable($.extend(true, {}, dataTablesDefaults, {
                "aoColumnDefs": [
                    { "aTargets": [0, -1], "bSortable": false, "bSearchable": false },
                ],
            }));

            pending_datatable = $("#article-requests-pending-table").DataTable($.extend(true, {}, dataTablesDefaults, {
                "aoColumnDefs": [
                    { "aTargets": [0, -1], "bSortable": false, "bSearchable": false },
                ],
            }));
            processing_datatable = $("#article-requests-processing-table").DataTable($.extend(true, {}, dataTablesDefaults, {
                "aoColumnDefs": [
                    { "aTargets": [0, -1], "bSortable": false, "bSearchable": false },
                ],
            }));
            active_datatable = requested_datatable;
            activateBatchActions( active_tab );
            $(".starthidden").show();
        });

        function activateBatchActions( active_tab ){
            // Check to see whether batch menu should be shown based on state of checkboxes
            if ( $( "input:checkbox", active_tab ).length > 0 ) {
                // There are rows with checkboxes
                $( "[class$='_table_controls']", active_tab ).show();
                if ( $( "input:checkbox:checked", active_tab ).length > 0 ) {
                    $( "[id^='article-menu-']", active_tab ).css("display","inline-block");
                } else {
                    $( "[id^='article-menu-']", active_tab ).hide();
                }
            } else {
                // All rows have been removed
                $("[class$='_table_controls']", active_tab ).hide();
            }
        }

        function HandleMulti( fnHandler, id, a ) {
            last_cancel_reason = undefined;
            if( id !== 0 ) { fnHandler( id, a ); return; }
            $( active_tab + " input[type='checkbox']:checked").each(function() {
                fnHandler( $(this).attr('reqid'), $(this).closest('tr').find('td.ar-actions div a') );
            });
        }

        function PrintSlip(id, a) {
            var link = 'article-request-slip.pl?id='+id;
            window.open(link, 'popup', 'width=600,height=400,resizable=1,toolbar=0,scrollbars=1,top');
        }

        $('#modal-cancellation-reason').on('change', function(e) {
            let reason = $(this).val();
            $('#modal-notes').attr('disabled', !!reason);
        })

        // Confirm cancellation of article requests
        let cancel_id;
        let cancel_a;
        $("#cancelModalConfirmBtn").on("click",function(e) {
            let reason = $("#modal-cancellation-reason").val();
            let notes = $("#modal-notes").val();
            let query = '?'+(reason?'cancellation_reason='+reason:'notes='+notes)

            HandleMulti(function(id, a) {
                var table_row = a.closest('tr');
                table_row.find('.ar-process-request').remove();
                table_row.find('input[type="checkbox"]').prop('checked', false);


                a.closest('td').prepend('<img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif"/>').find('div.dropdown').hide();

                $.ajax({
                    type: "DELETE",
                    url: '/api/v1/article_requests/'+id+query,
                    success: function( data ) {
                        active_datatable.row( a.closest('tr') ).remove().draw();
                        UpdateTabCounts();
                        activateBatchActions( active_tab );
                    }
                });
            }, cancel_id, cancel_a)
        });

        function Cancel( id, a ) {
            cancel_id = id;
            cancel_a = a;

            $('#cancelModal').modal();
        }

        function SetPending( id, a ) {
            var table_row = a.closest('tr');
            table_row.find('.ar-set-pending-request').remove();
            table_row.find('input[type="checkbox"]').prop('checked', false);
            a.closest('td').prepend('<img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" class="spinner"/>').find('div.dropdown').hide();
            $.ajax({
                type: "POST",
                url: '/cgi-bin/koha/svc/article_request',
                data: {
                    action: 'pending',
                    id: id,
                },
                success: function( data ) {
                    $("img.spinner").remove();
                    requested_datatable.row( table_row ).remove().draw();
                    pending_datatable.row.add( table_row ).draw();
                    UpdateTabCounts();
                    activateBatchActions( active_tab );
                },
                dataType: 'json'
            });
        }

        function Process( id, a ) {
            var table_row = a.closest('tr');
            var table = a.closest('table');
            var orig_datatable = table.attr('id')==='article-requests-pending-table'?pending_datatable:requested_datatable;
            table_row.find('.ar-process-request').remove();
            table_row.find('input[type="checkbox"]').prop('checked', false);

            a.closest('td').prepend('<img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" class="spinner"/>').find('div.dropdown').hide();
            $.ajax({
                type: "POST",
                url: '/cgi-bin/koha/svc/article_request',
                data: {
                    action: 'process',
                    id: id,
                },
                success: function( data ) {
                    $("img.spinner").remove();
                    orig_datatable.row( table_row ).remove().draw();
                    processing_datatable.row.add( table_row ).draw();
                    UpdateTabCounts();
                    activateBatchActions( active_tab );
                },
                dataType: 'json'
            });
        }

        function Complete( id, a ) {
            // if it is a scan, check if urls field is filled
            var urlspan = $('span#url_'+id);
            if( urlspan.length>0 && urlspan.text() === '' ) {
                alert( _("Please fill URL before completing request.") );
                return;
            }
            a.closest('td').prepend('<img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif"/>').find('div.dropdown').hide();
            $.ajax({
                type: "POST",
                url: '/cgi-bin/koha/svc/article_request',
                data: {
                    action: 'complete',
                    id: id,
                },
                success: function( data ) {
                    active_datatable.row( a.closest('tr') ).remove().draw();
                    UpdateTabCounts();
                    activateBatchActions( active_tab );
                },
                dataType: 'json'
            });
        }

        function UpdateTabCounts() {
            $("#ar_requested_count").html( requested_datatable.rows().count() );
            $("#ar_pending_count").html( pending_datatable.rows().count() );
            $("#ar_processing_count").html( processing_datatable.rows().count() );
        }

        function EditURLs(id) {
            var urls = $('span#url_'+ id).text();
            $('#myModal textarea').val(urls);
            $('#myModal textarea').attr('ar_id', id);
            $('#myModal').modal('show');
        }

        function SaveURLs(newurl) {
            var id = $('#myModal textarea').attr('ar_id');
            $('span#url_'+ id).text(newurl);
            if(newurl)
                $('span#url_yesno_'+id).text(_("Yes"));
            else
                $('span#url_yesno_'+id).text(_("No"));

            $.ajax({
                type: "POST",
                url: '/cgi-bin/koha/svc/article_request',
                data: { action: 'update_urls', id: id, urls: newurl },
                dataType: 'json',
                error: function() { alert('Error: Saving URL failed!'); },
                success: function(data) { if(!data.success) alert('Saving URL failed!'); },
            });
        }
    </script>
[% END %]

[% INCLUDE 'intranet-bottom.inc' %]